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

Text in the middle of the donut Htmlchart

1 Answer 352 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Andrew asked on 14 Aug 2019, 04:06 PM

Is there a property or a telerik way of putting a text or value in the middle of the donut chart to show total or something.

Please see image as example.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 15 Aug 2019, 07:58 AM

Hi Andrew,

You can show a label in the middle of a Donut chart by implementing the approach from the following code library:


For example, you can modify the sample above in a similar way:

    <style type="text/css">
        .insideLabel {
            position: absolute;
            color: black;
            font-weight: bold;
            font-size: 40px;
            top: 110px;
            left: 100px;

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
            function updateDonutAndLabel() {
                //set random value to the chart
                var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget();
                var sum = 0;

			    var series = kendoWidget.options.series[0].data;
			    for (var i = 0; i < series.length; i++) {
			        sum += series[i].value;

			    //Set hole size and repaint the chart
			    kendoWidget.options.series[0].holeSize = 60;

			    //set the current value to the label
			    var label = $get("<%=Label1.ClientID %>");
                label.textContent = sum;

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="250px" Height="250px">
                            <telerik:PieSeriesItem Y="20" Name="Item1"/>
                            <telerik:PieSeriesItem Y="30" Name="Item2"/>
                            <telerik:PieSeriesItem Y="41" Name="Item2"/>
                            <telerik:PieSeriesItem Y="58" Name="Item2"/>
                        <Appearance Overlay-Gradient="None"></Appearance>
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                <Appearance Visible="false"></Appearance>
        <asp:Label ID="Label1" Text="" runat="server" CssClass="insideLabel" />
        <br />
        <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="updateDonutAndLabel" Text="Update Donut and Label" />


Regards, Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Chart (HTML5)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question