How to: Create a 2D Range Area Chart

• Jun 07, 2019

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

Also, this example shows how to add a chart title and to hide markers and labels for both series to improve the chart’s appearance.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-2d-range-area-chart-e3504.

MainWindow.xaml

<Window x:Class="RangeArea2DChart.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:RangeAreaSeries2D DisplayName="2007-2008" ArgumentScaleType="DateTime"
                                               Transparency="0.3" Marker1Visible="False" Marker2Visible="False">
                            <dxc:RangeAreaSeries2D.Points>
                                <dxc:SeriesPoint Argument="01/01/2008" Value="2.08" dxc:RangeAreaSeries2D.Value2="4.28"/>
                                <dxc:SeriesPoint Argument="02/01/2008" Value="2.42" dxc:RangeAreaSeries2D.Value2="4.03"/>
                                <dxc:SeriesPoint Argument="03/01/2008" Value="2.78" dxc:RangeAreaSeries2D.Value2="3.98"/>
                                <dxc:SeriesPoint Argument="04/01/2008" Value="2.57" dxc:RangeAreaSeries2D.Value2="3.94"/>
                                <dxc:SeriesPoint Argument="05/01/2008" Value="2.69" dxc:RangeAreaSeries2D.Value2="4.18"/>
                                <dxc:SeriesPoint Argument="06/01/2008" Value="2.69" dxc:RangeAreaSeries2D.Value2="5.02"/>
                                <dxc:SeriesPoint Argument="07/01/2008" Value="2.36" dxc:RangeAreaSeries2D.Value2="5.6"/>
                                <dxc:SeriesPoint Argument="08/01/2008" Value="1.97" dxc:RangeAreaSeries2D.Value2="5.37"/>
                                <dxc:SeriesPoint Argument="09/01/2008" Value="2.76" dxc:RangeAreaSeries2D.Value2="4.94"/>
                                <dxc:SeriesPoint Argument="10/01/2008" Value="3.54" dxc:RangeAreaSeries2D.Value2="3.66"/>
                                <dxc:SeriesPoint Argument="11/01/2008" Value="4.31" dxc:RangeAreaSeries2D.Value2="1.07"/>
                                <dxc:SeriesPoint Argument="12/01/2008" Value="4.08" dxc:RangeAreaSeries2D.Value2="0.09"/>
                            </dxc:RangeAreaSeries2D.Points>
                            <dxc:RangeAreaSeries2D.Label>
                                <dxc:SeriesLabel Visible="False" />
                            </dxc:RangeAreaSeries2D.Label>
                        </dxc:RangeAreaSeries2D>
                    </dxc:XYDiagram2D.Series>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D GridLinesVisible="True" DateTimeGridAlignment="Month">
                            <dxc:AxisX2D.Range>
                                <dxc:AxisRange SideMarginsEnabled="False" />
                            </dxc:AxisX2D.Range>
                            <dxc:AxisX2D.DateTimeOptions>
                                <dxc:DateTimeOptions Format="Custom" FormatString="MMMM" />
                            </dxc:AxisX2D.DateTimeOptions>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <dxc:AxisY2D.Range>
                                <dxc:AxisRange MinValue="-0.5" MaxValue="6" />
                            </dxc:AxisY2D.Range>
                            <dxc:AxisY2D.Title>
                                <dxc:AxisTitle Content="Inflation rate, %"  />
                            </dxc:AxisY2D.Title>
                        </dxc:AxisY2D>
                    </dxc:XYDiagram2D.AxisY>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" HorizontalAlignment="Center">Annual Inflation in 2007 and 2008</dxc:Title>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>