After first load of Highcharts, how to properly swap different series in/out using React and properly render Highchart? - reactjs

Question

Currently, I am using useState to swap out the series with a different kind of data set. The goal is to have the user click a button to show/swap the kind of data they want to see. I have attached a codesandbox for demo purposes (and it also shows one of the bugs). When I do it this way (as shown in this sandbox), 2 bugs occur.
Firstly, after swapping the data set, the legend shows series names properly (e.g. per the sandbox, will swap to a single series name as there is technically only 1 series to show along with its corresponding arearange). But after swapping back to the original, the legend only shows one name (of the two available series). However, the line series on the graph itself still shows the 2 lines properly despite the legend only have 1 of the line's names. This behavior shows with more than two series as well.
Secondly, I can't seem to reproduce it in the code sandbox. But essentially with a similar behavior as the first bug I explained earlier, the line series/arearange series will sometimes change. Meaning that when I flip between the data, the line series sometimes becomes an arearange (not intended) and vice versa.
The actual goal of my code is that the chart will get the data as a prop and then I would manipulate this data and set it to state (e.g. filtering an array for specific series sets). I'm not sure why this is not working as intended and any help is much appreciated :).
Here's an example code (same as the sandbox):
import Highcharts, { Options } from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsExport from "highcharts/modules/exporting";
import HighchartsMore from "highcharts/highcharts-more";
import * as React from "react";
import { LineData, LineDataWithRange } from "./mocks/LineChartMockData";
if (typeof Highcharts === "object") {
HighchartsExport(Highcharts);
HighchartsMore(Highcharts);
}
export const Example: React.FC = () => {
const [chartData, setChartData] = React.useState(LineData);
const handleChangeToDataRange = () => {
setChartData(LineDataWithRange);
};
const handleChangeToJustData = () => {
setChartData(LineData);
};
const chartOptions: Options = {
chart: {
type: "line"
},
title: {
text: "Highcharts/React/Typescript"
},
series: chartData
};
return (
<>
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
<button onClick={handleChangeToDataRange}>
Change to Line Data with Range
</button>
<button onClick={handleChangeToJustData}>Change to Just Line Data</button>
</>
);
};

Answer 1

That's because the wrapper uses chart.update to react to a component update. Series are updated and their options are merged. Example in pure JS: http://jsfiddle.net/gk06rxqw/
As a solution enable immutable property:
<HighchartsReact immutable={true} highcharts={Highcharts} options={chartOptions} />
Or overwrite all of the used series options:
export const LineData = [
{...},
{
...,
linkedTo: null
}
];
export const LineDataWithRange = [
{...},
{
...,
linkedTo: "series3"
}
];
Live example: https://codesandbox.io/s/sample-highchart-forke-o2byno
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Docs: https://www.npmjs.com/package/highcharts-react-official#options-details