import { MaidrNivo } from 'maidr/nivo';
import { ResponsiveBar } from '@nivo/bar';
function AccessibleBarChart() {
return (
<MaidrNivo id="sales" title="Sales by Quarter" type="bar">
<div style={{ width: 600, height: 400 }}>
<ResponsiveBar
data={[
{ quarter: 'Q1', sales: 120 },
{ quarter: 'Q2', sales: 200 },
]}
keys={['sales']}
indexBy="quarter"
axisBottom={{ legend: 'Quarter' }}
axisLeft={{ legend: 'Sales ($)' }}
/>
</div>
</MaidrNivo>
);
}
React component that wraps a Nivo chart and provides accessible, non-visual access through MAIDR's audio sonification, text descriptions, braille output, and keyboard navigation.
Nivo's components cannot be told apart by their element type, so the chart kind is declared with
type:'bar','line','scatterplot','pie','heatmap'or'boxplot'. The data is read from the child chart's props.A
Responsive*chart fills its parent, so give it a sized parent inside the wrapper; MAIDR's own wrapper sizes itself to its content.