WPF Charting Documentation - SciChart WPF Charts SDK v5.x
The Radar Chart Type

The Radar Chart has been added to SciChart WPF v5. This chart type allows you to specify a number of series as areas or lines on a spider-web background. Use this chart type to show relationships between a number of variables.

 

 

Declaring a Radar Chart

To declare a radar chart, use the following code:

Radar Chart
Copy Code
<s:SciChartRadarSurface CentralAxisOffset="0" AxisAngleOffset="0" RenderableSeries="{s:SeriesBinding RenderableSeries}">
    <s:SciChartRadarSurface.RadarAxes>
        <s:RadarAxis AxisTitle="Sales"
                    DrawLabels="True"
                    DrawMajorGridLines="True"
                    Id="salesId"
                    IsLabelCullingEnabled="True"
                    VisibleRange="0, 100"
                    GridLinesType="SpiderWeb" />
        <s:RadarAxis AxisTitle="Marketing"
                    Id="marketingId"
                    VisibleRange="0, 100" />
        <s:RadarAxis AxisTitle="Development"
                    Id="developmentId"
                    VisibleRange="0, 100" />
        <s:RadarAxis AxisTitle="Customer Support"
                    Id="customerSupportId"
                    VisibleRange="0, 100" />
        <s:RadarAxis AxisTitle="Information Technology"
                    Id="informationTechnologyId"
                    VisibleRange="0, 100" />
        <s:RadarAxis AxisTitle="Administration"
                    Id="administrationId"
                    VisibleRange="0, 100" />
    </s:SciChartRadarSurface.RadarAxes>
    
    <s:SciChartRadarSurface.ChartModifiers>
        <s:RadarTooltipModifier ShowTooltip="True" />
        <s:RadarLegendModifier Orientation="Vertical" ShowLegend="True" />
        <s:RadarSeriesSelectionModifier ExecuteWhen="MouseLeftButton" AllowsMultiSelection="False" IsEnabled="True" />
        <s:RadarDragDataPointModifier IsEnabled="True" />
    </s:SciChartRadarSurface.ChartModifiers>
</s:SciChartRadarSurface>

Ia ViewModel if using the MVVM SeriesBinding API, you need to declare the RenderableSeries. Series can also be added in code behind by directly manipulating the SciChartRadarSurface.RenderableSeries property.

Radar Chart RenderableSeries
Copy Code
public class UsingRadarChartExampleViewModel : BaseViewModel
{
    private readonly ObservableCollection<IRadarPolygonRenderableSeriesViewModel> _renderableSeries;
    public UsingRadarChartExampleViewModel()
    {
        var productADataSeries = new ObservableCollection<IRadarPointViewModel>
        {
            new RadarPointViewModel {DataValue = 75, AxisId = "salesId"},
            new RadarPointViewModel {DataValue = 95, AxisId = "marketingId"},
            new RadarPointViewModel {DataValue = 33, AxisId = "developmentId"},
            new RadarPointViewModel {DataValue = 40, AxisId = "customerSupportId"},
            new RadarPointViewModel {DataValue = 15, AxisId = "informationTechnologyId"},
            new RadarPointViewModel {DataValue = 20, AxisId = "administrationId"},
        };
        var productBDataSeries = new ObservableCollection<IRadarPointViewModel>
        {
            new RadarPointViewModel {DataValue = 15, AxisId = "salesId"},
            new RadarPointViewModel {DataValue = 66, AxisId = "marketingId"},
            new RadarPointViewModel {DataValue = 40, AxisId = "developmentId"},
            new RadarPointViewModel {DataValue = 90, AxisId = "customerSupportId"},
            new RadarPointViewModel {DataValue = 45, AxisId = "informationTechnologyId"},
            new RadarPointViewModel {DataValue = 10, AxisId = "administrationId"},
        };
        var productCDataSeries = new ObservableCollection<IRadarPointViewModel>
        {
            new RadarPointViewModel {DataValue = 30, AxisId = "salesId"},
            new RadarPointViewModel {DataValue = 42, AxisId = "marketingId"},
            new RadarPointViewModel {DataValue = 15, AxisId = "developmentId"},
            new RadarPointViewModel {DataValue = 30, AxisId = "customerSupportId"},
            new RadarPointViewModel {DataValue = 90, AxisId = "informationTechnologyId"},
            new RadarPointViewModel {DataValue = 80, AxisId = "administrationId"},
        };
        var productDDataSeries = new ObservableCollection<IRadarPointViewModel>
        {
            new RadarPointViewModel {DataValue = 20, AxisId = "salesId"},
            new RadarPointViewModel {DataValue = 22, AxisId = "marketingId"},
            new RadarPointViewModel {DataValue = 84, AxisId = "developmentId"},
            new RadarPointViewModel {DataValue = 15, AxisId = "customerSupportId"},
            new RadarPointViewModel {DataValue = 40, AxisId = "informationTechnologyId"},
            new RadarPointViewModel {DataValue = 5, AxisId = "administrationId"},
        };
        _renderableSeries = new ObservableCollection<IRadarPolygonRenderableSeriesViewModel>()
        {
            new RadarPolygonRenderableSeriesViewModel()
            {
                DataSeries = productADataSeries,
                SeriesName = "Product A",
                Stroke = Colors.Blue,
                StrokeThickness = 2,
                StyleKey = "BlueRadarSeriesStyle",
                Fill = new SolidColorBrush {Color = Colors.Blue, Opacity = 0.4},
                PointMarker = new TrianglePointMarker { Width = 10, Height = 10, Fill = Colors.Blue, StrokeThickness = 0}
            },
            new RadarPolygonRenderableSeriesViewModel()
            {
                DataSeries = productBDataSeries,
                SeriesName = "Product B",
                Stroke = Colors.Coral,
                StrokeThickness = 2,
                StyleKey = "CoralRadarSeriesStyle",
                Fill = new SolidColorBrush {Color = Colors.Coral, Opacity = 0.4},
                PointMarker = new EllipsePointMarker { Width = 10, Height = 10, Fill = Colors.Coral, StrokeThickness = 0}
            },
            new RadarPolygonRenderableSeriesViewModel()
            {
                DataSeries = productCDataSeries,
                SeriesName = "Product C",
                Stroke = Colors.Green,
                StrokeThickness = 2,
                StyleKey = "GreenRadarSeriesStyle",
                Fill = new SolidColorBrush {Color = Colors.Green, Opacity = 0.4},
                PointMarker = new CrossPointMarker { Width = 10, Height = 10, Stroke = Colors.Green, StrokeThickness = 2}
            },
            new RadarPolygonRenderableSeriesViewModel()
            {
                DataSeries = productDDataSeries, 
                SeriesName = "Product D",
                Stroke = Colors.YellowGreen,
                StrokeThickness = 2,
                StyleKey = "YellowGreenRadarSeriesStyle",
                Fill = new SolidColorBrush {Color = Colors.YellowGreen, Opacity = 0.4},
                PointMarker = new SquarePointMarker { Width = 10, Height = 10, Fill = Colors.YellowGreen, StrokeThickness = 0}
            }
        };
    }
    public ObservableCollection<IRadarPolygonRenderableSeriesViewModel> RenderableSeries
    {
        get { return _renderableSeries; }
    }
    
}

 

Examples of using the Radar Chart

The SciChart WPF Examples Suite contains two examples of creating a radar chart. One with standard axis, and one with custom axis.

See the examples 2D Charts > Create a Radar Chart > Radar Chart Customization Example for further information.

 

 

 

 


SCICHART ® is a Registered Trademark in the UK, US and EEC. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!