Highcharts.7Examples.3dRotation.App.js

import { useEffect, useRef } from 'react';
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: 'scatter3d',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  zAxis: {
    showFirstLabel: false,
  },
  series: [
    {
      data: [
        [0, 2, 0],
        [1, 2, 0],
        [2, 1, 0],
        [3, 4, 0],
        [4, 3, 0],
        [5, 2, 0],
      ],
    },
    {
      data: [
        [0, 4, 100],
        [1, 3, 100],
        [2, 6, 100],
        [3, 5, 100],
        [4, 4, 100],
        [5, 6, 100],
      ],
    },
    {
      data: [
        [0, 5, 200],
        [1, 7, 200],
        [2, 7, 200],
        [3, 6, 200],
        [4, 7, 200],
        [5, 7, 200],
      ],
    },
  ],
  credits: {
    enabled: false,
  },
});

function App() {
  const chartRef = useRef();

  useEffect(() => {
    if (chartRef.current) {
      const chart = chartRef.current.chart;
      function add3DControl() {
        // start to drag a point
        function dragStart(e) {
          const eNormalized = chart.pointer.normalize(e); // point position
          const posX = eNormalized.chartX;
          const posY = eNormalized.chartY;
          const alpha = chart.options.chart.options3d.alpha; // rotation around X axis
          const beta = chart.options.chart.options3d.beta; // rotation around Y axis
          const sensitivity = 5; // lower is more sensitive
          const handlers = []; // event handlers

          // drag a point
          function drag(e) {
            e = chart.pointer.normalize(e); // point position
            chart.update(
              // option
              {
                chart: {
                  options3d: {
                    alpha: alpha + (e.chartY - posY) / sensitivity, // set new alpha value
                    beta: beta + (posX - e.chartX) / sensitivity, // set new beta value
                  },
                },
              },
              undefined, // whether to redraw, default is true
              undefined, // whether items are updated one to one, default is false
              false // whether to apply animation, default is true
            );
          }

          // clear all events
          function unbindAll() {
            handlers.forEach(function (unbind) {
              if (unbind) {
                unbind();
              }
            });
            handlers.length = 0;
          }

          // add drag and clear events
          handlers.push(Highcharts.addEvent(document, 'mousemove', drag));
          handlers.push(Highcharts.addEvent(document, 'touchmove', drag));
          handlers.push(Highcharts.addEvent(document, 'mouseup', unbindAll));
          handlers.push(Highcharts.addEvent(document, 'touchend', unbindAll));
        }

        // add starting rotation events
        Highcharts.addEvent(chart.container, 'mousedown', dragStart);
        Highcharts.addEvent(chart.container, 'touchstart', dragStart);
      }
      add3DControl();
    }
  }, []);

  return (
    <HighchartsReact ref={chartRef} highcharts={Highcharts}options={getOptions('scatter')} />
  );
}

export default App;