Telerik UI for Windows 8 HTML

Radar series visualize data on a circular chart with multiple axes starting from one center point. The chart is divided into equal-sized slices with each side of the slices being a value axis. In the Radar Area series the area enclosed by the values on all the axes is colored and represents the radar area.

chart-radar-area-series

This topic contains the following sections.

Defining a Radar Area Series Declaratively

You can define a Radar Area series declaratively either in the mark-up or in RadChart's constructor. You have to add an object with a type property set to 'radarArea' to the Telerik.UI.RadChart.series array.

HTML Copy imageCopy
<div id="radarAreaSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarArea', 
        data: [47, 43, 54, 44, 43, 48]
    }],
    theme: 'light'       
}">
</div>

Defining a Radar Area Series Programmatically

You can create and add Radar Area series programmatically. You need to initialize a new Telerik.UI.Chart.RadarAreaSeries object and add it to the Telerik.UI.RadChart.series array. Call the refresh() method for the changes to take effect.

JavaScript Copy imageCopy
var radarAreaSeriesChart = document.getElementById("radarAreaSeriesChart").winControl;
var radarAreaSeries = new Telerik.UI.Chart.RadarAreaSeries();
radarAreaSeries.data = [ 43, 35, 32, 33, 28, 27];
radarAreaSeriesChart.series.push(radarAreaSeries);
radarAreaSeriesChart.refresh();

Configuring Radar Area Series

Apart from the common configuration settings listed in this article: RadChart Series Common Configuration, there a few more specific configuration settings that you can use to customize the look and behavior of the Radar Area series.

This section contains the following subsections.

Line Settings

Use the line property to customize the area border. The line property exposes three options: color, opacity and width. Below is an example of how you can use the line settings.

Use the line property to customize the area border. The line property exposes four options: color, opacity, width and style. The style option for this series can have two values — "normal" and "smooth" with "normal" being the default option value.Below is an example of how you can use the line settings.

HTML Copy imageCopy
<div id="radarAreaLineSettings" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarArea', 
        data: [35, 47, 32, 39, 41, 52],
        line: {
            color: '#C64913',
            opacity: 0.6,
            width: 5
        }
    }],
    theme: 'light'       
}">
</div>

And here is an image of the resulting Radar Area series.

chart-radar-area-line

Customizing Markers

The markers property of the Radar Area series exposes multiple settings for customization of the data point markers. By default the data point markers are not displayed. To display them, set the visible option of the markers property to true. Once the markers are visible they will be displayed with their default settings. Here is a list of the options you can use to modify the markers appearance: background, border settings, size, and type ('circle', 'square', and 'triangle'). Here is a code sample with the data point markers displayed and their visual appearance customized.

HTML Copy imageCopy
<div id="radarAreaMarkers" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarArea', 
        data: [52, 39, 45, 35, 51, 36],
        markers: {
            visible: true,
            background: '#FFE17F',
            border: {
                width: 3,
                color: '#FF7C19'
            },
            size: 10,
            type: 'square'
        }
    }],
    theme: 'light'       
}">
</div>
chart-radar-area-markers

Handling Missing Values

To specify how missing values are handled, use the missingValues property. There are two options you can choose from. Here are brief descriptions of their usage:

  • 'interpolate': When this property value is set, the missing points will be interpolated from neighboring data points.

  • 'zero': This is the default property value. Use this property to specify that the missing values should be assigned a value of zero.

Below is an example of a Radar Area series with a missing value (null) and a missingValues property set to 'interpolate'.

HTML Copy imageCopy
<div id="radarAreaMissingValues" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarArea', 
        data: [43, 49, null, 45, 41, 46],
        missingValues: 'interpolate'
    }],
    theme: 'light'       
}">
</div>
chart-radar-area-missing-values

See Also