Highcharts.cylinder.App.js

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import Highcharts3D from 'highcharts/highcharts-3d';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
import HighchartsCylinder from 'highcharts/modules/cylinder';
Highcharts3D(Highcharts);
HighchartsExporting(Highcharts);
HighchartsAccessibility(Highcharts);
HighchartsCylinder(Highcharts);

const getOptions = (type) => ({
  chart: {
    type,
    width: 800,
    height: 600,
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F'],
  },
  zAxis: {
    min: 0,
    max: 300,
  },
  series: [
    {
      name: 'Group 1',
      data: [0, 3, 5, 5, 6, 2],
      depth: 0,
      pointWidth: 30,
    },
    {
      name: 'Group 2',
      data: [0, 1, 3, 6, 1, 9],
      depth: 100,
      pointWidth: 20,
    },
    {
      name: 'Group 3',
      data: [1, 2, 5, 4, 9, 11],
      depth: 200,
      pointWidth: 20,
    },
    {
      name: 'Group 4',
      data: [1, 3, 2, 8, 7, 5],
      depth: 300,
      pointWidth: 50,
    },
  ],
  credits: {
    enabled: false,
  },
});

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

export default App;