NestedDonutSeriesView Class

Displays series data points as the Nested Donut chart.

Assembly: DevExpress.WinUI.Charts.v21.1.dll

Declaration

C#
VB.NET

public class NestedDonutSeriesView :
    DonutSeriesView

Public Class NestedDonutSeriesView
    Inherits DonutSeriesView

Remarks

Define the Series.View property to assign a specific view to the series.

Example

The following example shows how to create a Nested Donut chart.

Nested Donut Chart

XAML

<Page
    x:Class="ChartSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ChartSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.WinUI.Charts"
    xmlns:dx="using:DevExpress.WinUI.Controls.Core"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.DataContext>
        <local:ChartViewModel/>
    </Page.DataContext>
    <Grid>
        <Charts:PieChart x:Name="chart">
            <Charts:PieChart.Legend>
                <Charts:Legend HorizontalPosition="RightOutside" 
                               VerticalPosition="Center" 
                               Orientation="Horizontal" 
                               MaximumRowsOrColumns="1"/>
            </Charts:PieChart.Legend>
            <Charts:PieChart.Series>
                <Charts:Series x:Name="series1" DisplayName="GDP" ShowInLegend="False">
                    <Charts:Series.View>
                        <Charts:NestedDonutSeriesView ShowLabels="True" HoleRadiusPercent="30">
                            <Charts:NestedDonutSeriesView.LabelOptions>
                                <Charts:SeriesLabelOptions Pattern="{}{VP:p0}"/>
                            </Charts:NestedDonutSeriesView.LabelOptions>
                        </Charts:NestedDonutSeriesView>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSourceAdapter DataSource="{Binding SeriesData1}">
                            <Charts:DataMember DataMemberType="Argument" ColumnName="Argument" />
                            <Charts:DataMember DataMemberType="Value" ColumnName="Value" />
                        </Charts:DataSourceAdapter>
                    </Charts:Series.Data>
                </Charts:Series>
                <Charts:Series x:Name="series2" DisplayName="GDP Per Capita">
                    <Charts:Series.View>
                        <Charts:NestedDonutSeriesView ShowLabels="True">
                            <Charts:NestedDonutSeriesView.LabelOptions>
                                <Charts:SeriesLabelOptions Pattern="{}{VP:p0}"/>
                            </Charts:NestedDonutSeriesView.LabelOptions>
                        </Charts:NestedDonutSeriesView>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSourceAdapter DataSource="{Binding SeriesData2}">
                            <Charts:DataMember DataMemberType="Argument" ColumnName="Argument" />
                            <Charts:DataMember DataMemberType="Value" ColumnName="Value" />
                        </Charts:DataSourceAdapter>
                    </Charts:Series.Data>
                </Charts:Series>
            </Charts:PieChart.Series>
        </Charts:PieChart>
    </Grid>
</Page>

using DevExpress.Mvvm;
using DevExpress.WinUI.Charts;
using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.Generic;

namespace ChartSample {
    public sealed partial class MainPage : Page {
        public MainPage() {
            this.InitializeComponent();
        }
    }
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }
    }

    public class ChartViewModel : ViewModelBase {
        public ChartViewModel() {
            List<DataPoint> seriesData1 = new List<DataPoint> {
                new DataPoint() { Argument = "Southwest", Value = 2438089 },
                new DataPoint() { Argument = "Mideast", Value = 3768023 },
                new DataPoint() { Argument = "Southeast", Value = 4512857 },
                new DataPoint() { Argument = "Great Lakes", Value = 2807752 },
                new DataPoint() { Argument = "Far West", Value = 1201650 },
                new DataPoint() { Argument = "New England", Value = 1121715 },
                new DataPoint() { Argument = "Rocky Mountain", Value = 766387 },
                new DataPoint() { Argument = "Plains", Value = 1315095 }
            };
            List<DataPoint> seriesData2 = new List<DataPoint> {
                new DataPoint() { Argument = "Southwest", Value = 206061 },
                new DataPoint() { Argument = "Mideast", Value = 559847 },
                new DataPoint() { Argument = "Southeast", Value = 601923 },
                new DataPoint() { Argument = "Great Lakes", Value = 295886 },
                new DataPoint() { Argument = "Far West", Value = 330739 },
                new DataPoint() { Argument = "New England", Value = 389420 },
                new DataPoint() { Argument = "Rocky Mountain", Value = 285709 },
                new DataPoint() { Argument = "Plains", Value = 441282 }
            };

            SeriesData1 = seriesData1;
            SeriesData2 = seriesData2;
        }
        public List<DataPoint> SeriesData1 { get; }
        public List<DataPoint> SeriesData2 { get; }
    }
}

For step-by-step instructions on how to create a Pie chart, refer to the following help topic: Lesson 2 - Create a Pie Chart.