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

const getOptions = (type) => ({
  title: {
    text: _.startCase(`${type} chart`),
  },
  series: [
    {
      type,
      layoutAlgorithm: 'sliceAndDice',
      data: [
        {
          id: 'R',
          name: 'Red',
          color: '#FF0000',
        },
        {
          id: 'G',
          name: 'Green',
          color: '#00FF00',
        },
        {
          id: 'B',
          name: 'Blue',
          color: '#0000FF',
        },
        {
          name: 'R.1',
          parent: 'R',
          value: 3,
        },
        {
          name: 'R.2',
          parent: 'R',
          value: 5,
        },
        {
          name: 'R.3',
          parent: 'R',
          value: 4,
        },
        {
          name: 'G.1',
          parent: 'G',
          value: 7,
        },
        {
          name: 'G.2',
          parent: 'G',
          value: 2,
        },
        {
          name: 'B.1',
          parent: 'B',
          value: 6,
        },
        {
          name: 'B.2',
          parent: 'B',
          value: 4,
        },
        {
          name: 'B.3',
          parent: 'B',
          value: 1,
        },
        {
          name: 'B.4',
          parent: 'B',
          value: 7,
        },
      ],
    },
  ],
  credits: {
    enabled: false,
  },
});

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

export default App;