score:1

Accepted answer

that's because there are different orders of action.

with react:

  1. chart is created without data
  2. data is received and the chart is updated

without react:

  1. data is received
  2. chart is created

as a solution, you can call loadinitialdata in useeffect hook and render highchartsreact component after the data has been received.

const chartcomponent = () => {
  const [options, setoptions] = usestate(null);

  useeffect(() => {
    loadinitialdata();
  }, []);

  function loadinitialdata() {
    fetch(dataurl)
      .then((res) => res.ok && res.json())
      .then((data) => {
        ...
        setoptions({
          ...chartoptions,
          series: [
            {
              data
            }
          ],
          ...
        });
      });
  }

  function aftersetextremes(e) {
    ...
  }

  return (
    options && (
      <highchartsreact
        constructortype="stockchart"
        highcharts={highcharts}
        options={options}
      />
    )
  );
};

live demo: https://codesandbox.io/s/highcharts-react-3tcdw7?file=/demo.jsx


Related Query

More Query from same tag