Telerik UI for Windows 8 HTML

Radar Line 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 Line series the data points on all axes are connected with a line. The following article will introduce you to creating Radar Line series both declaratively and programmatically and the ways you can configure the series.

chart-radar-line-series

This topic contains the following sections.

Defining a Radar Line Series Declaratively

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

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

Defining a Radar Line Series Programmatically

You can create and add Radar Line series programmatically. You need to initialize a new Telerik.UI.Chart.RadarLineSeries 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 radarLineSeriesChart = document.getElementById("radarLineSeriesChart").winControl;
var radarLineSeries = new Telerik.UI.Chart.RadarLineSeries();
radarLineSeries.data = [43, 35, 32, 33, 28, 27];
radarLineSeriesChart.series.push(radarLineSeries);
radarLineSeriesChart.refresh();

Configuring Radar Line 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 Line series.

This section contains the following subsections.

Line Settings

There are two specific properties, that allow the customization of the line series: dashType ('dash', 'dashDot', 'dot', 'longDash', 'longDashDot', 'longDashDotDot', and 'solid') and width. The properties color and opacity are common series properties, but in this case also alter the visual appearance of the line. The code sample below shows how these properties can be used to achieve a different look of the Radar Line series.

There are five specific properties that allow the customization of the line. These are dashType ('dash', 'dashDot', 'dot', 'longDash', 'longDashDot', 'longDashDotDot', and 'solid'), width, opacity, color 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 configuring the line settings for the Radar Line series.

HTML Copy imageCopy
<div id="radarLineLineSettings" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarLine', 
        data: [24, 28, 31, 34, 29, 35],
        dashType: 'longDashDot',
        width: 5,
        color: '#41E50B',
        opacity: '0.7'
    }],
    theme: 'light'
}">
</div>
chart-radar-line-settings

Customizing Markers

By default the data point markers are not displayed. To visualize them, set the visible option value of the markers property to true. This will display the data point markers with their default settings. The markers property exposes the following options to customize the appearance of the markers: background, border settings, size, type ('circle', 'square', and 'triangle'), and visible. Here is an example of how to display and customize the data points markers.

HTML Copy imageCopy
<div id="radarLineMarkers" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarLine', 
        data: [41, 33, 29, 47, 35, 28],
        markers: {
            visible: true,
            background: '#FFE17F',
            border: {
                width: 2,
                color: '#004CFF'
            },
            size: 12,
            type: 'circle'
        }
    }],
    theme: 'light'
}">
</div>
chart-radar-line-markers

Handling Missing Values

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

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

  • 'gap': When this property is set, the line will break before the data point that has no data and will continue when there are at least two neighboring data points with value, so they can be connected with a line.

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

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

HTML Copy imageCopy
<div id="radarLineMissingValues" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarLine', 
        data: [21, 23, null, 37, 45, 48],
        missingValues: 'zero'
    }],
    theme: 'light'
}">
</div>
chart-radar-line-missing-values

See Also