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

Pie Chart

  • Demo Configurator
Spin UpSpin Down

The Pie Chart type in the ASP.NET AJAX Chart has a rich functionality for any ASP.NET project. It displays the data as sectors from a circle and is useful in all scenarios when we need to represent data as parts of a whole. Each series in the Pie Chart displays a portion of the data in a two-dimensional circle. Use the rich customization options and animation of the Pie Chart and create your data-driven applications. The labels of Pie 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 pie.
  • InsideEnd — the labels are positioned inside, near the end of the pie.
  • OutsideEnd — the labels are positioned outside, near the end of the pie.

The demo shows a simple example of how a PieSeries looks and works. You can use the configurators to see how setting each of the properties affects the control. The configurators also expose the meaningful properties in the context of a PieSeries.

By default every configuration panel is collapsed, to change a particular setting choose the according category and expand it via the arrow button.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.PieChart.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-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true" Skin="Silk">
            <ChartTitle Text="Browser Usage for October 2021">
                <Appearance Align="Center" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" Visible="true">
                </Appearance>
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:PieSeries StartAngle="90">
                        <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Chrome" Y="64.67"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Internet Explorer"
                                Y="0.61"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Safari" Y="19.06"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Firefox"
                                Y="3.66"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Opera" Y="2.36"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Samsung Internet" Y="2.81"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#222222" Exploded="false" Name="Edge" Y="3.11"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#111111" Exploded="false" Name="Others" Y="3.34"></telerik:PieSeriesItem>
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="PieChart1" 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 ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <qsf:NumericTextBox ID="StartingAngleValue" runat="server" Label="Start Angle" Value="90" MaxLength="4" AutoPostBack="true">
                        <NumberFormat DecimalDigits="0" />
                    </qsf:NumericTextBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <qsf:ComboBox runat="server" ID="comboLabelsPositionChooser" Label="Label Position" AutoPostBack="true">
                    </qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <span class="checkbox">
                        <asp:CheckBox ID="ItemExploded" Text="Item is Exploded" Checked="true" runat="server" AutoPostBack="true"></asp:CheckBox></span>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance