2

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!

Manuel
  • 9,112
  • 13
  • 70
  • 110

1 Answers1

3

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks for providing that sample. I tested it and noticed that it doesn't show any candles when selecting "1h" in the zoom but the original sample does: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/lazy-loading – Benny Code Jan 12 '22 at 22:57
  • Hi @Benny Neugebauer, The chart is empty because the received data from API for 1 hour is an empty array. – ppotaczek Jan 13 '22 at 10:35
  • Thanks for your help. Note: I had to remove "setOptions" from "afterSetExtremes" because it caused an infinite rendering loop on my end. I resolved it by replacing `setOptions` with `chart.series[0].setData(data)`. – Benny Code Feb 20 '22 at 00:38