Telerik UI for Windows 8 HTML

Polar Scatter series visualize data points in a polar coordinate system. Each data point is defined by an angle (direction) and a distance from the center point. The vertex of the angle is the chart's center point and by default the starting ray is the horizontal line starting from the vertex going right. The data point will be visualized on the second (resulting) ray of the angle at a distance from the center point equal to the second polar coordinate. In the figure below, you can see the polar coordinate system coordinates and how they are used.


This topic contains the following sections.

Defining a Polar Scatter Series Declaratively

To define a Polar Scatter series declaratively, add an object with a type property set to 'polarScatter' to the Telerik.UI.RadChart.series array.

The simplest way to add data to a Polar Scatter series, is to assign the data property an array with the data. Each data point is also represented by an array with two members. The first member is the angle in degrees (0 to 360). The second member is the distance from the chart center point.

HTML Copy imageCopy
<div id="polarScatterSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarScatter',
        data: [
            [ 45, 56.2],
            [ 78, 34.5],
            [ 112, 45.7],
            [ 168, 41.1],
            [ 221, null],
            [ 254, 52.8]
    theme: 'light'       

Defining a Polar Scatter Series Programmatically

To create and add a Polar Scatter series programmatically, you need to create a new Telerik.UI.Chart.PolarScatterSeries 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 polarScatterSeriesChart = document.getElementById("polarScatterSeriesChart").winControl;
var polarScatterSeries = new Telerik.UI.Chart.PolarScatterSeries(); = [
    [105, 43.7],
    [163, 36.5],
    [231, 48.1],
    [296, 22]

Configuring Polar Scatter Series

Apart from the common configuration settings listed in RadChart Series Common Configuration, there a few more specific configuration options that you can use to customize the look and behavior of the Polar Scatter series.

This section lists the following configuration scenarios:

Setting the Polar Scatter Series Fields

You can use an array of JavaScript objects as data for the Polar Scatter series. You need to specify data fields that the series will use to get values. There are two available field settings for the Polar Scatter series representing the two polar coordinates. Here is a description of their usage:

  • xField: The data field that holds the data points' angle coordinate.

  • yField: The data field that holds the data points' distance coordinate.

Here is an example of how to use the above properties with a dataSource. Their use is identical if you assign an array of JavaScript objects to the series data property.

HTML Copy imageCopy
<div id="polarScatterFields" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarScatter',
        xField: 'angle',
        yField: 'value'
    dataSource: {
        data: [
            { angle: 0, value: 15.3},
            { angle: 60, value: 25.1},
            { angle: 120, value: 16.7},
            { angle: 180, value: 13.1},
            { angle: 240, value: 31.1},
            { angle: 300, value: 19.2},
            { angle: 360, value: 15.3}
    theme: 'light'       

Customizing Markers

To modify the appearance of the data point makers, use the markers property. It exposes the following settings: background, border settings, size, type ('circle', 'square', and 'triangle'), and visible. Here is an example of a Polar Scatter series with customized data point markers and below is an image of the resulting chart.

HTML Copy imageCopy
<div id="polarScatterMarkers" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarScatter',
        data: [
            [ 0, 16.2],
            [ 60, 23.1],
            [ 120, 27.7],
            [ 180, 21.5],
            [ 240, 12.1],
            [ 300, 24.8],
            [ 360, 16.2],
        markers: {
            background: '#FFF',
            border: {
                width: 3,
                color: '#CE0613'
            size: 25,
            type: 'triangle'
    theme: 'light'       

See Also