Telerik UI for Windows 8 HTML

Radar Column series visualize data in radial columns starting from one center point. The circle is divided into equal portions depending on the number of columns and each column group occupies one portion. The following article will introduce you to creating Radar Column series both declaratively and programmatically and the ways you can configure the series.

chart-radar-column-series

This topic contains the following sections.

Defining a Radar Column Series Declaratively

To define a Radar Column series declaratively in the mark-up or in RadChart's constructor, add an object with a type property set to 'radarColumn' to the Telerik.UI.RadChart.series array.

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

Defining a Radar Column Series Programmatically

To create and add a Radar Column series programmatically, you need to create a new Telerik.UI.Chart.RadarColumnSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call the refresh() method for the changes to take effect.

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

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

This section contains the following subsections.

Controlling the Angle between Categories

Based on your requirement, you can increase or decrease the angle between category clusters. This is done by setting the gap property to an appropriate numeric value. This value represents the proportion between the angle between category clusters and the column angle (i.e. "gap: 10" means that the column angle will be one tenth of the angle between category clusters). The default property values is 1. In the example below the gap property value is set to 0.5 and the column angle is two times the angle between category clusters.

HTML Copy imageCopy
<div id="radarColumnGap" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarColumn', 
        data: [25, 33, 38, 26, 41, 31, 41],
        gap: 0.5
    }],
    theme: 'light'       
}">
</div>
chart-radar-column-gap

Controlling the Angle between Columns inside a Category Cluster

Having more than one Radar Column series on a chart results in columns grouping to form category clusters. You can modify the angle between columns inside category clusters by using the spacing property. The spacing property value represents the proportion between the angle between columns in a category cluster and the angle of the radial column (i.e. "spacing: 1" means that the column angle will be equal to the angle between columns in a category cluster). The default property value is 0. The example below shows a chart with two Radar Column series and a spacing property values set to 0.5. This means the angle between the columns in a category cluster is half the angle of a radial column.

HTML Copy imageCopy
<div id="radarColumnSpacing" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarColumn', 
        data: [41, 45, 29, 38, 24, 39, 36],
        spacing: 0.5
    }, {
        type: 'radarColumn', 
        data: [25, 33, 38, 26, 41, 31, 41]
    }],
    theme: 'light'       
}">
</div>
chart-radar-column-spacing

Gradient Options

To specify a gradient for the Radar Column series, use the overlayGradient property. By default the property value is 'none' (a solid color fills the series), but you can also set it to 'roundedBevel', 'sharpBevel', or 'glass'.

HTML Copy imageCopy
<div id="radarColumnGradient" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'radarColumn', 
        data: [35, 56, 38, 49, 51],
        overlayGradient: 'sharpBevel'
    }],
    theme: 'light'       
}">
</div>
chart-radar-column-gradient

See Also