forwardRef.Scatter3D.js

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsExporting(Highcharts);
Highcharts3D(Highcharts);

const Scatter3D = React.forwardRef((props, ref) => {
  React.useEffect(() => {
    if (ref.current) {
      const chart = ref.current.chart;
      const add3DControl = () => {
        // start to drag a point
        const 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
          const 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();
    }
  }, [ref]);

  return (
    <HighchartsReact ref={ref} highcharts={Highcharts} options={props.options} />
  );
});

export default Scatter3D;