Donut Chart with center label

3 posts, 1 answers
  1. Jorge
    Jorge avatar
    2 posts
    Member since:
    Jan 2015

    Posted 29 Oct 2015 Link to this post


     Is it possible to set the greater value on the center of the donut? The goal is to reach something like picture attached. Thanks in advance for any help

  2. Answer
    Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 30 Oct 2015 Link to this post


    The desired functionality is not supported by the donut chart out of the box. You can, however, create a label that has an absolute position over the donut and set its value according to the target donut value. For example:

    <head runat="server">
        <style type="text/css">
            .Label1 {
                position: absolute;
                color: white;
                font-weight: bold;
                font-size: 40px;
                top: 110px;
                left: 93px;
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad() {
                function updateDonutAndLabel() {
                    //generate random value
                    var randNum = function (min, max) {
                        return Math.floor(Math.random() * (max - min + 1)) + min;
                    var currValue = randNum(0, 33);
                    //set random value to the chart
                    var chart = $find('<%=RadHtmlChart1.ClientID%>')
                    chart._chartObject.options.series[0].data[0].value = currValue;
                    chart._chartObject.options.series[0].data[1].value = 100 - currValue;
                    //Set hole size and remove gradient
                    chart._chartObject.options.series[0].holeSize = 60;
                    chart._chartObject.options.series[0].overlay = { gradient: "none" };
                    //set the current value to the label
                    var label = $get("<%=Label1.ClientID %>");
                    label.textContent = currValue + " %";
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="250px" Height="250px">
                <Appearance FillStyle-BackgroundColor="#C87545"></Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                                <telerik:PieSeriesItem Y="0" Name="Item1" BackgroundColor="#FFC700" />
                                <telerik:PieSeriesItem Y="0" Name="Item2" BackgroundColor="#6E443D" />
                    <Appearance Visible="false"></Appearance>
            <asp:Label ID="Label1" Text="10" runat="server" CssClass="Label1" />
            <br />
            <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="updateDonutAndLabel" Text="Update Donut and Label" />

    I have also created a code library with this example here -

    Danail Vasilev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jorge
    Jorge avatar
    2 posts
    Member since:
    Jan 2015

    Posted 30 Oct 2015 in reply to Danail Vasilev Link to this post

    Thanks a lot. I'll try it right away! It would be great if you consider something like this for future releases, that behavior is kind of common in some graph components (javascript the most of them), but would be really great to have it on telerik. Thanks again
Back to Top