I have two teams, team1 and team2, each containing plot data in the structure mentioned in the link below.
Here is my code: https://codesandbox.io/p/sandbox/react-counter-functional-component-forked-3pm6x4
I have created a scatter chart where both team checkboxes are initially checked by default, and everything seems fine.
However, when I uncheck either of the checkboxes, the other plot is also affected and changes its shape. Surprisingly, this only happens with the scatter chart. If I switch to a line chart, everything works, but then I can't show the tooltip at the same location for different values.
When a checkbox is checked or unchecked, the other plot should not be affected and should remain unchanged.
How can I achieve this? Please modify the code and help me with this issue. Alternatively, if there is a way to show tooltips at all locations when the axis has multiple values, I am okay to go with the chart type line instead of scatter.
Thank you.
It's a known bug in Highcharts library. You can read more about this bug here: https://github.com/highcharts/highcharts/issues/18400
The current solution to this problem is to add an id parameter to all your points. Then the lines are not redrawn each time you update the series. Here's the demo: https://codesandbox.io/p/sandbox/react-counter-functional-component-forked-y2whfq?file=%2Fsrc%2FCharts.js