Chartjs-How do I make the legends tab focusable in a chart.js Line chart using React.js?

by

0👍

I wanted to see if I could build a plugin to help address this issue for you. The plugin is chartjs-plugin-a11y-legend, and I have it working with some basic examples and vanilla chart.js.

Here are examples with keyboard navigation if you want to play with them.
https://codepen.io/chart2music/full/ZEMyLVZ

You would be able to use the plugin by just importing the plugin and registering it. So:

// Import the plugin
import plugin from "chartjs-plugin-a11y-legend";
// Import from Chartjs as normal
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale, //x axis
  LinearScale, //y axis
  PointElement,
  Legend,
  Tooltip,
} from "chart.js";

// Register all of the normal Chartjs things
ChartJS.register(
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend,
  Tooltip,

  // and register the plugin
  plugin
);

I haven’t tested it with react-chartjs-2. If it doesn’t work with that… if you can provide me a codepen or codesandbox, I’ll try to get it sorted out.

Leave a comment