CODEWITHSUNDEEP
reactjshighcharts
jasonB
jasonB

Reputation: 45

Highchart doesn't display selected data properly

This is a reproduce code: https://codesandbox.io/s/youthful-banzai-55j8b?file=/src/LineGraph.js

When I select 210C key in Aggregated Key drop down list, the chart display green line.

enter image description here

Then, I select 2104 key in Graph Key drop down list, the graph displays orange line.But the 210C line is disappeard and when I hover on 210C-aggregated it shows 2104 line.

enter image description here

Aggregated Key: show the accumulative data by time

Upvotes: 0

Views: 202

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

After digging I found out that the problem is with re-rendering updated props and Highcharts wrapper has an issue with it.

Using the immutable flag should solve the issue:

return <HighchartsReact highcharts={Highcharts} options={options} immutable={true}/>;

Demo: https://codesandbox.io/s/xenodochial-shannon-txyum

Simplified version: https://stackblitz.com/edit/react-ywda6g?file=LineGraph.js

API: https://github.com/highcharts/highcharts-react#options-details

You can also try to combine with the OneToOne flag.

Upvotes: 1

Related Questions