Highcharts.3D.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 Highcharts3D from 'highcharts/highcharts-3d';
HighchartsExporting(Highcharts);
Highcharts3D(Highcharts);

const getOptions = (type) => ({
  chart: {
    type,
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  xAxis: [
    {
      visible: false,
    },
    {
      visible: false,
    },
    {
      visible: false,
    },
  ],
  plotOptions: {
    [type]: {
      depth: 100,
    },
  },
  series: [
    {
      xAxis: 0,
      data: [2, 2, 1, 4, 3, 2],
    },
    {
      xAxis: 1,
      data: [4, 3, 6, 5, 4, 6],
    },
    {
      xAxis: 2,
      data: [5, 7, 7, 6, 7, 7],
    },
  ],
  credits: {
    enabled: false,
  },
});

function App() {
  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={getOptions('line')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('spline')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('area')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('areaspline')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('bar')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('pie')} />
      <HighchartsReact highcharts={Highcharts} options={getOptions('scatter')} />
    </div>
  );
}

export default App;