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

• Jun 07, 2019

The following example demonstrates how to create a Full-Stacked Line chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add two LineFullStackedSeries2D objects 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-full-stacked-line-chart-e3508.

MainWindow.xaml

<Window x:Class="LineFullStacked2DChart.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="525" >
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:LineFullStackedSeries2D ArgumentScaleType="DateTime">
                            <dxc:LineFullStackedSeries2D.Points>
                                <dxc:SeriesPoint Argument="11/01/1997" Value="10" />
                                <dxc:SeriesPoint Argument="11/01/1999" Value="962" />
                                <dxc:SeriesPoint Argument="11/01/2001" Value="18832" />
                                <dxc:SeriesPoint Argument="11/01/2003" Value="264332" />
                                <dxc:SeriesPoint Argument="11/01/2005" Value="1112753" />
                                <dxc:SeriesPoint Argument="11/01/2007" Value="4169758" />
                            </dxc:LineFullStackedSeries2D.Points>
                        </dxc:LineFullStackedSeries2D>
                        <dxc:LineFullStackedSeries2D  ArgumentScaleType="DateTime">
                            <dxc:LineFullStackedSeries2D.Points>
                                <dxc:SeriesPoint Argument="11/01/1997" Value="391" />
                                <dxc:SeriesPoint Argument="11/01/1999" Value="4082" />
                                <dxc:SeriesPoint Argument="11/01/2001" Value="21932" />
                                <dxc:SeriesPoint Argument="11/01/2003" Value="64195" />
                                <dxc:SeriesPoint Argument="11/01/2005" Value="78473" />
                                <dxc:SeriesPoint Argument="11/01/2007" Value="101830" />
                            </dxc:LineFullStackedSeries2D.Points>
                        </dxc:LineFullStackedSeries2D>
                    </dxc:XYDiagram2D.Series>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D DateTimeMeasureUnit="Year">
                            <dxc:AxisX2D.DateTimeOptions>
                                <dxc:DateTimeOptions Format="Custom" FormatString="yyyy" />
                            </dxc:AxisX2D.DateTimeOptions>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <dxc:AxisY2D.NumericOptions>
                                <dxc:NumericOptions Format="Percent" Precision="0" />
                            </dxc:AxisY2D.NumericOptions>
                        </dxc:AxisY2D>
                    </dxc:XYDiagram2D.AxisY>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" HorizontalAlignment="Center" Content="Architecture Share Over Time (GF)" />
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>