Back to Devexpress

Pie Chart

aspnet-15893-components-chart-control-concepts-creating-charts-2d-chart-types-pie-chart.md

latest8.8 KB
Original Source

Pie Chart

  • May 27, 2022
  • 4 minutes to read

Short Description

The Pie Chart is represented by the PieSeriesView object, which belongs to Pie, Doughnut and Funnel Series Views. This view allows you to compare the percentage values of different point arguments in the same series, and to illustrate these values as easy-to-understand pie slices.

A Pie chart is shown in the image below. Note that if a chart contains multiple series of the PieSeriesView type, all series are displayed in the same diagram based on the SimpleDiagram.Dimension and SimpleDiagram.LayoutDirection property values.

Chart Type Characteristics

The table below lists the main characteristics of this chart type.

FeatureValue
Series View typePieSeriesView
Diagram type2D-SimpleDiagram
Number of arguments per series point1
Number of values per series point1

Note

For information on which chart types can be combined with the Pie Chart , refer to the following help topic: Combining Different Series Views.

Example

The following example creates a WebChartControl with a series of the PieSeriesView type and adds this chart to a form at runtime.

Before proceeding with this example, create a Web Forms Application in Visual Studio, and add all required assemblies to the project’s References list.

Then, add the following code to the page’s Load event handler:

csharp
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;
using System;
using System.Collections.Generic;

namespace PieChartSample {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            // Create a WebChartControl instance:
            WebChartControl chart = new WebChartControl();
            chart.RenderFormat = RenderFormat.Svg;
            chart.Height = 450;
            chart.Width = 800;

            // Specify the chart palette:
            chart.PaletteName = Palettes.Slipstream.Name;

            // Create a Pie series and bind it to data:
            Series series = new Series("Pie", ViewType.Pie);
            series.DataSource = DataPoint.GetDataPoints();
            series.SetDataMembers("Argument", "Value");

            // Format series labels:
            series.Label.TextPattern = "{VP:p0} ({V:.##}M km²)";

            // Format series legend items:
            series.LegendTextPattern = "{A}";

            // Adjust series label position:
            ((PieSeriesLabel)series.Label).Position = PieSeriesLabelPosition.TwoColumns;

            // Resolve label overlaps:
            ((PieSeriesLabel)series.Label).ResolveOverlappingMode = ResolveOverlappingMode.Default;

            // Access series view options:
            PieSeriesView seriesView = (PieSeriesView)series.View;

            // Specify a data filter to explode points:
            seriesView.ExplodedPointsFilters.Add(new SeriesPointFilter(SeriesPointKey.Value_1,
                DataFilterCondition.GreaterThanOrEqual, 9));
            seriesView.ExplodedPointsFilters.Add(new SeriesPointFilter(SeriesPointKey.Argument,
                DataFilterCondition.NotEqual, "Others"));
            seriesView.ExplodeMode = PieExplodeMode.UseFilters;
            seriesView.ExplodedDistancePercentage = 30;
            seriesView.RuntimeExploding = true;

            chart.Series.Add(series);
            this.Controls.Add(chart);
        }
    }
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }
        public static List<DataPoint> GetDataPoints() {
            return new List<DataPoint> {
                    new DataPoint { Argument = "Russia", Value = 17.0752},
                    new DataPoint { Argument = "Canada", Value = 9.98467},
                    new DataPoint { Argument = "USA", Value = 9.63142},
                    new DataPoint { Argument = "China", Value = 9.59696},
                    new DataPoint { Argument = "Brazil", Value = 8.511965},
                    new DataPoint { Argument = "Australia", Value = 7.68685},
                    new DataPoint { Argument = "India", Value = 3.28759},
                    new DataPoint { Argument = "Others", Value = 81.2}
                };
        }
    }
}
vb
Imports DevExpress.XtraCharts
Imports DevExpress.XtraCharts.Web
Imports System
Imports System.Collections.Generic

Namespace PieChartSample
    Public Partial Class WebForm1
        Inherits Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a WebChartControl instance:
            Dim chart As WebChartControl = New WebChartControl()
            chart.RenderFormat = RenderFormat.Svg
            chart.Height = 450
            chart.Width = 800

            ' Specify the chart palette:
            chart.PaletteName = Palettes.Slipstream.Name

            ' Create a Pie series and bind it to data:
            Dim series As Series = New Series("Pie", ViewType.Pie)
            series.DataSource = DataPoint.GetDataPoints()
            series.SetDataMembers("Argument", "Value")

            ' Format series labels:
            series.Label.TextPattern = "{VP:p0} ({V:.##}M km²)"

            ' Format series legend items:
            series.LegendTextPattern = "{A}"

            ' Adjust series label position:
            CType(series.Label, PieSeriesLabel).Position = PieSeriesLabelPosition.TwoColumns

            ' Resolve label overlaps:
            CType(series.Label, PieSeriesLabel).ResolveOverlappingMode = ResolveOverlappingMode.[Default]

            ' Access series view options:
            Dim seriesView As PieSeriesView = CType(series.View, PieSeriesView)

            ' Specify a data filter to explode points:
            seriesView.ExplodedPointsFilters.Add(New SeriesPointFilter(SeriesPointKey.Value_1, DataFilterCondition.GreaterThanOrEqual, 9))
            seriesView.ExplodedPointsFilters.Add(New SeriesPointFilter(SeriesPointKey.Argument, DataFilterCondition.NotEqual, "Others"))
            seriesView.ExplodeMode = PieExplodeMode.UseFilters
            seriesView.ExplodedDistancePercentage = 30
            seriesView.RuntimeExploding = True

            chart.Series.Add(series)
            Me.Controls.Add(chart)
        End Sub
    End Class
    Public Class DataPoint
        Public Property Argument As String
        Public Property Value As Double
        Public Shared Function GetDataPoints() As List(Of DataPoint)
            Return New List(Of DataPoint) From {
                    New DataPoint With {
                    .Argument = "Russia",
                    .Value = 17.0752
                },
                    New DataPoint With {
                    .Argument = "Canada",
                    .Value = 9.98467
                },
                    New DataPoint With {
                    .Argument = "USA",
                    .Value = 9.63142
                },
                    New DataPoint With {
                    .Argument = "China",
                    .Value = 9.59696
                },
                    New DataPoint With {
                    .Argument = "Brazil",
                    .Value = 8.511965
                },
                    New DataPoint With {
                    .Argument = "Australia",
                    .Value = 7.68685
                },
                    New DataPoint With {
                    .Argument = "India",
                    .Value = 3.28759
                },
                    New DataPoint With {
                    .Argument = "Others",
                    .Value = 81.2
                }
                }
        End Function
    End Class
End Namespace

See Also

Simple Diagram