forwardRef.App.js

import React from 'react';
import _ from 'lodash';
import Scatter3D from './Scatter3D';

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 = React.useRef();

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

export default App;