ishanuf
Posts: 4
Joined: Mon Dec 30, 2019 9:08 am

Add multiple circular charts inside container

I want to show multiple circular progress chart inside a same container. Also these content need to be able to download as a single image. End result should be like image in below

Image
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Add multiple circular charts inside container

Hi,

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

Here you have an example of this: https://jsfiddle.net/BlackLabel/84k6hmqy
You need to define multiple panes and yAxes to display multiple plots in the same container.

Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ishanuf
Posts: 4
Joined: Mon Dec 30, 2019 9:08 am

Re: Add multiple circular charts inside container

Thanks. Is there a way to add label below each circle?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Add multiple circular charts inside container

Yes, you can, for example, use this feature (title for each pie) https://jsfiddle.net/BlackLabel/7cpbwnvg

I changed it to work with solidgauge: https://jsfiddle.net/BlackLabel/c0Lsa258 but you need to adjust position a little.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ishanuf
Posts: 4
Joined: Mon Dec 30, 2019 9:08 am

Re: Add multiple circular charts inside container

Thanks is there a way to show like a grid. I mean if we need to show another 4 below the other circles.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Add multiple circular charts inside container

Yes, the same as in the above jsFiddle with pies - you need to define center property for each gauge pane: https://api.highcharts.com/highcharts/pane.center
Rafal Sebestjanski,
Highcharts Team Lead
mandro
Posts: 4
Joined: Thu Jan 13, 2022 5:25 am

Re: Add multiple circular charts inside container

I changed it to work with solidgauge: https://jsfiddle.net/BlackLabel/c0Lsa258 but you need to adjust position a little.
Hello! Thanks for your solidgauge example, but how do I prototype this function if I'm using ReactTS?
When I try to reproduce your example, I get an error that seriesTypes does not exist in Highcharts type, there is only seriesType, but there is no solidgauge in it.
Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add multiple circular charts inside container

Hello Mandro,

Thanks for contacting us with your question!

This is because you are wrapping code that is not available in a public API. You can set the Highcharts object to the type any to avoid getting an error.

Demo: https://codesandbox.io/s/highcharts-rea ... /index.tsx

Or if you want you can extend Highcharts types: https://www.highcharts.com/docs/advance ... typescript

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”