Inconsistent Data Points in HighCharts Scatter Plot with ReactJS

Question

Previousy, I was using line charts. but now, I want multiple data points on same X-Axis with tooltip, and according to HighCharts behaviour -

"In a line chart, by default, Highcharts will display the tooltip for the last data point when multiple data points share the same x-axis value."

In order to achieve this behaviour, I have converted my chart to 'Scatter'.

=> I have a scatter plot (data points connected with a series line). Page load consistently plots correctly, but updating with new series data brings unexpected data points in the graph.

Expected behaviour : Plot consistently when updating with new series data

Actual behaviour : Inconsistent data points show up depending on previous series data.

I have researched about this and found this links which shows this was the issue with HighCharts and a way to resolve the same:

But, I am not able to figured out how can i solve this with ReactJS. Here is my code: https://stackblitz.com/edit/react-9wsnd9?file=index.js

ppotaczek · Accepted Answer · 2023-09-18 09:25:40Z

2

To use the suggested workaround with React, you need to get the chart instance and call setData on series. For example:

  useEffect(() => {
    const chart = chartRef.current.chart;
    if (chart) {
      chart.series[0].setData(mainData, true, true, false);
    }
  }, [data]);

Live demo: https://stackblitz.com/edit/react-jiva32?file=index.js

Docs: https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

answered Sep 18, 2023 at 9:25

ppotaczek

39.3k2 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maulik Bhalani Over a year ago

Thanks, It worked. Marking answer as accepted.

Collectives™ on Stack Overflow

Inconsistent Data Points in HighCharts Scatter Plot with ReactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related