PolarChart Series Types

Topics in this section describe the series types that come with the dxPolarChart widget. Each topic gives an overview of a series type purpose, and details ways to enable and tune it to your needs.

View Demo

Area

The "area" series type is useful when you need to emphasize a change in values. With this series type, data is displayed by a line that joins points, and the shaded area between this line and the zero value. This line is a border and is invisible by default.

AreaPolarSeriesType ChartJS

To understand how polar charts are built, imagine how a chart in a rectangular coordinate system is transformed by rounding its argument axis.

Transformation from Rectangular to Polar Coordinates PolarAreaSeriesType ChartJS

To use the "area" series type, set the 'area' to the type property of the series configuration object.

JavaScript
var polarChartOptions = {
    series: {
        type: 'area'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic. Note that you can use DateTime and Numeric types for points in the data source, as well as the String type. By default, the data of the DateTime and Numeric types is displayed on continuous axes, while string values are displayed on discrete axes (you can manage the axes types using their type option). When continuous axes are used in the widget, the area chart is displayed using a smooth border line.

Smooth PolarAreaSeriesType ChartJS

When either the argument or value axis is discrete, the area chart joins data points by straight lines.

Discrete PolarAreaSeriesType ChartJS

Note that you can use a spider web for polar charts displaying discrete data. For this purpose, set the widget's useSpiderWeb option to true.

SpiderWeb PolarAreaSeriesType ChartJS

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Area Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property. This color will be used for the series' border. The color of the series area will be the same, but a specified capacity will be applied.
  • Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width and color, using the width, color and dashStyle properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Point Options
    Make points visible by setting the visible property of the series' point object. For details on other point options, refer to the Series Points topic.
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the area type are explained in the AreaSeries Reference section. Set the required series options within the series object of the chart's configuration object.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: "USA", grapes: 6.22, oranges: 7.47 },
                  { arg: "China", grapes: 8.65, oranges: 5 },
                  { arg: "Turkey", grapes: 4.25, oranges: 1.71 },
                  { arg: "Italy", grapes: 7.78, oranges: 2.39 },
                  { arg: "India", grapes: 2.26, oranges: 6.26 }];

$("#chartContainer").dxPolarChart({
    dataSource: dataSource,
    useSpiderWeb: false,
    series: [{ valueField: "grapes", name: "Grapes" },
               { valueField: "oranges", name: "Oranges" }],
    commonSeriesSettings: {
        type: "area"
    },
    title: "Fruits Production in 2010 year (Millions of Tons)",
    tooltip: { enabled: true }
});
#chartContainer {
  width: 100%; 
  height: 100%;
}

Bar

In the "bar" series type, data is displayed as sets of rectangular bars with lengths proportional to the values that they represent. Often, "bar" series are used to compare values in different discrete categories such as months, countries, age, etc. When there are several bar series, bars for each argument are displayed side-by-side. If you need to show bars for each series stacked on each other, use the "stackedBar" series type (see Stacked Bar).

PolarBarSeriesType ChartJS

To understand how polar charts are built, imagine how a chart in a rectangular coordinate system is transformed by rounding its argument axis.

Transformation from Rectangular to Polar Coordinates PolarBarSeriesType ChartJS

To use the "bar" series type, set 'bar' to the type property of the series configuration object.

JavaScript
var polarChartOptions = {
    series: {
        type: 'bar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, style and color using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Bar Label Options
    Make bar labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for bar type series are explained in the BarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: "January", day: 6, night: 2 },
    { arg: "February", day: 7, night: 2 },
    { arg: "March", day: 10, night: 3 },
    { arg: "April", day: 14, night: 5 },
    { arg: "May", day: 18, night: 8 },
    { arg: "June", day: 21, night: 11 },
    { arg: "July", day: 22, night: 13 },
    { arg: "August", day: 22, night: 13 },
    { arg: "September", day: 19, night: 11 },
    { arg: "October", day: 15, night: 8 },
    { arg: "November", day: 10, night: 5 },
    { arg: "December", day: 7, night: 3 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{valueField: "day", name: "Day", color: "#ba4d51" }, 
                { valueField: "night", name: "Night", color: "#5f8b95" }],
        commonSeriesSettings: {     
            type: "bar"
        },
        valueAxis: {
            valueMarginsEnabled: false
        },
        title: 'Average Temperature in London'
    });
});

Line

