How to: Create a 2D Line Chart

• Jun 07, 2019

The following example demonstrates how to create a 2D Line chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add two LineSeries2D 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-line-chart-e1647.

Window1.xaml

<Window x:Class="Line2DChart.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:LineSeries2D DisplayName="First Series" MarkerVisible="False">
                            <dxc:LineSeries2D.LineStyle>
                                <dxc:LineStyle Thickness="4" />
                            </dxc:LineSeries2D.LineStyle>
                            <dxc:LineSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="1" />
                                <dxc:SeriesPoint Argument="B" Value="3" />
                                <dxc:SeriesPoint Argument="C" Value="7" />
                                <dxc:SeriesPoint Argument="D" Value="4" />
                            </dxc:LineSeries2D.Points>
                        </dxc:LineSeries2D>
                        <dxc:LineSeries2D DisplayName="Second Series" MarkerVisible="False">
                            <dxc:LineSeries2D.LineStyle>
                                <dxc:LineStyle Thickness="4" />
                            </dxc:LineSeries2D.LineStyle>
                            <dxc:LineSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="2" />
                                <dxc:SeriesPoint Argument="B" Value="2" />
                                <dxc:SeriesPoint Argument="C" Value="5" />
                                <dxc:SeriesPoint Argument="D" Value="4" />
                            </dxc:LineSeries2D.Points>
                        </dxc:LineSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend />
            </dxc:ChartControl.Legend>
        </dxc:ChartControl>
    </Grid>
</Window>