How to: Create a 2D Stacked Bar Chart

• Jun 07, 2019
• 2 minutes to read

The following example demonstrates how to create a 2D Stacked Bar chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add two BarFullStackedSeries2D objects with points to the diagram’s Diagram.Series collection.

Also, this example shows how to add a legend (showing series names) to a chart.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-2d-stacked-bar-chart-e1653.

Window1.xaml

<Window x:Class="StackedBar2DChart.Window1" 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" Title="Window1" Height="350" Width="620">
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:BarStackedSeries2D DisplayName="First Series">
                            <dxc:BarStackedSeries2D.Model>
                                <dxc:SteelColumnBar2DModel />
                            </dxc:BarStackedSeries2D.Model>
                            <dxc:BarStackedSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="2" />
                                <dxc:SeriesPoint Argument="B" Value="2" />
                                <dxc:SeriesPoint Argument="C" Value="1" />
                                <dxc:SeriesPoint Argument="D" Value="6" />
                            </dxc:BarStackedSeries2D.Points>
                        </dxc:BarStackedSeries2D>
                        <dxc:BarStackedSeries2D DisplayName="Second Series">
                            <dxc:BarStackedSeries2D.Model>
                                <dxc:SteelColumnBar2DModel />
                            </dxc:BarStackedSeries2D.Model>
                            <dxc:BarStackedSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="4" />
                                <dxc:SeriesPoint Argument="B" Value="3" />
                                <dxc:SeriesPoint Argument="C" Value="2" />
                                <dxc:SeriesPoint Argument="D" Value="1" />
                            </dxc:BarStackedSeries2D.Points>
                        </dxc:BarStackedSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend />
            </dxc:ChartControl.Legend>
        </dxc:ChartControl>
    </Grid>
</Window>

Application.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace StackedBar2DChart
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application
    End Class
End Namespace

Application.xaml

<Application x:Class="StackedBar2DChart.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows

Namespace StackedBar2DChart

    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Window1.xaml.cs

using System.Windows;

namespace StackedBar2DChart {

    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}