New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Donut Chart

  • Demo Configurator
Margins:

The demo shows how you can use the Donut type of RadHtmlChart to present each piece of data as part of a whole. Use the configurator to see how setting each of the properties affects the control.

The labels of Donut chart can be positioned through the LabelsAppearance.Position property of the series since Q1 2014:

  • Center — the labels are positioned at the center of the donut.
  • InsideEnd — the labels are positioned inside, near the end of the donut.
  • OutsideEnd — the labels are positioned outside, near the end of the donut.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.DonutChart.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true" Skin="Silk">
                <ChartTitle Text="OS Usage Statistics for December 2012">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Position="Right" Visible="true">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:DonutSeries StartAngle="90" HoleSize="65">
                            <LabelsAppearance Position="Center" DataFormatString="{0} %" Visible="true"></LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PieSeriesItem BackgroundColor="#00adcc" Exploded="false" Name="Win7" Y="55.6"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#888888" Exploded="false" Name="NT" Y="1.8"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#777777" Exploded="false" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
                                <telerik:PieSeriesItem BackgroundColor="#444444" Exploded="false" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
                            </SeriesItems>
                        </telerik:DonutSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
    </div>

    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="DonutChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow" Title="Margins:">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="marginTop" runat="server" Label="Top" Value="0" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="marginBottom" runat="server" Label="Bottom" Value="0" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="marginLeft" runat="server" Label="Left" Value="0" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="marginRight" runat="server" Label="Right" Value="0" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="comboLabelsPositionChooser" Label="Label Position" AutoPostBack="true">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="StartingAngleValue" runat="server" Label="Start Angle" Value="90" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="HoleSizeValue" runat="server" Label="Hole Size" Value="65" MaxLength="4" AutoPostBack="true" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="ItemExploded" Text="Item is Exploded" runat="server" AutoPostBack="true"></asp:CheckBox></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance