Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Create a 2D Spline Area Chart

The following example demonstrates how to create a 2D Spline Area chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add two SplineAreaSeries2D objects with points to the diagram’s Diagram.Series collection.

Also, this example shows how to specify AreaSeries2D.Transparency and SplineAreaSeries2D.LineTension properties and add a title to a chart.

<Window
        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"
        x:Class="SplineAreaChart.MainWindow"
        Title="SplineAreaChart" Height="600" Width="700">
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:SplineAreaSeries2D  DisplayName="2005"  LineTension="0.8"
                                                 Transparency="0.4"  MarkerSize="20"
                                                 MarkerVisible="True">
                            <dxc:SplineAreaSeries2D.Label>
                                <dxc:SeriesLabel Visible="True" ConnectorVisible="False"/>
                            </dxc:SplineAreaSeries2D.Label>
                            <dxc:SplineAreaSeries2D.Points>
                                <dxc:SeriesPoint Argument="ExxonMobil" Value="362.53" />
                                <dxc:SeriesPoint Argument="General Electric" Value="348.45" />
                                <dxc:SeriesPoint Argument="Microsoft" Value="279.02" />
                                <dxc:SeriesPoint Argument="Citigroup" Value="230.93" />
                                <dxc:SeriesPoint Argument="Royal Dutch Shell plc" Value="203.52" />
                                <dxc:SeriesPoint Argument="Procter &amp; Gamble" Value="197.12" />
                            </dxc:SplineAreaSeries2D.Points>
                        </dxc:SplineAreaSeries2D>
                        <dxc:SplineAreaSeries2D DisplayName="2004" LineTension="0.8"
                                                Transparency="0.4" MarkerSize="20"
                                                MarkerVisible="True">
                            <dxc:SplineAreaSeries2D.Label>
                                <dxc:SeriesLabel  Visible="True" ConnectorVisible="False"/>
                            </dxc:SplineAreaSeries2D.Label>
                            <dxc:SplineAreaSeries2D.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:SplineAreaSeries2D.Points>
                        </dxc:SplineAreaSeries2D>
                    </dxc:XYDiagram2D.Series>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.WholeRange>
                                <dxc:Range SideMarginsValue="0" />
                            </dxc:AxisX2D.WholeRange>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <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</dxc:Title>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>