shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

partial fill in pie chart

Hi

I have a use-case to create concentric pie charts with partial fill option. So that the chart looks something like this:
temp.png
temp.png (26.57 KiB) Viewed 184 times
I have two questions here. For the inner pie chart (name: Breakdown), how to:
1) show partial fill for the 3 data
2) each sub-section (name- 2022, 2021, 2022) have a separate click handling

Demo: https://jsfiddle.net/dworfz4m/1/

Thanks and Regards,
Shreshtha
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: partial fill in pie chart

Hello Shreshtha,

Thanks for contacting us again!

You can easily split the point's filled color using the linearGradient option as a color property and operate on the stops to choose the split breakpoints. You can read more about possible gradient options here: https://api.highcharts.com/class-refere ... olorObject.

According to your second question, you can use the events.click property, see the docs: https://api.highcharts.com/highcharts/s ... ents.click.

I've updated your example using both solutions, take a look: https://jsfiddle.net/BlackLabel/o0cehrtg/.

Let me know if that was what you were looking for,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”