With the "line" series type, data is displayed as points joined by a line. This series type is useful when you need to visualize a trend in data over intervals.

PolarLineSeriesType ChartJS

To understand how polar charts are built, imagine how a chart in a rectangular coordinate system is transformed by rounding its argument axis.

Transformation from Rectangular to Polar Coordinates PolarLineSeriesType ChartJS

The 'line' series type is used in the dxPolarChart widget by default. However, there may be scenarios when it is appropriate to set this series type explicitly. To do this, set 'line' to the type property of the series configuration object.

JavaScript
var polarChartOptions = {
    series: {
        type: 'line'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic. Note that, you can use DateTime and Numeric types for points in the data source, as well as the String type. By default, the data of the DateTime and Numeric types is displayed on continuous axes, while string values are displayed on discrete axes (you can manage the axes types using their type option). When continuous axes are used in the widget, the line chart is displayed using a smooth curve.

Smooth PolarLineSeriesType ChartJS

When either argument or value axis is discrete, the line chart joins data points by straight lines.

Discrete PolarLineSeriesType ChartJS

Note that you can use a spider web for polar charts displaying discrete data. For this purpose, set the widget's useSpiderWeb option to true.

SpiderWeb PolarLineSeriesType ChartJS

Line polar charts are appropriate for data whose values span cyclically repeating arguments. In this instance, set the argumentAxis | period option.

Cyclic PolarLineSeriesType ChartJS

In some scenarios, you may need to close the line chart by joining the first point and the last point. For this purpose, set the series' closed option.

Closed Cyclic PolarLineSeriesType ChartJS

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Line Width
    Change the line width using the series' width property. To set a line width when the line is hovered or selected, set the width property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Line Dash Style
    Set the line's style using the series' dashStyle property. To set a dash style when the line is hovered or selected, set the dashStyle property of the hoverStyle or selectionStyle object defined within the series configuration object.
  • Line Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Label Options
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the line type are explained in the LineSeries Reference section. Set the required series options within the series object of the chart's configuration object.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: "USA", apples: 4.21, grapes: 6.22, lemons: 0.8, oranges: 7.47 },
                  { arg: "China", apples: 3.33, grapes: 8.65, lemons: 1.06, oranges: 5 },
                  { arg: "Turkey", apples: 2.6, grapes: 4.25, lemons: 0.78, oranges: 1.71 },
                  { arg: "Italy", apples: 2.2, grapes: 7.78, lemons: 0.52, oranges: 2.39 },
                  { arg: "India", apples: 2.16, grapes: 2.26, lemons: 3.09, oranges: 6.26 }];

$("#chartContainer").dxPolarChart({
    dataSource: dataSource,
    useSpiderWeb: true,
    series: [{ valueField: "apples", name: "Apples" },
             { valueField: "grapes", name: "Grapes" },
             { valueField: "lemons", name: "Lemons" },
             { valueField: "oranges", name: "Oranges" }],
    commonSeriesSettings: {
        type: "line"
    },
    title: "Fruits Production in 2010 year (Millions of Tons)",
    tooltip: { enabled: true }
});

Scatter

With the "scatter" series type, data is displayed as a collection of points. This series type is often used to display radar points.

PloarScatterSeriesType ChartJS

To understand how polar charts are built, imagine how a chart in a rectangular coordinate system is transformed by rounding its argument axis.

Transformation from Rectangular to Polar Coordinates PolarScatterSeriesType ChartJS

To use the "scatter" series type, set 'scatter' to the type property of the series configuration object.

JavaScript
var polarChartOptions = {
    series: {
        type: 'scatter'
    }
};

To learn how to specify data for a chart series, including "scatter" series, refer to the Data Binding topic.

Note that you can use a spider web for polar charts displaying discrete data. For this purpose, set the widget's useSpiderWeb option to true.

SpiderWeb PolarScatterSeriesType ChartJS

You can change the default appearance using series options. For instance, you can change the following.

  • Point Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Point Options
    Set up the series' point object (see the Series Points topic).
  • Point Labels
    Make point labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for series of the scatter type are explained in the ScatterSeries Reference section. Set the required series options within the series object of the chart's configuration object.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: "January", day: 6, night: 2 },
    { arg: "February", day: 7, night: 2 },
    { arg: "March", day: 10, night: 3 },
    { arg: "April", day: 14, night: 5 },
    { arg: "May", day: 18, night: 8 },
    { arg: "June", day: 21, night: 11 },
    { arg: "July", day: 22, night: 13 },
    { arg: "August", day: 22, night: 13 },
    { arg: "September", day: 19, night: 11 },
    { arg: "October", day: 15, night: 8 },
    { arg: "November", day: 10, night: 5 },
    { arg: "December", day: 7, night: 3 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        margin: {
            top: 50,
            bottom: 50,
            left: 100
        },
        dataSource: dataSource,
        series: [{ valueField: "day", name: "Day", color: "#ba4d51" },
                  { valueField: "night", name: "Night", color: "#5f8b95" }],
        commonSeriesSettings: {
            type: "scatter"
        },
        title: 'Average Temperature in London'
    });
});

