How to: Create a 2D Step Area Chart

• Jun 07, 2019

The following example demonstrates how to create a Step Area chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add an AreaStepSeries2D object with points to the diagram’s Diagram.Series collection.

Also, this example shows how to add a chart title.

MainWindow.xaml

<Window x:Class="AreaStep2DChart.MainWindow"
        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="MainWindow" Height="500" Width="625">
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:AreaStepSeries2D Transparency="0.7">
                            <dxc:AreaStepSeries2D.Points>
                                <dxc:SeriesPoint Argument="ExxonMobil" Value="277.02" />
                                <dxc:SeriesPoint Argument="General Electric" Value="328.54" />
                                <dxc:SeriesPoint Argument="Microsoft" Value="297.02" />
                                <dxc:SeriesPoint Argument="Citigroup" Value="255.3" />
                                <dxc:SeriesPoint Argument="Royal Dutch Shell plc" Value="173.54" />
                                <dxc:SeriesPoint Argument="Procter &amp; Gamble" Value="131.89" />
                            </dxc:AreaStepSeries2D.Points>
                        </dxc:AreaStepSeries2D>
                    </dxc:XYDiagram2D.Series>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.Label>
                                <dxc:AxisLabel Staggered="True" />
                            </dxc:AxisX2D.Label>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <dxc:AxisY2D.Range>
                                <dxc:AxisRange MinValue="125" MaxValue="390" />
                            </dxc:AxisY2D.Range>
                            <dxc:AxisY2D.Title>
                                <dxc:AxisTitle Content="Market value (billion US$)" />
                            </dxc:AxisY2D.Title>
                        </dxc:AxisY2D>
                    </dxc:XYDiagram2D.AxisY>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" HorizontalAlignment="Center">Corporations with Highest Market Value in 2004</dxc:Title>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>