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

  • 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 Provides access to the settings that specify the position and text format of axis labels.
    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.
<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>