Back to Devexpress

Group Series

windowsforms-405618-controls-and-libraries-chart-control-data-representation-group-data.md

latest11.9 KB
Original Source

Group Series

  • Oct 30, 2025
  • 5 minutes to read

When you set up certain series views, you need to organize series into groups:

  • Nested Doughnut Series View - place series in the same group to display nested doughnuts.
  • Side-by-Side Stacked Bar Series Views - the number of groups you specify determines the number of side-by-side bars.

Note

You cannot group series with incompatible value types, such as DateOnly and TimeOnly.

Doughnut Groups

Use the NestedDoughnutSeriesView.Group property to organize series into groups and create multiple nested doughnut rings. Series with the same group identifier are nested together.

Ready-to-use example

This example creates two nested series groups. The Weight property controls the relative size of each ring, and InnerIndent adds spacing between the nested rings.

csharp
using DevExpress.XtraEditors;
using DevExpress.XtraCharts;

public partial class Form1 : XtraForm {
    public Form1() {
        InitializeComponent();

        // Create the first group
        Series outerSeries1 = new Series("Sales Outer", ViewType.NestedDoughnut);
        outerSeries1.Points.Add(new SeriesPoint("Q1", 150));
        outerSeries1.Points.Add(new SeriesPoint("Q2", 180));
        outerSeries1.Points.Add(new SeriesPoint("Q3", 200));
        outerSeries1.Points.Add(new SeriesPoint("Q4", 170));
        outerSeries1.LegendTextPattern = "{A}";

        Series innerSeries1 = new Series("Sales Inner", ViewType.NestedDoughnut);
        innerSeries1.Points.Add(new SeriesPoint("Q1", 80));
        innerSeries1.Points.Add(new SeriesPoint("Q2", 95));
        innerSeries1.Points.Add(new SeriesPoint("Q3", 110));
        innerSeries1.Points.Add(new SeriesPoint("Q4", 85));
        innerSeries1.ShowInLegend = false;

        // Group the first set of series
        NestedDoughnutSeriesView outerView1 = outerSeries1.View as NestedDoughnutSeriesView;
        outerView1.Group = "SalesGroup";
        outerView1.Weight = 1.0;

        NestedDoughnutSeriesView innerView1 = innerSeries1.View as NestedDoughnutSeriesView;
        innerView1.Group = "SalesGroup";
        innerView1.Weight = 0.6;
        innerView1.InnerIndent = 5;

        // Create the second group
        Series outerSeries2 = new Series("Marketing Outer", ViewType.NestedDoughnut);
        outerSeries2.Points.Add(new SeriesPoint("Q1", 120));
        outerSeries2.Points.Add(new SeriesPoint("Q2", 140));
        outerSeries2.Points.Add(new SeriesPoint("Q3", 160));
        outerSeries2.Points.Add(new SeriesPoint("Q4", 130));
        outerSeries2.ShowInLegend = false;

        Series innerSeries2 = new Series("Marketing Inner", ViewType.NestedDoughnut);
        innerSeries2.Points.Add(new SeriesPoint("Q1", 60));
        innerSeries2.Points.Add(new SeriesPoint("Q2", 70));
        innerSeries2.Points.Add(new SeriesPoint("Q3", 80));
        innerSeries2.Points.Add(new SeriesPoint("Q4", 65));
        innerSeries2.ShowInLegend = false;

        // Group the second set of series
        NestedDoughnutSeriesView outerView2 = outerSeries2.View as NestedDoughnutSeriesView;
        outerView2.Group = "MarketingGroup";
        outerView2.Weight = 1.0;

        NestedDoughnutSeriesView innerView2 = innerSeries2.View as NestedDoughnutSeriesView;
        innerView2.Group = "MarketingGroup";
        innerView2.Weight = 0.6;
        innerView2.InnerIndent = 5;

        // Add the series to the chart
        chartControl1.Series.AddRange(new Series[] { outerSeries1, innerSeries1, outerSeries2, innerSeries2 });
    }
}
vb
Imports DevExpress.XtraEditors
Imports DevExpress.XtraCharts

Public Partial Class Form1
    Inherits XtraForm

    Public Sub New()
        InitializeComponent()

        ' Create the first group
        Dim outerSeries1 As New Series("Sales Outer", ViewType.NestedDoughnut)
        outerSeries1.Points.Add(New SeriesPoint("Q1", 150))
        outerSeries1.Points.Add(New SeriesPoint("Q2", 180))
        outerSeries1.Points.Add(New SeriesPoint("Q3", 200))
        outerSeries1.Points.Add(New SeriesPoint("Q4", 170))
        outerSeries1.LegendTextPattern = "{A}"

        Dim innerSeries1 As New Series("Sales Inner", ViewType.NestedDoughnut)
        innerSeries1.Points.Add(New SeriesPoint("Q1", 80))
        innerSeries1.Points.Add(New SeriesPoint("Q2", 95))
        innerSeries1.Points.Add(New SeriesPoint("Q3", 110))
        innerSeries1.Points.Add(New SeriesPoint("Q4", 85))
        innerSeries1.ShowInLegend = False

        ' Group the first set of series
        Dim outerView1 As NestedDoughnutSeriesView = TryCast(outerSeries1.View, NestedDoughnutSeriesView)
        outerView1.Group = "SalesGroup"
        outerView1.Weight = 1.0

        Dim innerView1 As NestedDoughnutSeriesView = TryCast(innerSeries1.View, NestedDoughnutSeriesView)
        innerView1.Group = "SalesGroup"
        innerView1.Weight = 0.6
        innerView1.InnerIndent = 5

        ' Create the second group
        Dim outerSeries2 As New Series("Marketing Outer", ViewType.NestedDoughnut)
        outerSeries2.Points.Add(New SeriesPoint("Q1", 120))
        outerSeries2.Points.Add(New SeriesPoint("Q2", 140))
        outerSeries2.Points.Add(New SeriesPoint("Q3", 160))
        outerSeries2.Points.Add(New SeriesPoint("Q4", 130))
        outerSeries2.ShowInLegend = False

        Dim innerSeries2 As New Series("Marketing Inner", ViewType.NestedDoughnut)
        innerSeries2.Points.Add(New SeriesPoint("Q1", 60))
        innerSeries2.Points.Add(New SeriesPoint("Q2", 70))
        innerSeries2.Points.Add(New SeriesPoint("Q3", 80))
        innerSeries2.Points.Add(New SeriesPoint("Q4", 65))
        innerSeries2.ShowInLegend = False

        ' Group the second set of series
        Dim outerView2 As NestedDoughnutSeriesView = TryCast(outerSeries2.View, NestedDoughnutSeriesView)
        outerView2.Group = "MarketingGroup"
        outerView2.Weight = 1.0

        Dim innerView2 As NestedDoughnutSeriesView = TryCast(innerSeries2.View, NestedDoughnutSeriesView)
        innerView2.Group = "MarketingGroup"
        innerView2.Weight = 0.6
        innerView2.InnerIndent = 5

        ' Add the series to the chart
        chartControl1.Series.AddRange(New Series() {outerSeries1, innerSeries1, outerSeries2, innerSeries2})
    End Sub
