react-highcharts-official lazy loading data

Question

I like to lazy load data like in the highstock sample "1.7 million points with async loading" via highcharts-react-offical with highstock in typescript with multiple series.

However I lack any documentation for highcharts-react-offical on:

• how to correctly listen for afterSetExtremes to trigger lazy data loading?
• how do I call setData?
• How does this work with multiple series?

Can anyone help me with this and provide any sample?

I really appreciate your expertise and help!

Answer 1

Options for Highcharts chart are the same with and without the react wrapper, they are independent. The easiest way to implement a lazy loading chart is to keep data loading functions out of React - you just need to use almost the same code as in the jsfiddle example.

Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-ci7hf?file=/chartOptions.js

---

However, you can also use more 'reactive' way and update chart by updating state.

const ChartComponent = () => {
  const [options, setOptions] = useState({
    ...,
    xAxis: {
      events: {
        afterSetExtremes
      }
    }
  });

  function afterSetExtremes(e) {
    const { chart } = e.target;
    chart.showLoading("Loading data from server...");
    fetch(`${dataURL}?start=${Math.round(e.min)}&end=${Math.round(e.max)}`)
      .then((res) => res.ok && res.json())
      .then((data) => {
        setOptions({ // update chart with new data
          series: [{ data }]
        });
        chart.hideLoading();
      })
      .catch((error) => console.error(error.message));
  }

  return (
    <HighchartsReact
      options={options}
      ...
    />
  );
};

Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-wvrd6?file=/demo.jsx