Range Radar Area

May 28, 2021
4 minutes to read

Range Radar Area belongs to the Radar Series group. To display this series, use the RadarRangeAreaSeries2D class.

Range Radar Area shows data as a filled area on a circular grid. This series requires two values for each series point to specify range limits.

Series Type Characteristics

The table below lists the main characteristics of a series:

Feature	Value
Series View	RadarRangeAreaSeries2D
Diagram	RadarDiagram2D
Number of arguments per series point	1
Number of values per series point	2

Note

Refer to the Series Type Compatibility article for information about compatible series.

Specify Series Data

Manually Add Points

You can populate the Series.Points collection manually. Note that the Series.Points is a content property. You can declare points in XAML directly after the RadarRangeAreaSeries2D declaration. You do not need to wrap them in the opening and closing Series.Points tags.

Specify the following properties for each series point:

xaml

<dxc:RadarRangeAreaSeries2D...>
   <dxc:SeriesPoint
       Argument="01/01/2001"
       Value="6"
       dxc:RadarRangeAreaSeries2D.Value2="2" />
   ...
</dxc:RadarRangeAreaSeries2D>

Show the complete example

XAML

xaml

<dxc:ChartControl
 Name="chart"
 ToolTipEnabled="True">
 <dxc:RadarDiagram2D
     StartAngle="0"
     ShapeStyle="Polygon"
     RotationDirection="Clockwise">
     <!--#region Axes-->
     <dxc:RadarDiagram2D.AxisX>
         <dxc:RadarAxisX2D>
             <dxc:RadarAxisX2D.DateTimeScaleOptions>
                 <dxc:ManualDateTimeScaleOptions
                     MeasureUnit="Month"
                     GridAlignment="Month" />
             </dxc:RadarAxisX2D.DateTimeScaleOptions>
             <dxc:RadarAxisX2D.Label>
                 <dxc:AxisLabel
                     TextPattern="{}{A:MMMM}" />
             </dxc:RadarAxisX2D.Label>
         </dxc:RadarAxisX2D>
     </dxc:RadarDiagram2D.AxisX>
     <dxc:RadarDiagram2D.AxisY>
         <dxc:RadarAxisY2D
             TickmarksMinorVisible="False"
             TickmarksVisible="False"
             Thickness="0">
             <dxc:RadarAxisY2D.Label>
                 <dxc:AxisLabel
                     TextPattern="{}{V}°C" />
             </dxc:RadarAxisY2D.Label>
         </dxc:RadarAxisY2D>
     </dxc:RadarDiagram2D.AxisY>
     <!--#endregion-->
     <dxc:RadarRangeAreaSeries2D
         x:Name="series"
         Transparency="0.6"
         ToolTipPointPattern=" {A:MMMM}: {V2:0.00}°C - {V1:0.00}°C"
         DisplayName="Day-Night"
         Marker1Visible="True"
         Marker2Visible="True">
         <dxc:RadarRangeAreaSeries2D.Border2>
             <dxc:SeriesBorder
                 Brush="#FF1BAE49" />
         </dxc:RadarRangeAreaSeries2D.Border2>
         <dxc:RadarRangeAreaSeries2D.Border1>
             <dxc:SeriesBorder
                 Brush="#FFD80079" />
         </dxc:RadarRangeAreaSeries2D.Border1>
         <dxc:RadarRangeAreaSeries2D.Label>
             <dxc:SeriesLabel
                 dxc:CircularRangeAreaSeries2D.LabelKind="OneLabel"
                 Visible="True"
                 Indent="15"
                 ResolveOverlappingMode="Default" />
         </dxc:RadarRangeAreaSeries2D.Label>
         <!--#region Points-->
         <dxc:SeriesPoint
             Argument="01/01/2001"
             Value="6"
             dxc:RadarRangeAreaSeries2D.Value2="2" />
         <dxc:SeriesPoint
             Argument="02/01/2001"
             Value="7"
             dxc:RadarRangeAreaSeries2D.Value2="2" />
         <dxc:SeriesPoint
             Argument="03/01/2001"
             Value="10"
             dxc:RadarRangeAreaSeries2D.Value2="3" />
         <dxc:SeriesPoint
             Argument="04/01/2001"
             Value="14"
             dxc:RadarRangeAreaSeries2D.Value2="5" />
         <dxc:SeriesPoint
             Argument="05/01/2001"
             Value="18"
             dxc:RadarRangeAreaSeries2D.Value2="8" />
         <dxc:SeriesPoint
             Argument="06/01/2001"
             Value="21"
             dxc:RadarRangeAreaSeries2D.Value2="11" />
         <dxc:SeriesPoint
             Argument="07/01/2001"
             Value="22"
             dxc:RadarRangeAreaSeries2D.Value2="13" />
         <dxc:SeriesPoint
             Argument="08/01/2001"
             Value="23"
             dxc:RadarRangeAreaSeries2D.Value2="13" />
         <dxc:SeriesPoint
             Argument="09/01/2001"
             Value="19"
             dxc:RadarRangeAreaSeries2D.Value2="11" />
         <dxc:SeriesPoint
             Argument="10/01/2001"
             Value="15"
             dxc:RadarRangeAreaSeries2D.Value2="8" />
         <dxc:SeriesPoint
             Argument="11/01/2001"
             Value="10"
             dxc:RadarRangeAreaSeries2D.Value2="5" />
         <dxc:SeriesPoint
             Argument="12/01/2001"
             Value="7"
             dxc:RadarRangeAreaSeries2D.Value2="3" />
         <!--#endregion-->
     </dxc:RadarRangeAreaSeries2D>
 </dxc:RadarDiagram2D>
 <!--#region Legend-->
 <dxc:ChartControl.Legend>
     <dxc:Legend
         HorizontalPosition="Right"
         VerticalPosition="TopOutside" />
 </dxc:ChartControl.Legend>
 <!--#endregion-->
 <!--#region Title-->
 <dxc:ChartControl.Titles>
     <dxc:Title
         HorizontalAlignment="Center">Average temperature in London</dxc:Title>
 </dxc:ChartControl.Titles>
 <!--#endregion-->
