How to: Create a 2D Polar Area Chart

• Jun 07, 2019

The following example demonstrates how to create a 2D Polar Area chart.

To do this, it is necessary to assign the ChartControl.Diagram property to PolarDiagram2D, and then add a PolarAreaSeries2D object with points to the polar diagram Diagram.Series collection.

MainWindow.xaml

<Window x:Class="PolarAreaSeries2D.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="525" >
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:PolarDiagram2D>
                    <dxc:PolarDiagram2D.Series>
                        <dxc:PolarAreaSeries2D Transparency="0.6" MarkerVisible="False">
                            <dxc:PolarAreaSeries2D.Points>
                                <dxc:SeriesPoint Argument="0" Value="400.0"/>
                                <dxc:SeriesPoint Argument="15" Value="386.37"/>
                                <dxc:SeriesPoint Argument="30" Value="346.41"/>
                                <dxc:SeriesPoint Argument="45" Value="282.84"/>
                                <dxc:SeriesPoint Argument="60" Value="200"/>
                                <dxc:SeriesPoint Argument="75" Value="103.53"/>
                                <dxc:SeriesPoint Argument="90" Value="0"/>
                                <dxc:SeriesPoint Argument="105" Value="-103.53"/>
                                <dxc:SeriesPoint Argument="120" Value="-200.0"/>
                                <dxc:SeriesPoint Argument="135" Value="-284.84"/>
                                <dxc:SeriesPoint Argument="150" Value="-346.41"/>
                                <dxc:SeriesPoint Argument="165" Value="-386.37"/>
                                <dxc:SeriesPoint Argument="180" Value="-400.0"/>
                                <dxc:SeriesPoint Argument="195" Value="-386.37"/>
                                <dxc:SeriesPoint Argument="210" Value="-346.41"/>
                                <dxc:SeriesPoint Argument="225" Value="-282.84"/>
                                <dxc:SeriesPoint Argument="240" Value="-200.0"/>
                                <dxc:SeriesPoint Argument="255" Value="-103.53"/>
                                <dxc:SeriesPoint Argument="270" Value="0"/>
                                <dxc:SeriesPoint Argument="285" Value="103.53"/>
                                <dxc:SeriesPoint Argument="300" Value="200.0"/>
                                <dxc:SeriesPoint Argument="315" Value="284.84"/>
                                <dxc:SeriesPoint Argument="330" Value="346.41"/>
                                <dxc:SeriesPoint Argument="345" Value="386.37"/>
                                <dxc:SeriesPoint Argument="360" Value="400.0"/>
                            </dxc:PolarAreaSeries2D.Points>
                        </dxc:PolarAreaSeries2D>
                    </dxc:PolarDiagram2D.Series>
                </dxc:PolarDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>