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

Highcharts map with a donut/column chart beside it.

Hello,

I want to know if there is an option in Highcharts map that I could have a donut/column chart next to a map. So I could see the changes on the donut chart by clicking on different states on the map?

Thank you so much in advance
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts map with a donut/column chart beside it.

Hello Strgt,

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

Something like that is possible and you can do it in a few ways, but in general you want to use point click event and update donut chart when map is being clicked. I have created a demo like this, click on highlighted countries and watch donut chart.
Demo: https://jsfiddle.net/BlackLabel/gweu6h8t/
API reference: https://api.highcharts.com/class-refere ... s#addPoint

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
Strgt
Posts: 37
Joined: Fri Dec 03, 2021 2:11 pm

Re: Highcharts map with a donut/column chart beside it.

Thank you so much. It was really helpful.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts map with a donut/column chart beside it.

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
Strgt
Posts: 37
Joined: Fri Dec 03, 2021 2:11 pm

Re: Highcharts map with a donut/column chart beside it.

Hello,

Thanks again for your previous answer. Now I have a map that shows the information of each province on a donut chart.
But for the total information of the country, I need a small map (of the whole country without provinces) that when I click on it, the total values are displayed on the donut chart.
Is it possible to have this small map next to the main map with Highcharts?
I have attached a photo to better understand what I mean.

Thank you in advance.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts map with a donut/column chart beside it.

Hi Strgt,

I can't see the photo that you attached, I think something could have gone wrong. Could you try to send it again?

When it comes to your question, you can create a new chart with a small map and update donut chart on click in the same way as before.

Regards!
Mateusz Bernacik
Highcharts Developer
Strgt
Posts: 37
Joined: Fri Dec 03, 2021 2:11 pm

Re: Highcharts map with a donut/column chart beside it.

Hello,

I have attached the photo again. I actually want this small map to work like a button (to change the donut values of the chart by clicking on it.).

Sincerely,
small map
small map
Screenshot (24).png (33.29 KiB) Viewed 1132 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts map with a donut/column chart beside it.

Hi Strgt,

I think easiest way to achieve something like that is to wrap your map with a div container and create another map inside with absolute position.
Demo: https://jsfiddle.net/BlackLabel/ecpw98hg/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”