How to: Create a 2D Full-Stacked Bar Chart

• Jun 07, 2019
• 7 minutes to read

This example demonstrates how to create a 2D Full-Stacked Bar chart.

1. Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object.

   Note

   The ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

2. Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.

   The Diagram.SeriesItemTemplate property allows you to define each series item presentation. Use the following API members to configure a series item:

   Member	Description
   BarFullStackedSeries2D	Represents the 2D Full-Stacked Bar series.
   Series.DataSource	Specifies the series’s data source.
   Series.ArgumentDataMember	Defines the data member that provides the series’s arguments.
   Series.ValueDataMember	Specifies the data member that provides the series’s values.
   Series.DisplayName	Gets or sets the display name of the series.

3. Add an Legend to the ChartControlBase.Legends collection. Refer to the Legend topic for more information about legends.

4. Add an Title to the ChartControlBase.Titles collection. Define the title’s Content and HorizontalAlignment properties. Refer to the Chart Titles topic for more information about titles.

5. Use the following API members to configure the axis options.

   Member	Description
   XYDiagram2D.AxisY	Gets the Y-axis.
   AxisY2D	Represents the Y-axis of a XYDiagram2D class.
   AxisBase.Label	Specifies axis label settings.
   AxisLabel.TextPattern	Gets or sets a format string that specifies the text to be displayed within the axis label.
   AxisY2D.NumericScaleOptions	Provides access to the options that define the behavior of a numeric Y-scale when its mode is continuous.
   ContinuousNumericScaleOptions.AutoGrid	Gets or sets a value that specifies whether the spacing of grid lines is calculated automatically based upon the major tickmarks of the axis.
   ContinuousNumericScaleOptions.GridSpacing	Gets or sets the numeric grid step in grid alignment units.
   XYDiagram2D.AxisX	Gets the X-axis.
   AxisX2D	Represents the X-axis of a XYDiagram2D class.
   Axis2D.TickmarksMinorVisible	Specifies whether the axis minor tick marks are visible. This is a dependency property.

Window1.xaml

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        xmlns:local="clr-namespace:FullStackedBar2DChart" 
        x:Class="FullStackedBar2DChart.Window1" 
        Title="Window1" Height="450" Width="750">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Sales by Regions" 
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:ChartControl.Legends>
                <dxc:Legend/>
            </dxc:ChartControl.Legends>
            <dxc:XYDiagram2D SeriesItemsSource="{Binding SaleSeries}">
                <dxc:XYDiagram2D.SeriesItemTemplate>
                    <DataTemplate>
                        <dxc:BarFullStackedSeries2D DisplayName="{Binding Category}"
                                                    DataSource="{Binding Values}"
                                                    ArgumentDataMember="Region"
                                                    ValueDataMember="Value">
                        </dxc:BarFullStackedSeries2D>
                    </DataTemplate>
                </dxc:XYDiagram2D.SeriesItemTemplate>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.Label>
                            <dxc:AxisLabel TextPattern="{}{VP:P0}"/>
                        </dxc:AxisY2D.Label>
                        <dxc:AxisY2D.NumericScaleOptions>
                            <dxc:ContinuousNumericScaleOptions AutoGrid="False" 
                                                               GridSpacing="0.2"/>
                        </dxc:AxisY2D.NumericScaleOptions>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D TickmarksMinorVisible="False"/>
                </dxc:XYDiagram2D.AxisX>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

Window1.xaml.cs

using System.Collections.ObjectModel;
using System.Windows;
namespace FullStackedBar2DChart {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<SaleSeries> SaleSeries { get; private set; }
        public ChartViewModel() {
            SaleSeries = new ObservableCollection<SaleSeries> {
                new SaleSeries {
                    Category = "Video players",
                    Values = new  ObservableCollection<SaleInfo> {
                        new SaleInfo { Region = "Asia",          Value = 853D},
                        new SaleInfo { Region = "Australia",     Value = 321D},
                        new SaleInfo { Region = "Europe",        Value = 655D},
                        new SaleInfo { Region = "North America", Value = 1325D},
                        new SaleInfo { Region = "South America", Value = 653D}
                    }
                },
                new SaleSeries {
                    Category = "Automation",
                    Values = new  ObservableCollection<SaleInfo> {
                        new SaleInfo { Region = "Asia",          Value = 172D},
                        new SaleInfo { Region = "Australia",     Value = 255D},
                        new SaleInfo { Region = "Europe",        Value = 981D},
                        new SaleInfo { Region = "North America", Value = 963D},
                        new SaleInfo { Region = "South America", Value = 123D},
                    }
                },
                new SaleSeries {
                    Category = "Monitors",
                    Values = new  ObservableCollection<SaleInfo> {
                        new SaleInfo { Region = "Asia",          Value = 1011D},
                        new SaleInfo { Region = "Australia",     Value = 359D},
                        new SaleInfo { Region = "Europe",        Value = 721D},
                        new SaleInfo { Region = "North America", Value = 565D},
                        new SaleInfo { Region = "South America", Value = 532D},
                    }
                },
                new SaleSeries {
                    Category = "Projectors",
                    Values = new  ObservableCollection<SaleInfo> {
                        new SaleInfo { Region = "Asia",          Value = 998D},
                        new SaleInfo { Region = "Australia",     Value = 222D},
                        new SaleInfo { Region = "Europe",        Value = 865D},
                        new SaleInfo { Region = "North America", Value = 787D},
                        new SaleInfo { Region = "South America", Value = 332D},
                    }
                },
                new SaleSeries {
                    Category = "Televisions",
                    Values = new  ObservableCollection<SaleInfo> {
                        new SaleInfo { Region = "Asia",          Value = 1356D},
                        new SaleInfo { Region = "Australia",     Value = 232D},
                        new SaleInfo { Region = "Europe",        Value = 1323D},
                        new SaleInfo { Region = "North America", Value = 1125D},
                        new SaleInfo { Region = "South America", Value = 865D}
                    }
                },
            };
        }
    }
    public class SaleSeries {
        public string Category { get; set; }
        public ObservableCollection<SaleInfo> Values { get; set; }
    }
    public class SaleInfo {
        public string Region { get; set; }
        public double Value { get; set; }
    }
}

