Previously, I used line charts. However, my current requirement is to display multiple data points on the same X-Axis with tooltips, following HighCharts' default behavior, which is as follows:
=> "In a line chart, Highcharts will display the tooltip for the last data point when multiple data points share the same x-axis value."
To achieve this behavior, I have converted my chart to a 'Scatter' plot.
Now, I have a scatter plot where data points are connected with a series line. The initial page load consistently displays the plot correctly. However, when I update it with new series data, I encounter unexpected data points in the graph.
=> Expected Behavior:
The plot should consistently display when updating with new series data.
=> Actual Behavior:
Inconsistent data points appear depending on the previous series data.
I conducted some research and found the following links that indicate this issue with HighCharts and provide potential solutions:
However, I'm struggling to figure out how to implement a solution using ReactJS. Here is my code: https://stackblitz.com/edit/react-9wsnd9?file=index.js