Resizing Donut Chart

4 posts, 0 answers
  1. Steve
    Steve avatar
    2 posts
    Member since:
    Feb 2016

    Posted 23 Mar Link to this post

    We are using the example chart at the moment trying to resize the donut,  The doc say use seriesdefault.holeSize  holeSize does not exists

    The difference between the example code and others is

     

    Example code

    .SeriesDefaults(series => series.Donut()
    .StartAngle(150)

     

    Telerik Support code

    seriesDefaults: {
         holeSize: 20,

     

    so using the example code below what's the way to resize the chart,  also, Id like to know how to add values to the donut to show what value the % come from.

     

    Thanks in advance

    Example code used

    <div class="demo-section k-content wide">
    @(Html.Kendo().Chart()
    .Name("EventPriorityGraph")
    .ChartArea(chartArea => chartArea
    .Background("transparent")
    // .Width(200)
    // .Height(200)
    )
    .Title(title => title
    .Text("Events by priority")
    .Position(ChartTitlePosition.Bottom)
    )
    .Legend(legend => legend
    .Visible(false)
    )
    .SeriesDefaults(series => series.Donut()
    .StartAngle(150)

    )
    .Series(series =>
    {
    series.Donut(new dynamic[] {
    new {category = "P1",value = 0,color = "#ADC9D5"},
    new {category = "P2",value = 0,color = "#5FCBFF"},
    new {category = "P3",value = 0,color = "#49B4E7"},
    new {category = "P4",value = 0,color = "#00689B"},
    new {category = "Unknown",value = 100,color = "#002D42"},
    })
    .Name("2014");

    series.Donut(new dynamic[] {
    new {category = "P1",value = 1.72,color = "#ADC9D5"},
    new {category = "P2",value = 3.41,color = "#5FCBFF"},
    new {category = "P3",value = 17.45,color = "#49B4E7"},
    new {category = "P4",value = 73.56,color = "#00689B"},
    new {category = "Unknown",value = 3.83,color = "#002D42"},
    })
    .Name("2015");
    series.Donut(new dynamic[] {
    new {category = "P1",value = 1.61,color = "#ADC9D5"},
    new {category = "P2",value = 2.51,color = "#5FCBFF"},
    new {category = "P3",value = 16.247,color = "#49B4E7"},
    new {category = "P4",value = 75.35,color = "#00689B"},
    new {category = "Unknown",value = 4.26,color = "#002D42"},
    })
    .Name("2016")
    .Labels(labels => labels
    .Visible(true)
    .Position(ChartPieLabelsPosition.OutsideEnd)
    .Template("#= category #: \n #= value#%")
    .Background("transparent")
    );
    })
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Template("#= category # (#= series.name #): #= value #%")
    )
    )
    </div>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Mar Link to this post

    Hi Steve,

    Thank you for pointed that the seriesDefaults.holeSize option is missing in the Chart MVC wrapper - I forwarded it to the developers for fixing. Meanwhile, you could set the holeSize in the series configuration:
    //....
    .Series(series => {
       //....
    })
    .HoleSize(100)
    .Name("2014");

    Regarding your other question - "...Id like to know how to add values to the donut to show what value the % come from....", I am not quite sure if I understand it correctly. Could you please elaborate a bit more?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    2 posts
    Member since:
    Feb 2016

    Posted 28 Mar in reply to Iliana Nikolova Link to this post

    Hi, Thanks, I have tried that and I receive the error
    ChartPieSeriesBuilder <object> does not contain the definition for HOLESIZE accepting the first argument of type ChartPieSeriesBuilder <object>

    I get this error in all places I try to add holesize,  including the position you told me.

    Thanks

     

    Cameron

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Mar Link to this post

    Hi Cameron,

    I am not quite sure why this option does not work in your project. Could you please provide an isolated runnable example which I could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready