Module adapters/chartjs

Chart.js integration for MAIDR.

Provides a Chart.js plugin that automatically adds accessible, non-visual access to canvas-based Chart.js visualizations through audio sonification, text descriptions, braille output, and keyboard navigation.

Remarks

Requires chart.js (v4+), react, and react-dom as peer dependencies.

Example

import { Chart } from 'chart.js/auto';
import { maidrPlugin } from 'maidr/chartjs';

// Register globally — all charts become accessible
Chart.register(maidrPlugin);

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Sales', data: [10, 20, 30] }],
  },
});

Example

// Use extractMaidrData for manual control
import { extractMaidrData } from 'maidr/chartjs';

const maidrData = extractMaidrData(myChartInstance);
// Pass to <Maidr data={maidrData}> or use programmatically

References

extractMaidrData → extractMaidrData
maidrPlugin → maidrPlugin
ChartJsChart → ChartJsChart
ChartJsPlugin → ChartJsPlugin
MaidrPluginOptions → MaidrPluginOptions

Module adapters/chartjs

Remarks

Example

Example

References

Settings

On This Page