This is a migrated thread and some comments may be shown as answers.

Donut Chart with center label

2 Answers 275 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Jorge asked on 29 Oct 2015, 05:56 PM


 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 Answers, 1 is accepted

Sort by
Danail Vasilev
Telerik team
answered on 30 Oct 2015, 11:58 AM

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
Top achievements
Rank 1
answered on 30 Oct 2015, 10:43 PM
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
Chart (HTML5)
Asked by
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Top achievements
Rank 1
Share this question