Highcharts.accessibility.App.js

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import './App.css';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsExporting(Highcharts);
HighchartsMore(Highcharts);
HighchartsAccessibility(Highcharts);

const getOptions = (type) => ({
  chart: {
    type,
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  accessibility: {
    description:
      'The gauge chart shows the performance speed between 0 and 100.',
  },
  pane: {
    startAngle: -90,
    endAngle: 89.9,
    background: null,
    center: ['50%', '70%'],
    size: '120%',
  },
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed',
    },
    plotBands: [
      {
        from: 0,
        to: 25,
        color: '#FF0000',
        thickness: 15,
      },
      {
        from: 25,
        to: 80,
        color: '#00FF00',
        thickness: 15,
      },
      {
        from: 80,
        to: 180,
        color: '#0000FF',
        thickness: 15,
      },
    ],
  },
  series: [
    {
      data: [80],
    },
  ],
  credits: {
    enabled: false,
  },
});

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('gauge')} />
  );
}

export default App;