How to: Create a 2D Step Line Chart

• Jun 07, 2019

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

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

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-2d-step-line-chart-e3505.

MainWindow.xaml

<Window x:Class="LineStep2DChart.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="350" Width="640" >
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:LineStepSeries2D ColorEach="True" ArgumentScaleType="DateTime">
                            <dxc:LineStepSeries2D.Points>
                                <dxc:SeriesPoint Argument="1/1/2005" Value="138.7" />
                                <dxc:SeriesPoint Argument="2/1/2005" Value="141.4" />
                                <dxc:SeriesPoint Argument="3/1/2005" Value="159.5" />
                                <dxc:SeriesPoint Argument="4/1/2005" Value="160.7" />
                                <dxc:SeriesPoint Argument="5/1/2005" Value="148.8" />
                                <dxc:SeriesPoint Argument="6/1/2005" Value="166.6" />
                            </dxc:LineStepSeries2D.Points>
                        </dxc:LineStepSeries2D>
                    </dxc:XYDiagram2D.Series>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <dxc:AxisY2D.Range>
                                <dxc:AxisRange dxc:AxisY2D.AlwaysShowZeroLevel="False" />
                            </dxc:AxisY2D.Range>
                            <dxc:AxisY2D.Title>
                                <dxc:AxisTitle Content="Cents per Gallon" />
                            </dxc:AxisY2D.Title>
                        </dxc:AxisY2D>
                    </dxc:XYDiagram2D.AxisY>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D GridLinesVisible="True" DateTimeMeasureUnit="Month" DateTimeGridAlignment="Month">
                            <dxc:AxisX2D.DateTimeOptions>
                                <dxc:DateTimeOptions Format="MonthAndYear" />
                            </dxc:AxisX2D.DateTimeOptions>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" HorizontalAlignment="Center" Content="U.S. Fuel Oil Prices" />
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>