Pie chart inside a donut chart

[Michelle]

I have a donut chart with 2 series.  Is it possible to set the innermost series of the donut chart to be a pie chart instead?  As in, I want the middle of the donut chart to be filled in.  When I set the first series to have type: 'pie' and the second series to have type: 'donut', only the first series is rendered. 

Thanks,

Michelle

[Michelle]

I just found some advice on these forums suggesting to set the series holeSize to zero.  When I do that, the inside donut indeed becomes filled in, but the gradient colors still show the chart as a "donut" with a lighter ring of shading in the middle of the chart.

 If that is the only way, I can live with the weird gradient, but how do you make one chart thicker than the other?  After setting the holeSize = 0, the outer ring got thicker to match the inner "ring" (i.e. circle).

[Michelle]

I found another property in the series configuration called "size", but that is in absolute pixel amounts.  I need the chart to take up as much space as available, so I would need to set the size as percentages, rather than as pixels.

[Iliana Dyankova]

Hi Michelle,

In order to achieve the expected result I would suggest the following:
- Use the series.overlay.gradient option to change the gradient;
- Set series.margin to the inner series.

For your convenience I prepared a basic example which demonstrates the suggested approach in action. 

Regards,
Iliana Nikolova
Telerik

 

 

[Michelle]

Thanks for the advice, Iliana.  The gradient worked perfectly, but the margin has the undesired effect of adding whitespace between the outer ring and the inside pie chart.  Is there something I can do to make the pie fill up the remaining white space inside the outer ring?

[Michelle]

I also would prefer not to set the size on the outer ring to make it smaller.  I need the outer ring to be always 30% and the pie to be 70% width/thickness, so that the chart will resize proportionally when the charting area increases.

[Iliana Dyankova]

Hi Michelle,

The inner series will always fill up the remaining space inside the outer ring, however if the outer series doesn't have set size both series will be equally wide. Unfortunately setting the width in percentages is not supported. What I would suggest as a workaround is to dynamically change the outer series size (via the chart.options):  

// get reference to the chart widget
var chart = $("#chart").data("kendoChart");
// set size to the first series
chart.options.series[0].size = 40;
// redraw the chart
chart.redraw();

Regards,
Iliana Nikolova
Telerik

 

 

[Michelle]

Thanks Iliana.  I would prefer not to dynamically control UI appearance with javascript.  I will just leave the first series at a static size.