End Class

Side-by-Side Stacked Groups

The following view types support stacked grouping:

Use the series view’s StackedGroup property to create stacked groups. Series with the same StackedGroup value are stacked, and groups are displayed side-by-side.

Ready-to-use example

This example creates two stacked series groups.

csharp
using DevExpress.XtraEditors;
using DevExpress.XtraCharts;

public partial class Form1 : XtraForm {
    public Form1() {
        InitializeComponent();

        // Create the first group
        Series series1 = new Series("Sales Q1", ViewType.SideBySideStackedBar);
        series1.Points.Add(new SeriesPoint("Product A", 150));
        series1.Points.Add(new SeriesPoint("Product B", 120));

        Series series2 = new Series("Marketing Q1", ViewType.SideBySideStackedBar);
        series2.Points.Add(new SeriesPoint("Product A", 80));
        series2.Points.Add(new SeriesPoint("Product B", 95));

        // Group the first set of series
        SideBySideStackedBarSeriesView view1 = series1.View as SideBySideStackedBarSeriesView;
        view1.StackedGroup = "Group1";
        SideBySideStackedBarSeriesView view2 = series2.View as SideBySideStackedBarSeriesView;
        view2.StackedGroup = "Group1";

        // Create the second group
        Series series3 = new Series("Sales Q2", ViewType.SideBySideStackedBar);
        series3.Points.Add(new SeriesPoint("Product A", 180));
        series3.Points.Add(new SeriesPoint("Product B", 140));

        Series series4 = new Series("Marketing Q2", ViewType.SideBySideStackedBar);
        series4.Points.Add(new SeriesPoint("Product A", 110));
        series4.Points.Add(new SeriesPoint("Product B", 125));

        // Group the second set of series
        SideBySideStackedBarSeriesView view3 = series3.View as SideBySideStackedBarSeriesView;
        view3.StackedGroup = "Group2";
        SideBySideStackedBarSeriesView view4 = series4.View as SideBySideStackedBarSeriesView;
        view4.StackedGroup = "Group2";

        // Add the series to the chart
        chartControl1.Series.AddRange(new Series[] { series1, series2, series3, series4 });
    }
}
vb
Imports DevExpress.XtraEditors
Imports DevExpress.XtraCharts

Public Partial Class Form1
    Inherits XtraForm

    Public Sub New()
        InitializeComponent()

        ' Create the first group
        Dim series1 As New Series("Sales Q1", ViewType.SideBySideStackedBar)
        series1.Points.Add(New SeriesPoint("Product A", 150))
        series1.Points.Add(New SeriesPoint("Product B", 120))

        Dim series2 As New Series("Marketing Q1", ViewType.SideBySideStackedBar)
        series2.Points.Add(New SeriesPoint("Product A", 80))
        series2.Points.Add(New SeriesPoint("Product B", 95))

        ' Group the first set of series
        Dim view1 As SideBySideStackedBarSeriesView = TryCast(series1.View, SideBySideStackedBarSeriesView)
        view1.StackedGroup = "Group1"
        Dim view2 As SideBySideStackedBarSeriesView = TryCast(series2.View, SideBySideStackedBarSeriesView)
        view2.StackedGroup = "Group1"

        ' Create the second group
        Dim series3 As New Series("Sales Q2", ViewType.SideBySideStackedBar)
        series3.Points.Add(New SeriesPoint("Product A", 180))
        series3.Points.Add(New SeriesPoint("Product B", 140))

        Dim series4 As New Series("Marketing Q2", ViewType.SideBySideStackedBar)
        series4.Points.Add(New SeriesPoint("Product A", 110))
        series4.Points.Add(New SeriesPoint("Product B", 125))

        ' Group the second set of series
        Dim view3 As SideBySideStackedBarSeriesView = TryCast(series3.View, SideBySideStackedBarSeriesView)
        view3.StackedGroup = "Group2"
        Dim view4 As SideBySideStackedBarSeriesView = TryCast(series4.View, SideBySideStackedBarSeriesView)
        view4.StackedGroup = "Group2"

        ' Add the series to the chart
        chartControl1.Series.AddRange(New Series() {series1, series2, series3, series4})
    End Sub
End Class

See Also

Sorting Data

Data Aggregation

Side-by-Side Full-Stacked Bar Chart

Side-by-Side Stacked Bar Chart

Nested Doughnut Chart