How to recreate chart in React

[rise]

I need to create a chart that will show different periods on user choice: year, month and custom date period.
I use highcharts-react-official library.
I tried to update chart like this:

Code: Select all

  useEffect(() => {
    const maxVal = { week: 6, month: 4, year: 10.94 };
    const series = isCompare ? chartSeriesCompare(data) : chartSeries(data);
    setChartOptions({
      series,
      xAxis: { max: maxVal[data.period as keyof typeof maxVal] },
    });
    bugCycleTimeRef.current?.chart.destroy();
    bugCycleTimeRef.current?.chart.xAxis[0].setCategories(getCategories(data.period));

  }, [data]);

But it works badly. For example, I get four series but with two legend items instead four.
How can I recreate the chart in React?

[jakub.j]

We appreciate you reaching out to us!

Could you reproduce the issue in an online editor that I could work on? It's hard to tell what you want to achieve without seeing your whole chart.

Without it, my suggestion is, that you could use axis.setExtremes, using it, you can allow user to change the period to anyone they want.

Best regards
Jakub