Text in the middle of the donut Htmlchart

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    10 posts
    Member since:
    Aug 2019

    Posted 14 Aug Link to this post

    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.

     

  2. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 15 Aug Link to this post

    Hi Andrew,

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

    https://www.telerik.com/support/code-library/put-label-in-donut-chart-center

     

    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;
            }
        </style>

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad() {
                    updateDonutAndLabel();
                }
                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;
    			    kendoWidget.redraw();
    
    			    //set the current value to the label
    			    var label = $get("<%=Label1.ClientID %>");
                    label.textContent = sum;
                }
            </script>
        </telerik:RadCodeBlock>

            <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="250px" Height="250px">
                <PlotArea>
                    <Series>
                        <telerik:DonutSeries>
                            <SeriesItems>
                                <telerik:PieSeriesItem Y="20" Name="Item1"/>
                                <telerik:PieSeriesItem Y="30" Name="Item2"/>
                                <telerik:PieSeriesItem Y="41" Name="Item2"/>
                                <telerik:PieSeriesItem Y="58" Name="Item2"/>
                            </SeriesItems>
                            <Appearance Overlay-Gradient="None"></Appearance>
                            <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                        </telerik:DonutSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false"></Appearance>
                </Legend>
            </telerik:RadHtmlChart>
            <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.
Back to Top