Pie chart inside a donut chart

8 posts, 0 answers
  1. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 13 Apr 2015 Link to this post

    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

  2. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 13 Apr 2015 in reply to Michelle Link to this post

    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).

  3. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 13 Apr 2015 in reply to Michelle Link to this post

    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.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 15 Apr 2015 in reply to Iliana Nikolova Link to this post

    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?
  6. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 15 Apr 2015 in reply to Michelle Link to this post

    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.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 17 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 20 Apr 2015 in reply to Iliana Nikolova Link to this post

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