daver
Posts: 4
Joined: Wed Jun 13, 2018 2:32 pm

Updating multiple charts on page with filter selection

I'm new to Highcharts and I'm investigating how to accomplish the ability to update multiple charts on page at once using a filter. For example, my page contains a bar chart, line chart and pie chart. I want to display one filter legend with a list of demographics (ex: ages 18-30, 30-40, 40-50, etc.). When I click on one of the filter options I want all 3 charts to update at once. Is this possible using Highcharts?

I apologize if this has been covered but I couldn't seem to pull anything back using search.
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: Updating multiple charts on page with filter selection

hi daver,

Welcome on forum and appreciate you contacting us.
You can achieve the effect you need using global Highcharts.charts array, which contains all created charts and iterate on them and use Chart.update() function. I prepared an example of how to implement it, so please take a look on it.

Live example: https://jsfiddle.net/wcup60fg/

API Reference:
https://api.highcharts.com/class-refere ... ml#.charts
https://api.highcharts.com/class-refere ... art#update

Bets regards!
Daniel Studencki,
Highcharts Developer
daver
Posts: 4
Joined: Wed Jun 13, 2018 2:32 pm

Re: Updating multiple charts on page with filter selection

Thanks for the reply Daniel. If I wanted to get an entirely different data source (rather than adding in your example), how would I accomplish this in the button click?
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: Updating multiple charts on page with filter selection

hi daver,

You would like to change whole data on all charts by one button click, am I right?

Best regards!
Daniel Studencki,
Highcharts Developer
daver
Posts: 4
Joined: Wed Jun 13, 2018 2:32 pm

Re: Updating multiple charts on page with filter selection

That's correct. One (or many) buttons that change the data across all the charts at once.
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: Updating multiple charts on page with filter selection

hi daver,

In this case you can also use Chart.update() function. Here is the example: https://jsfiddle.net/m9n0ad3q/
If you have more questions, please let me know.

Best regards!
Daniel Studencki,
Highcharts Developer
daver
Posts: 4
Joined: Wed Jun 13, 2018 2:32 pm

Re: Updating multiple charts on page with filter selection

Thanks Daniel. I appreciate it.
sks27
Posts: 7
Joined: Mon Nov 21, 2016 2:23 pm

Re: Updating multiple charts on page with filter selection

Useful. Thanks. I was wondering how I would go about updating the data for multiple charts from different CSVs using the new "live data" feature on clicking a button or changing a drop-down value.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Updating multiple charts on page with filter selection

Hi sks27,

I've posted an answer to your question in a different thread. Please follow it from now:
https://forum.highcharts.com/post142670 ... 9d#p142670

Kind regards.
Wojciech Chmiel
Highcharts Developer
sks27
Posts: 7
Joined: Mon Nov 21, 2016 2:23 pm

Re: Updating multiple charts on page with filter selection

Thank you so much!
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Updating multiple charts on page with filter selection

You're welcome :wink:
Wojciech Chmiel
Highcharts Developer
floriandierickx
Posts: 1
Joined: Thu May 14, 2020 12:33 pm

Re: Updating multiple charts on page with filter selection

Hello, I am also interested in this issue. I wanted to have a look at the different thread for more information (post142670.html?sid=16f4bc0afa64c662b5f ... 9d#p142670), but the link appears to be broken. Any pointers on where I can find more information? I am specifically interested in using time-series data (bar graph data for every year), the option to select a year (preferably through dropdown or through bar graph), and then live updating a sunburst graph with the data for this particular year.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Updating multiple charts on page with filter selection

Hi floriandierickx!

Do you want to achieve something like this topic?
viewtopic.php?t=40997#p142670

Live demo:
https://jsfiddle.net/tdob14w2

Let me know if that's what you're looking for.
Kindly regards.
Sebastian Hajdus
Highcharts Developer
Habib2015
Posts: 2
Joined: Mon Oct 30, 2023 9:27 am

Re: Updating multiple charts on page with filter selection

Hello, I am also interested in this issue.But I wanted update only pi chart
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Updating multiple charts on page with filter selection

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

Below I'm sending you a demo with only pie charts, but I'm not sure if you want just one simple pie or multiple pies, if you need further help, please let me know what exactly do you want to achieve with the pie series and I will be able to get a closer look and help you with your problem.

Demo: https://jsfiddle.net/BlackLabel/ovd3Lq7u/

Feel free to ask any further questions!
Kind regards
Jakub

Return to “Highcharts Usage”