Stacked Bar

The "stackedBar" series type is used when there are several series that represent values for discrete categories. With this series type, data is displayed as triangular bars with lengths proportional to the values that they represent. Bars of each subsequent series are stacked on top of the bars of the previous series. The height of the resulting bar shows the combined result of a category.

PolarStackedBarSeriesType ChartJS

To understand how polar charts are built, imagine how a chart in a rectangular coordinate system is transformed by rounding its argument axis.

Transformation from Rectangular to Polar Coordinates PolarStackedBarSeriesType ChartJS

To use the "stackedBar" series type, set the 'stackedBar' to the type property of the series configuration object.

JavaScript
var polarChartOptions = {
    series: {
        type: 'stackedBar'
    }
};

To learn how to specify data for a series, refer to the Data Binding topic.

To change the series default appearance, set the options of the series configuration object. For instance, you can change the following.

  • Bar Color
    A color from the chart's palette is used by default. Set a custom color using the series' color property.
  • Bar Border Options
    Make a border visible by setting the visible property of the series' border object. When the border is visible, you can change its width, line style and color, using the width, dashStyle and color properties of the series' border object. In addition, you can change the border settings when the series is hovered or selected. To do this, set the properties of the border object within the series' hoverStyle or selectionStyle configuration object.
  • Corner Radius
    Set a corner radius for bars using the series' cornerRadius property. This is helpful if you need rounded corners in bars.
  • Stack
    Series values can be located in more than one stack for each argument value. Set the appropriate stack for a series using the stack property. This is helpful if you need to divide series between the required number of logical stacks (e.g., 'men' and 'women' stacks).
  • Bar Label Options
    Make bar labels visible by setting the visible property of the series' label object. For details on other label options, refer to the Series Point Labels topic.

These and other options that can be set for a series of the stackedBar type are explained in the StackedBarSeries Reference section. Set the required series options within the series object of the chart's configuration object.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{
    arg: "USA",
    usa_male: 134782000,
    usa_female: 140786000
}, {
    arg: "Brasil",
    brazil_male: 85127000,
    brazil_female: 87730000
}, {
    arg: "Russia",
    rus_male: 68278000,
    rus_female: 64750000
}, {
    arg: "Japan",
    japan_male: 52387000,
    japan_female: 64586000
}, {
    arg: "Germany",
    ger_male: 40450000,
    ger_female: 42344000
}, {
    arg: "Great Britain",
    gb_male: 23486000,
    gb_female: 30206000
}]


$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Men-Women Ratio",
        commonSeriesSettings: {
            type: "stackedbar"
        },
        valueAxis: {
            valueMarginsEnabled: false,
            label: { format: 'largeNumber' }
        },

        series: [{
            name: "Men in USA",
            valueField: "usa_male"
        }, {
            name: "Women in USA",
            valueField: "usa_female"
        }, {
            name: "Men in Brazil",
            valueField: "brazil_male"
        }, {
            name: "Women in Brazil",
            valueField: "brazil_female"
        }, {
            name: "Men in Russia",
            valueField: "rus_male"
        }, {
            name: "Women in Russia",
            valueField: "rus_female"
        }, {
            name: "Men in Japan",
            valueField: "japan_male"
        }, {
            name: "Women in Japan",
            valueField: "japan_female"
        }, {
            name: "Men in Germany",
            valueField: "ger_male"
        }, {
            name: "Women in Germany",
            valueField: "ger_female"
        }, {
            name: "Men in the Great Britain",
            valueField: "gb_male"
        }, {
            name: "Women in the Great Britain",
            valueField: "gb_female"
        }]
    });
});