Highcharts.heatmap.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 HighchartsHeatmap from 'highcharts/modules/heatmap';
HighchartsExporting(Highcharts);
HighchartsHeatmap(Highcharts);

const getOptions = (type) => ({
  chart: {
    type,
    plotBorderWidth: 1,
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F'],
  },
  yAxis: {
    categories: ['Apple', 'Banana', 'Pear'],
    title: null,
    reversed: true,
  },
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
  },
  series: [
    {
      data: [
        [0, 0, 5], [0, 1, 8], [0, 2, 9],
        [1, 0, 3], [1, 1, 6], [1, 2, 2],
        [2, 0, 7], [2, 1, 1], [2, 2, 9],
        [3, 0, 4], [3, 1, 5], [3, 2, 1],
        [4, 0, 8], [4, 1, 6], [4, 2, 7],
        [5, 0, 7], [5, 1, 3], [5, 2, 4],
      ],
      dataLabels: {
        enabled: true,
      },
    },
  ],
  credits: {
    enabled: false,
  },
});

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

export default App;