All Components


    Donut Charts / Donut labels

    Labels Configuration


    This sample illustrates how to show/hide the labels of the Kendo UI Donut Chart and specify how they are aligned.

    You can do that by getting a reference to the chart client-object via:

    var chart = $("#chart").data("kendoChart")

    which will allow you to set and configure its series collection and attributes:

    var pieSeries = chart.options.series[0];
    pieSeries.labels.visible = true|false; // If set to true the chart will display the series labels.
    pieSeries.labels.align = "circle"; // "circle" - the labels are positioned in circle around the chart.

    You can find a complete list of the series attributes in the API documentation.

    HTML5/JavaScript source

    Also available for:

    API Reference
    • donut-labels.html
    • Widget configuration

    Support & learning resources

    Donut Charts for other technologies