</dxc:ChartControl>

Bind to a Data Source

To populate Radar Range Area Series with data from a data source, specify the following properties:

xaml

<dxc:RadarRangeAreaSeries2D ...
    DataSource="{Binding Data}" 
    ArgumentDataMember="Argument"
    ValueDataMember="Value"
    Value2DataMember="Value2">
     ...
</dxc:RadarRangeAreaSeries2D>

Show the complete example

XAML

xaml

<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="SplineChart.MainWindow"
       xmlns:local="clr-namespace:SplineChart"
       Title="Spline Chart" Height="440" Width="660">
   <Window.DataContext>
       <local:ChartViewModel/>
   </Window.DataContext>
   <Grid>
       <dxc:ChartControl 
           Name="chart"
           ToolTipEnabled="True">
           <dxc:RadarDiagram2D 
               StartAngle="0"
               ShapeStyle="Polygon"
               RotationDirection="Clockwise">
               <!--#region Axes-->
               <dxc:RadarDiagram2D.AxisX>
                   <dxc:RadarAxisX2D>
                       <dxc:RadarAxisX2D.DateTimeScaleOptions>
                           <dxc:ManualDateTimeScaleOptions
                               MeasureUnit="Month"
                               GridAlignment="Month" />
                       </dxc:RadarAxisX2D.DateTimeScaleOptions>
                       <dxc:RadarAxisX2D.Label>
                           <dxc:AxisLabel
                               TextPattern="{}{A:MMMM}" />
                       </dxc:RadarAxisX2D.Label>
                   </dxc:RadarAxisX2D>
               </dxc:RadarDiagram2D.AxisX>
               <dxc:RadarDiagram2D.AxisY>
                   <dxc:RadarAxisY2D
                       TickmarksMinorVisible="False"
                       TickmarksVisible="False"
                       Thickness="0">
                       <dxc:RadarAxisY2D.Label>
                           <dxc:AxisLabel
                               TextPattern="{}{V}°C" />
                       </dxc:RadarAxisY2D.Label>
                   </dxc:RadarAxisY2D>
               </dxc:RadarDiagram2D.AxisY>
               <!--#endregion-->
               <dxc:RadarRangeAreaSeries2D
                   x:Name="series"
                   DataSource="{Binding Data}" 
                   ArgumentDataMember="Argument"
                   ValueDataMember="Value"
                   Value2DataMember="Value2"
                   Transparency="0.6"
                   ToolTipPointPattern=" {A:MMMM}: {V2:0.00}°C - {V1:0.00}°C"
                   DisplayName="Day-Night"
                   Marker1Visible="True"
                   Marker2Visible="True">
                   <dxc:RadarRangeAreaSeries2D.Border2>
                       <dxc:SeriesBorder
                           Brush="#FF1BAE49" />
                   </dxc:RadarRangeAreaSeries2D.Border2>
                   <dxc:RadarRangeAreaSeries2D.Border1>
                       <dxc:SeriesBorder
                           Brush="#FFD80079" />
                   </dxc:RadarRangeAreaSeries2D.Border1>
                   <dxc:RadarRangeAreaSeries2D.Label>
                       <dxc:SeriesLabel
                           dxc:CircularRangeAreaSeries2D.LabelKind="OneLabel"
                           Visible="True"
                           Indent="15"
                           ResolveOverlappingMode="Default" />
                   </dxc:RadarRangeAreaSeries2D.Label>
               </dxc:RadarRangeAreaSeries2D>
           </dxc:RadarDiagram2D>
           <!--#region Legend-->
           <dxc:ChartControl.Legend>
               <dxc:Legend
                   HorizontalPosition="Right"
                   VerticalPosition="TopOutside" />
           </dxc:ChartControl.Legend>
           <!--#endregion-->
           <!--#region Title-->
           <dxc:ChartControl.Titles>
               <dxc:Title
                   HorizontalAlignment="Center">Average temperature in London</dxc:Title>
           </dxc:ChartControl.Titles>
           <!--#endregion-->
       </dxc:ChartControl>
   </Grid>
