rupak-nm
Posts: 4
Joined: Thu May 12, 2022 10:55 am

Chart data not updating using state in react highcharts when navigator is enabled

I am using stockchart with `highcharts-react-official`.
I am setting the chart data through state and using useEffect to update that state.
The chart is 'areaspline' type with its x-axis type 'logarithmic' ,and it renders fine when navigator is disabled .

But whenever I enable navigator from chart options, all the chart points gets squeezed and the x-axis labels are all 0's.
But once I nudge the navigator handles a little, the chart again re-renders fine.
Also the x-axis labels in the navigator are also shown different.

I don't know why I'm getting this behavior.
I'm new to highcharts so if anyone can help me here, it would be great.

Stackblitz Link: https://stackblitz.com/edit/nextjs-seep ... /Chart.jsx
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

Hello rupak-nm,
Welcome to our forum and thanks for contacting us with your question!

When you updated only data using setData the chart has not been redrawn again. A good practice is to keep all chart options in the state. When setState is called, the options are overwritten and only the new ones are passed to the chart.update method. You can see it in the demo below.

Demo: https://stackblitz.com/edit/nextjs-izfmeu
Documentation: https://github.com/highcharts/highchart ... -to-update
https://github.com/highcharts/highcharts-react

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer
rupak-nm
Posts: 4
Joined: Thu May 12, 2022 10:55 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

Thanks hubert.k for the response.
The chart updating works correctly now.

But I noticed that the plot type is different in the demo you provided.
The chart options has 'logarithmic' type in x-axis but still the chart is of 'linear' type.

Also the labels in x-axis are different and some of the points seem to be missing in the chart.

Is there anything that needs to be done besides updating the chartoptions from useEffect?
rupak-nm
Posts: 4
Joined: Thu May 12, 2022 10:55 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

Sorry I need to make a new comment here because I couldn't add on previous comment.

I noticed if we add `xaxis: {type: "logarithmic"}` in the setChartoptions, we face the same issue as earlier.
I feel like that has something to do with "logarithmic" x-axis chart types.

I hope this is solvable.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

Hi rupak-nm!

I apologize I didn't notice it earlier. In Highstock only datetime xAxis type exists. There is no logarithmic type of xAxis in Highstock. In Highcharts you have linear/datetime/logarithmic/categorized types. The navigator also have only datetime xAxis type. This is why there are errors with updating the chart. There is no workaround for this. yAxis can be one of linear, logarithmic, datetime or category, so you can use the logarithmic type on yAxis on stockChart and navigator, like in the demo. If you want to keep the xAxis.type: 'logarithmic' you can change the constructor to chart, but you have to disable navigator, because of different types of axis.

Demo: https://stackblitz.com/edit/nextjs-yudvfq

Best regards!
Hubert Kozik
Highcharts Developer
rupak-nm
Posts: 4
Joined: Thu May 12, 2022 10:55 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

Thanks @hubert.k for clearing the confusion.

I guess I will be going with highcharts instead of highstocks for now.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Chart data not updating using state in react highcharts when navigator is enabled

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”