PieChartView Class

Visualizes data as a pie (circular) chart.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class PieChartView :
    ChartBaseView

Remarks

This view is useful when it is necessary to compare the percentage values of different point arguments in the same series, and to illustrate these values as easy to understand pie slices.

PieChartView‘s properties allow you to add data series to a chart, specify chart elements (legend, series labels, center label and hints), customize chart appearance and configure selection behavior.

Pie Chart Elements

Pie Series

A chart visualizes data series provide. Each series defines data appearance and behavior. The PieChartView can visualize the following series types:

Chart	Series Type
	PieSeries Displays data as circular graphic divided into slices to illustrate numerical proportion.
	DonutSeries Displays data as a pie chart with a hole in center.

Chart

Series Type

Pie

PieSeries

Displays data as circular graphic divided into slices to illustrate numerical proportion.

Donut

DonutSeries

Displays data as a pie chart with a hole in center.

Note

To display Cartesian series, use the ChartView view instead.

To add a series to a chart, add a PieSeries or DonutSeries object to the chart’s PieChartView.Series collection.

To bind the series to data, set the DonutSeries.Data property to a PieSeriesDataAdapter object. Use the adapter’s LabelDataMember and ValueDataMember properties to specify the data source and fields that contain values and labels for series points. For more information about data adapters, refer to the following help topic: Data Adapters.

Xaml

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<dxc:PieChartView>
    <dxc:PieChartView.Series>
        <dxc:DonutSeries>
            <dxc:DonutSeries.Data>
                <dxc:PieSeriesDataAdapter DataSource="{Binding SecuritiesByRisk}"
                                          LabelDataMember="Label"
                                          ValueDataMember="Value"/>
            </dxc:DonutSeries.Data>
        </dxc:DonutSeries>
    </dxc:PieChartView.Series>
</dxc:PieChartView>

Show View Model

using System.Collections.Generic;
using Microsoft.Maui.Controls;
// ...

class ViewModel {
   public List<PieData> SecuritiesByRisk { get; }

   public ViewModel()
   {
       SecuritiesByRisk = new List<PieData>() {
           new PieData("Income", 132826.00),
           new PieData("Growth", 208816.0),
           new PieData("Speculation", 24700.00),
           new PieData("Hedge", 80114.00)
       };
   }
}

public class PieData {
   public string Label { get; }
   public double Value { get; }

   public PieData(string label, double value) {
       Label = label;
       Value = value;
   }
}

If your data objects implement the INotifyPropertyChanged interface, you can enable the DataSourceAdapterBase.AllowLiveDataUpdates option to make the chart refresh itself once data object values change. The chart re-renders series and axes to meet data updates.

Legend

Legend is a chart element that displays series and series points’ designations. Assign a Legend object to the ChartBaseView.Legend property to add a legend to a chart.

XAML
C#

<dxc:PieChartView>
    <dxc:PieChartView.Legend>
        <dxc:Legend Orientation="TopToBottom"
                    HorizontalPosition="RightOutside"
                    VerticalPosition="Center"/>
    </dxc:PieChartView.Legend>
</dxc:PieChartView>

Legend legend = new Legend() {
  Orientation = LegendOrientation.TopToBottom,
  HorizontalPosition = LegendHorizontalPosition.RightOutside,
  VerticalPosition = LegendVerticalPosition.Center,
};
chart.Legend = legend;

Labels

Each series point can be accompanied by a text label representing data related to the point. These are series point labels (or series labels, for short).

Series labels are hidden by default. To display them, create the PieSeriesLabel class instance, adjust the label position and appearance, and assign the label to the PieSeries.Label property.

XAML
C#

<dxc:PieChartView>
    <dxc:PieChartView.Series>
            <dxc:DonutSeries>
                <dxc:DonutSeries.Label>
                    <dxc:PieSeriesLabel Position="Inside" TextPattern="{}{VP}%"/>
                </dxc:DonutSeries.Label>
        </dxc:DonutSeries>
    </dxc:PieChartView.Series>
</dxc:PieChartView>

pieSeries.Label = new PieSeriesLabel {
    Position = PieSeriesLabelPosition.Inside,
    TextPattern = "{VP}%"
};

Center Label

Use the PieSeries.CenterLabel property to display arbitrary text or a total value in the center of the Doughnut chart.

XAML
C#

<dxc:PieChartView>
    <dxc:PieChartView.Series>
            <dxc:DonutSeries>
                <dxc:DonutSeries.CenterLabel>
                    <dxc:PieCenterTextLabel TextPattern="{}Total&#x0a;{TV}"/>
                </dxc:DonutSeries.CenterLabel>
        </dxc:DonutSeries>
    </dxc:PieChartView.Series>
</dxc:PieChartView>

pieSeries.CenterLabel = new PieCenterTextLabel {
    TextPattern = "Total\n{TV}"
};

Hints

A chart can display hints with information about a tapped series or point.

To show hints, create a new PieHint object, set its Enabled property to true and assign the hint to the chart’s PieChartView.Hint property.

XAML
C#

<dxc:PieChartView>
    <dxc:PieChartView.Hint>
        <dxc:PieHint Enabled="True"/>
    </dxc:PieChartView.Hint>
</dxc:PieChartView>

chart.Hint = new PieHint { Enabled = true };

To format values hints display, assign a PieSeriesHintOptions object with the specified text pattern to the PieSeries.HintOptions property.

XAML
C#

<dxc:PieChartView>
    <dxc:PieChartView.Series>
        <dxc:DonutSeries>
            <dxc:DonutSeries.HintOptions>
                <dxc:PieSeriesHintOptions PointTextPattern="{}{L}: {VP}%"/>
            </dxc:DonutSeries.HintOptions>
        </dxc:DonutSeries>
    </dxc:PieChartView.Series>
</dxc:PieChartView>

pieSeries.HintOptions = new PieSeriesHintOptions {
    PointTextPattern = "{L}: {VP}%"
};

Selection

PieChartView provides a set of properties you can use to manage the chart’s behavior when an end-user taps a chart element:

ChartBaseView.SelectionKind Gets or sets whether an individual point or whole series is selected when an end user taps a chart. This is a bindable property.
ChartBaseView.SelectionMode Gets or sets how many chart elements an end user can select simultaneously. This is a bindable property.
PieChartView.SelectionBehavior Gets or sets how to mark a selected data point. This is a bindable property.

Chart Appearance

To customize the pie chart appearance, assign a PieChartStyle object with the specified chart appearance settings to the PieChartView.ChartStyle property.

chart.ChartStyle = new PieChartStyle() {
    Palette = new Color[] {
        Color.FromHex("#b04972"),
        Color.FromHex("#9c5ba0"),
        Color.FromHex("#7145a8"),
        Color.FromHex("#1c7ed6"),
        Color.FromHex("#1db2f5"),
        Color.FromHex("#48b099"),
        Color.FromHex("#ffaf24"),
        Color.FromHex("#fe765e")},
    BackgroundColor = Color.FromHex("#2d3844"),
    SeriesIndent = 100
};

Pie Chart Elements