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

Text in the middle of the donut Htmlchart

1 Answer 335 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Andrew
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
0
Vessy
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:

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.
Tags
Chart (HTML5)
Asked by
Andrew
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or