How to: Create a 2D Stacked Bar Chart

  • 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.

<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>