Strgt
Posts: 37
Joined: Fri Dec 03, 2021 2:11 pm

Switch between two charts

Hello,
I have two different line charts with completely different data. For example these two charts:
https://jsfiddle.net/gh/get/library/pur ... line-basic
https://jsfiddle.net/gh/get/library/pur ... ne-symbols
But the x-axis is the same for both charts and represents years.

I want only one of them to be displayed. And by pressing the button, another chart will be displayed and the previous chart will not be displayed. Is it possible?

Thank you so much in advance.
Sincerely yours
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Switch between two charts

Hello,

You can use chart.destroy() method to delete a given chart and create a new one in its place, based on different settings.

Demo: https://jsfiddle.net/BlackLabel/xybe2pnv/
API: https://api.highcharts.com/class-refere ... rt#destroy

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Strgt
Posts: 37
Joined: Fri Dec 03, 2021 2:11 pm

Re: Switch between two charts

Hello,
Thank you very much. It was exactly what I needed. I need to update the x-axis for both graphics. I get an error when I assign xAxis: 0 to the first graphic and xAxis: 1 to the second graphic.
How can I separate the x-axis of two graphics?
chart.xAxis[0].setExtremes(ui.values[0] - 2006, ui.values[1] - 2006)
chart.xAxis[1].setExtremes(ui.values[0] - 2006, ui.values[1] - 2006)

Thank you so much in advance.

Best regards
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Switch between two charts

Hi,

Could you reproduce the issue in an online editor that I could work on? Because I don't quite understand what you mean.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
jacklynch00
Posts: 1
Joined: Tue Nov 28, 2023 9:59 pm

Re: Switch between two charts

Is there an easy way to do this when working with React?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Switch between two charts

Hello There!

If you need to change the chart's options, the easiest way is to update them and redraw the chart to see that change. I don't think it's necessary to destroy the chart first and then create a new, separate instance - it can be less efficient.

In React, you can easily keep the chart's options in your local state. Kindly take a look: https://codesandbox.io/p/sandbox/highch ... 2Fdemo.jsx. As you can see, I've used our highcharts-react-official wrapper that handles the chart's update for you whenever the local state changes.

Of course, if you'd like to follow the solution of destroying the chart, it would be the same, and the only difference would be with referring to the chart's instance that in React should be handled this way: https://github.com/highcharts/highchart ... t-instance.

Let me know if that works for you,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”