</Window>

C#
VB.NET

csharp

public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
}
public class ChartViewModel {
    public ObservableCollection<DataPoint> Data { get; private set; }
    public ChartViewModel() {
        Data = new ObservableCollection<DataPoint> {
                    new DataPoint (new DateTime(2001,1,1),6,2),
                    new DataPoint (new DateTime(2001,2,1),7,2),
                    new DataPoint (new DateTime(2001,3,1),10,3),
                    new DataPoint (new DateTime(2001,4,1),14,5),
                    new DataPoint (new DateTime(2001,5,1),18,8),
                    new DataPoint (new DateTime(2001,6,1),21,11),
                    new DataPoint (new DateTime(2001,7,1),22,13),
                    new DataPoint (new DateTime(2001,8,1),23,13),
                    new DataPoint (new DateTime(2001,9,1),19,11),
                    new DataPoint (new DateTime(2001,10,1),15,8),
                    new DataPoint (new DateTime(2001,11,1),10,5),
                    new DataPoint (new DateTime(2001,12,1),7,3),
        };
    }
}
public class DataPoint {
    public DateTime Argument { get; set; }
    public int Value { get; set; }
    public int Value2 { get; set; }
    public DataPoint(DateTime argument, int value, int value2) {
        Argument = argument;
        Value = value;
        Value2 = value2;
    }
}

Public Partial Class MainWindow
    Inherits Window
    Public Sub New()
        InitializeComponent()
    End Sub
End Class
Public Class ChartViewModel
    Private _Data As ObservableCollection(Of DataPoint)
    Public Property Data As ObservableCollection(Of DataPoint)
        Get
            Return _Data
        End Get
        Private Set(ByVal value As ObservableCollection(Of DataPoint))
            _Data = value
        End Set
    End Property
    Public Sub New()
        Data = New ObservableCollection(Of DataPoint) From {
            New DataPoint(New DateTime(2001, 1, 1), 6, 2),
            New DataPoint(New DateTime(2001, 2, 1), 7, 2),
            New DataPoint(New DateTime(2001, 3, 1), 10, 3),
            New DataPoint(New DateTime(2001, 4, 1), 14, 5),
            New DataPoint(New DateTime(2001, 5, 1), 18, 8),
            New DataPoint(New DateTime(2001, 6, 1), 21, 11),
            New DataPoint(New DateTime(2001, 7, 1), 22, 13),
            New DataPoint(New DateTime(2001, 8, 1), 23, 13),
            New DataPoint(New DateTime(2001, 9, 1), 19, 11),
            New DataPoint(New DateTime(2001, 10, 1), 15, 8),
            New DataPoint(New DateTime(2001, 11, 1), 10, 5),
            New DataPoint(New DateTime(2001, 12, 1), 7, 3)
        }
    End Sub
End Class
Public Class DataPoint
    Public Property Argument As Date
    Public Property Value As Integer
    Public Property Value2 As Integer
    Public Sub New(ByVal argument As Date, ByVal value As Integer, ByVal value2 As Integer)
        Me.Argument = argument
        Me.Value = value
        Me.Value2 = value2
    End Sub
End Class