Inconsistent Data Points in HighCharts Scatter Plot with ReactJS

[maulikbhalani]

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:

1) https://github.com/highcharts/highcharts/issues/9184

2) https://github.com/highcharts/highcharts/issues/9037

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

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

The workaround from GH issue is still valid. You need to use Highcharts series.setData method with updatePoints flag set to false.

In your demo, I extracted the part of code responsible for formatting the data to formatData function. Than on refresh button click I format new data using formatData and use series.setData to update the series. Now, everything seems to be working correctly.

Demo: https://stackblitz.com/edit/react-8gevn4?file=index.js

Feel free to ask any further questions!
Kind regards
Jakub

[maulikbhalani]

Thank you so much for your help. Problem solved.