Kendo UI Donut Chart - Labels with 0 shown in middle

2 posts, 0 answers
  1. Minu
    Minu avatar
    3 posts
    Member since:
    Dec 2015

    Posted 01 Jul Link to this post

    Hi,

     

    I am trying to load a kendo UI Donut chart.

    The code is given below:

    function createChart(){
                    $("#chart").kendoChart({
                        title: {
                            position: "bottom",
                            text: "ABC"
                        },
                        legend: {
                            visible: true

                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "donut",
                            startAngle: 150
                            
                        },
                        series: [
                            {
                                name: "Current Year: " + "<%= currentAcdYearName %>",
                                data: [
                                    {
                                        category: "Tenure-Track",
                                        value: "10",
                                        color: "#0de219"
                                    }, {
                                        category: "Perm Budget NTT",
                                        value: "20",
                                        color: "#90cc38"
                                    }, {
                                        category: "Soft Budget NTT",
                                        value: "45",
                                        color: "#568c35"
                                    }, {
                                        category: "Students",
                                        value: "76",
                                        color: "#606634"
                                    }, {
                                        category: "TBD",
                                        value: "65",
                                        color: "#304d38"
                                    }
                                ],
                                labels: {
                                    visible: true,
                                    background: "transparent",
                                    position: "outsideEnd",
                                    template: "#= category #: \n #=kendo.format(\'{0:P0}\', percentage)# "
                                }
                            }
                        ],
                        tooltip: {
                            visible: true,
                            //template: '#= category # - #= kendo.toString(percentage,\"#\\%\")#'
                            //template: "#= category # (#= series.name #): #= value #%"
                            template: "#= category # (#= series.name #):  \n #=kendo.format(\'{0:P0}\', percentage)# "

                        }

                    });
                }

     

    Once the values of any of the category becomes 0,eg., 

    category: "TBD",
    value: "65",
    color: "#304d38"

    If the value is 0 instead of 65, the label goes inside the center circle.

    Could you please let me know how to retain the label on the donut without making it come inside the center of the donut.

     

    Thanks,

    minu

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 Jul Link to this post

    Hi Minu,

    This issue is caused by you are using strings in the series while the chart expects numeric values (documentation link). For your convenience here is the modified example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top