Window1.xaml.vb

Imports System.Collections.ObjectModel
Imports System.Windows
Namespace FullStackedBar2DChart
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class ChartViewModel
        Private privateSaleSeries As ObservableCollection(Of SaleSeries)
        Public Property SaleSeries() As ObservableCollection(Of SaleSeries)
            Get
                Return privateSaleSeries
            End Get
            Private Set(ByVal value As ObservableCollection(Of SaleSeries))
                privateSaleSeries = value
            End Set
        End Property
        Public Sub New()
            SaleSeries = New ObservableCollection(Of SaleSeries) _
                From {
                    New SaleSeries With {
                        .Category = "Video players",
                        .Values = New ObservableCollection(Of SaleInfo) From {
                            New SaleInfo With { .Region = "Asia", .Value = 853R },
                            New SaleInfo With { .Region = "Australia", .Value = 321R },
                            New SaleInfo With { .Region = "Europe", .Value = 655R },
                            New SaleInfo With { .Region = "North America", .Value = 1325R },
                            New SaleInfo With { .Region = "South America", .Value = 653R }
                        }
                    },
                    New SaleSeries With {
                        .Category = "Automation",
                        .Values = New ObservableCollection(Of SaleInfo) From {
                            New SaleInfo With { .Region = "Asia", .Value = 172R },
                            New SaleInfo With { .Region = "Australia", .Value = 255R },
                            New SaleInfo With { .Region = "Europe", .Value = 981R },
                            New SaleInfo With { .Region = "North America", .Value = 963R },
                            New SaleInfo With { .Region = "South America", .Value = 123R }
                        }
                    },
                    New SaleSeries With {
                        .Category = "Monitors",
                        .Values = New ObservableCollection(Of SaleInfo) From {
                            New SaleInfo With { .Region = "Asia", .Value = 1011R },
                            New SaleInfo With { .Region = "Australia", .Value = 359R },
                            New SaleInfo With { .Region = "Europe", .Value = 721R },
                            New SaleInfo With { .Region = "North America", .Value = 565R },
                            New SaleInfo With { .Region = "South America", .Value = 532R }
                        }
                    },
                    New SaleSeries With {
                        .Category = "Projectors",
                        .Values = New ObservableCollection(Of SaleInfo) From {
                            New SaleInfo With { .Region = "Asia", .Value = 998R },
                            New SaleInfo With { .Region = "Australia", .Value = 222R },
                            New SaleInfo With { .Region = "Europe", .Value = 865R },
                            New SaleInfo With { .Region = "North America", .Value = 787R },
                            New SaleInfo With { .Region = "South America", .Value = 332R }
                        }
                    },
                    New SaleSeries With {
                        .Category = "Televisions",
                        .Values = New ObservableCollection(Of SaleInfo) From {
                            New SaleInfo With { .Region = "Asia", .Value = 1356R },
                            New SaleInfo With { .Region = "Australia", .Value = 232R },
                            New SaleInfo With { .Region = "Europe", .Value = 1323R },
                            New SaleInfo With { .Region = "North America", .Value = 1125R },
                            New SaleInfo With { .Region = "South America", .Value = 865R }
                        }
                    }
                }
        End Sub
    End Class
    Public Class SaleSeries
        Public Property Category() As String
        Public Property Values() As ObservableCollection(Of SaleInfo)
    End Class
    Public Class SaleInfo
        Public Property Region() As String
        Public Property Value() As Double
    End Class
End Namespace