Configuration argumentAxis

Specifies argument axis options for the PolarChart widget.

Type: Object

For charting, the polar coordinate system is used to determine each point uniquely on a plane through two numbers, the argument and the value of the point. A circular and straight lines (the axis of arguments and the axis of values) are specified to define the coordinates. To define the argument axis, use the argumentAxis configuration object. To define the value axis, use the valueAxis configuration object. To set the properties of all axes to a common value, use the commonAxisSettings configuration object. This object exposes the properties that can be specified for all axes simultaneously. Note that the value specified for an axis individually (in the argumentAxis or valueAxis object) overrides the value specified in the commonAxisSettings object.

Show Example:
jQuery

This example shows the argument axis of a continuous type. Here, the axis' start angle is 90 degrees and labels are customized to indicate degrees as the unit of the axis' values. In addition, the minor grid lines of the axis are made invisible and major grid lines are drawn with an interval equal to 10.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{type: 'line'}],
        argumentAxis: {
            minorGrid: { visible: false },
            tickInterval: 10,
            label: {
                customizeText: function(arg){
                    return arg.value + '&deg';
                },
            },
            startAngle: 90
        },
        legend: { visible: false }
    });
});

argumentType

Specifies the desired type of axis values.

Type: String
Default Value: undefined
Accepted Values: 'numeric' | 'datetime' | 'string'

The type of the axis values is determined based on the type of the values specified in the corresponding data source field of the chart's series. If arguments are specified as numeric values in a series data source, the argument axis values will also be of the numeric type. The same logic is used when string or date-time arguments are specified in the data source.

In some scenarios, you may need the type of the arguments that are specified in the data source to be converted to another type. In this instance, specify the desired type for the axis values using the argumentType property.

Show Example:
jQuery

Here, the 'year' field of the 'dataSource' array is intentionally set in the 'numeric' format. To display the values of this field in the 'datetime' format on the chart, use the argumentType option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: -631166400000, val: 546},
    { year: 2524593600000, val: 650 },
    { year: 2208974400000, val: 680 },
    { year: 1893441600000, val: 704 },
    { year: 1577822400000, val: 721 },
    { year: 1262289600000, val: 728 },
    { year: 946670400000, val: 730 },
    { year: 631137600000, val: 721 },
    { year: 315518400000, val: 694 },
    { year: -14400000, val: 656 },
    { year: -315633600000, val: 605 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [
            {
                argumentField: 'year',
                valueField: 'val'
            }
        ],
        legend: {visible: false},
        argumentAxis: {
            argumentType: 'datetime',
            label: {
                format: 'year'
            }
        }
    });
});

axisDivisionFactor

Specifies a coefficient for dividing the argument axis.

Type: Number
Default Value: 50

The argument axis is divided by default so that the labels corresponding to the ticks/grid lines do not overlap each other. If you need to make the axis tick interval larger or smaller, use the axisDivisionFactor property. This property value is a coefficient used internally to calculate the distance between axis labels. This allows you to set an axis division without knowledge of the actual axis values.

NOTE: This option is used for continuous and logarithmic argument axes only.

Show Example:
jQuery

In the example below, the argument axis axisDivisionFactor option is set to 10.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,

        series: [{ type: "line" }],
        legend: {
            visible: false
        },
        argumentAxis: {
            type: 'continuous',
            axisDivisionFactor: 10
        }
    });
});

categories

Specifies the order in which arguments (categories) are arranged on the discrete argument axis.

Type: Array

If you specify the chart's data using a common array of objects, these objects may be displayed in a random order. If you set the chart's data for each series individually, the order in which the series are positioned in the series array can also be random. In these instances, the resulting argument order on the discrete argument axis may not be appropriate. To specify the order of categories (arguments on a discrete argument axis), assign an array of category names to the categories property.

Show Example:
jQuery

Here, years in the chart's data source are represented as strings. By default, they will be displayed on the argument axis in the same order as they are listed in the data source. To display them in another order, the categories option is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1950', europe: 546, americas: 332, africa: 227 },
    { year: '2050', europe: 650, americas: 1231, africa: 1937 },
    { year: '2040', europe: 680, americas: 1178, africa: 1665 },
    { year: '2030', europe: 704, americas: 1110, africa: 1416 },
    { year: '2020', europe: 721, americas: 1027, africa: 1189 },
    { year: '2010', europe: 728, americas: 935, africa: 982 },
    { year: '2000', europe: 730, americas: 836, africa: 797 },
    { year: '1990', europe: 721, americas: 721, africa: 623 },
    { year: '1980', europe: 694, americas: 614, africa: 471 },
    { year: '1970', europe: 656, americas: 513, africa: 361 },
    { year: '1960', europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedBar'
        },
        series: [
        { valueField: 'europe', name: 'Europe' },
        { valueField: 'americas', name: 'Americas' },
        { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            categories: ['1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020', '2030', '2040', '2050']
        }
    });
});

color

Specifies the color of the line that represents an axis.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

Show Example:
jQuery

In this example, the argument axis is colored in green.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, val: 546 },
    { year: 2050, val: 650 },
    { year: 2040, val: 680 },
    { year: 2030, val: 704 },
    { year: 2020, val: 721 },
    { year: 2010, val: 728 },
    { year: 2000, val: 730 },
    { year: 1990, val: 721 },
    { year: 1980, val: 694 },
    { year: 1970, val: 656 },
    { year: 1960, val: 605 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [
            {
                argumentField: 'year',
                valueField: 'val',
                type: 'line',
                closed: false
            }
        ],
        legend: { visible: false },
        argumentAxis: {
            color: 'green'
        }
    });
});

constantLines[]

Defines an array of the argument axis constant lines.

Type: Array
Cannot be used in themes.

A constant line is a straight line that can be used to display, for example, an asymptote of a graph. To display constant lines on a chart, assign an array of objects specifying the options of each constant line to the constantLines field. It is necessary to set the value option within these objects. The other options can be set if required.

You can customize the appearance of all the argument axis constant lines at once. For this purpose, use the argumentAxis | constantLineStyle configuration object. Note that the options that are set within the argumentAxis | constantLine object override the corresponding options that are set within the argumentAxis | constantLineStyle object.

Show Example:
jQuery

In the following example, each argument axis constant line is drawn in a different color and width.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{
                value: 1955,
                color: 'lightsalmon',
                width: 1
            }, {
                value: 1992,
                color: 'orange',
                width: 2
            }, {
                value: 2013,
                color: 'orangered',
                width: 3
            }]
        }
    });
});

constantLineStyle

Specifies the appearance of all the widget's constant lines.

Type: Object

Use this object to set the appearance options for the constant lines of both the argument and value axes. For example, you can change the color, dash style and width of the line using corresponding options or define the look of the labels using the label object.

To specify styles for the constant lines of the argument and value axis separately, use the constantLineStyle object within the argumentAxis or valueAxis configuration object correspondingly. Note that the options that are set within these objects override the corresponding options that are set within the commonAxisSettings | constantLineStyle object.

In addition, you can define the appearance of each constant line individually. For more information, refer to the argumentAxis | constantLines or valueAxis | constantLines object description.

Show Example:
jQuery

In the following example, several appearance options of the argument axis constant lines are changed. These lines are drawn in the yellowgreen color with a 2-pixel width. The dash style of the lines is changed to longDash. In addition, the constant line labels are colored in lightskyblue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
            constantLineStyle: {
                color: 'yellowgreen',
                dashStyle: 'longDash',
                width: 2,
                label: {
                    font: { color: 'lightskyblue' }
                }
            }
        }
    });
});

discreteAxisDivisionMode

Specifies whether ticks/grid lines of a discrete axis are located between labels or cross the labels.

Type: String
Default Value: 'betweenLabels'
Accepted Values: 'betweenLabels' | 'crossLabels'

When a discrete axis is divided, its ticks/grid lines are located between labels by default. If this is not appropriate, use the discreteAxisDivisionMode property to set the required mode for positioning ticks and grid lines on a discrete axis.

NOTE: This option is not designed to work in the spider web mode.

View Demo

Show Example:
jQuery

In the following example, you can note the difference between two modes of positioning ticks and grid lines on discrete axes. Use the drop-down list in the bottom to change the value of the discreteAxisDivisionMode option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    discreteAxisDivisionMode:
    <select id="dropdownListSelector">
        <option value="betweenLabels">betweenLabels</option>
        <option value="crossLabels">crossLabels</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedBar'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            type: 'discrete',
            categories: [1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020, 2030, 2040, 2050]
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $("#chartContainer").dxPolarChart("instance");
        chart.option({
            argumentAxis: { discreteAxisDivisionMode: this.value }
        });
    });
});

firstPointOnStartAngle

Specifies whether or not to display the first point at the angle specified by the startAngle option.

Type: Boolean
Default Value: false

This option is specific to a discrete argument axis.

View Demo

Show Example:
jQuery

In the example below, the fist category, "N" (north), is displayed directly to the north of the chart, because the "firstPointOnStartAngle" option is set to true and the start angle coincides with the north direction.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$("#chartContainer").dxPolarChart({
    dataSource: dataSource,
    title: "Wind Rose, Madrid (October 2014)",
    commonSeriesSettings: {
        type: "line",
        argumentField: 'direction'
    },
    series: [
        { valueField: "day", name: 'day' },
        { valueField: "night", name: 'night' }
    ],
    argumentAxis: {
        discreteAxisDivisionMode: "crossLabels",
        firstPointOnStartAngle: true
    }
});

grid

An object defining the configuration options for the grid lines of an axis in the PolarChart widget.

Type: Object

Grid lines are the reference lines used to improve the readability of a chart's visual data. The grid object exposes the properties that allow you to specify visibility and appearance settings for axis grid lines. To learn more about axis grid lines and their options, refer to the Grid topic.

PolarChart Grid Lines

hoverMode

Specifies the elements that will be highlighted when the argument axis is hovered over.

Type: String
Default Value: 'none'
Accepted Values: 'none' | 'allArgumentPoints'

The following values are accepted:

  • none
    Nothing happens when the argument axis is hovered over.
  • allArgumentPoints
    The points that correspond to the argument that is currently hovered over are highlighted. To change the way the points are highlighted, set the options within the series | point | hoverStyle object.
Show Example:
jQuery

To highlight a set of points, hover over one of the argument axis' labels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            type: 'discrete',
            categories: [1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020, 2030, 2040, 2050],
            hoverMode: 'allArgumentPoints'
        }
    });
});

inverted

Indicates whether or not an axis is inverted.

Type: Boolean
Default Value: false

When an axis is inverted, the maximum and minimum values are reversed. As a result, the axis values increase in a direction that is opposite to the initial direction. The chart series are also inverted.

View Demo

Show Example:
jQuery

Use the check box located in the bottom to invert the argument axis.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="invertedCheckbox"> Inverted Argument Axis
</div>
var dataSource = [
    { year: 1950, val: 546 },
    { year: 2050, val: 650 },
    { year: 2040, val: 680 },
    { year: 2030, val: 704 },
    { year: 2020, val: 721 },
    { year: 2010, val: 728 },
    { year: 2000, val: 730 },
    { year: 1990, val: 721 },
    { year: 1980, val: 694 },
    { year: 1970, val: 656 },
    { year: 1960, val: 605 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [
            {
                argumentField: 'year',
                valueField: 'val',
                type: 'line',
                closed: false
            }
        ],
        legend: { visible: false }
    });


    $("#invertedCheckbox").change(function () {
        var chart = $("#chartContainer").dxPolarChart("instance");
        chart.option({
            argumentAxis: { inverted: this.checked }
        });
    });
});

label

Specifies options for argument axis labels.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. To specify custom settings for the argument axis labels, use the label configuration object. To set a common value for labels on all axes, use the commonAxisSettings | label configuration object. This object exposes the properties that can be specified for labels on all axes at once. Note that values specified for the argument axis individually (in the argumentAxis | label object) override values that are specified for all axes (in the commonAxisSettings | label object).

Show Example:
jQuery

In the following example, the labels' indent from the argument axis is set to 25 pixels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            label: { indentFromAxis: 25 }
        }
    });
});

logarithmBase

Specifies the value to be raised to a power when generating ticks for a logarithmic axis.

Type: Number
Default Value: 10

By default, ticks on a logarithmic axis are generated on a base of 10, i.e., 0.1, 1, 10, 100, 1000 etc. But you can specify a base you require using the logarithmBase option. For example, if you set this option to 5, the following ticks will be generated: 0.5, 5, 25, 125, 625, etc.

NOTE: The value assigned to the logarithmBase option should be greater than 1.

Show Example:
jQuery

Use the set of radio buttons located under the chart to change the argument axis' logarithmBase option at runtime.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:20px;max-width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    logarithmBase: 
    <input type="radio" name="logarithmBase" value="5" /> 5 
    <input type="radio" name="logarithmBase" value="10" checked /> 10 
    <input type="radio" name="logarithmBase" value="50" /> 50
</div>
var dataSource = [
    { pressure: 0.00002, level: 0 },
    { pressure: 632, level: 150 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: [
            { arg: 1, val: 2 },
            { arg: 3, val: 4 },
            { arg: 6, val: 8 },
            { arg: 9, val: 16 },
            { arg: 12, val: 32 },
            { arg: 15, val: 64 },
            { arg: 18, val: 128 },
            { arg: 21, val: 256 },
            { arg: 24, val: 512 }
                         
        ],
        series: [{
            type: "area",
            label: { visible: true },
            border: { visible: true }
        }],
        argumentAxis: {
            type: "logarithmic"
        },
        valueAxis: {
            type: "logarithmic",
            logarithmBase: 2,
            valueMarginEnabled: false
        },
        legend: { visible: false }
    });

    $("input[name='logarithmBase']").change(function () {
        var chart = $('#chartContainer').dxPolarChart('instance');
        chart.option({
            argumentAxis: { logarithmBase: +$(this).val() }
        })
    });
});

minorGrid

Specifies the options of the minor grid.

Type: Object

In addition to the major grid built on major ticks, the PolarChart widget provides the minor grid that is built on minor ticks. The lines of the minor grid extend from the minor ticks throughout the entire chart's plot.

NOTE: Neither minor ticks, nor the minor grid can be used if the axis is discrete.

To specify the appearance of grid lines, use the options of the minorGrid object. Declared within the commonAxisSettings object, the minorGrid object changes the appearance of value and argument axes simultaneously. To change the appearance of the value or argument axis individually, declare the minorGrid object in the argumentAxis or valueAxis object respectively. Settings specified individually override those that are set in the commonAxisSettings object.

To make the minor grid visible, set the visible option of the minorGrid object to true. Additionally, you can change the color, opacity and width of the grid lines using the corresponding options.

NOTE: We recommend you use the minor grid only in conjunction with the major grid.

Show Example:
jQuery

In this example, the argument axis minor grid lines are visible with the opacity option set to 0.75.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            minorGrid: {
                opacity: 0.75
            }
        }
    });
});

minorTick

Specifies the options of the minor ticks.

Type: Object

In addition to major ticks, the PolarChart widget provides the capability to draw minor ticks. Minor ticks divide an axis segment that lies between two neighboring major ticks. To specify how to generate minor ticks, use the minorTickInterval or minorTickCount options.

To configure the appearance of minor ticks, use the options of the minorTick object. Declared within the commonAxisSettings object, the minorTick object sets options for all minor ticks. To change the appearance of the minor ticks that belong to the argument or value axis individually, declare the minorTick object in the argumentAxis or valueAxis object respectively. Settings specified individually override those that are set in the commonAxisSettings object.

By default, minor ticks are hidden. To make them visible, assign true to the visible option of the minorTick object. Additionally, you can change the color, opacity and width of the minor ticks using the corresponding options.

NOTE: Minor ticks cannot be displayed on a discrete axis.

Show Example:
jQuery

In this example, the argument axis minor ticks are visible with the opacity option set to 0.75.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            minorGrid: {
                visible: false
            },
            minorTick: {
                visible: true,
                opacity: 0.75
            }
        }
    });
});

minorTickCount

Specifies the number of minor ticks between two neighboring major ticks.

Type: Number
Default Value: undefined

NOTE: If you set both the minorTickCount and the minorTickInterval options, the minorTickCount option will be ignored.

Show Example:
jQuery

In this example, the "minorTickCount" option is set to 10.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
                 { arg: 30, val: 1.7 },
                 { arg: 45, val: 0 },
                 { arg: 60, val: 1.7 },
                 { arg: 90, val: 0 },
                 { arg: 120, val: 1.7 },
                 { arg: 135, val: 0 },
                 { arg: 150, val: 1.7 },
                 { arg: 180, val: 0 },
                 { arg: 210, val: 1.7 },
                 { arg: 225, val: 0 },
                 { arg: 240, val: 1.7 },
                 { arg: 270, val: 0 },
                 { arg: 300, val: 1.7 },
                 { arg: 315, val: 0 },
                 { arg: 330, val: 1.7 },
                 { arg: 360, val: 0 }];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{type: 'line'}],
        argumentAxis: {
            minorTickCount: 10,
        },
        legend: { visible: false }
    });
});

minorTickInterval

Specifies the interval between minor ticks.

Default Value: undefined
Accepted Values: 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'

To divide a lengthy chart axis into shorter segments, major and minor ticks are used. Major ticks are accompanied with axis labels. Between each pair of neighboring major ticks, several minor ticks reside. Minor ticks are required when major ticks are far from each other. To set a custom minor tick interval, use the minorTickInterval option. If this option is not set, minor ticks are arranged automatically.

In case your axis displays numbers, assign a numeric value to this option. If the axis displays dates, assign one of the predefined string values. To set the interval to several days, hours, etc., assign an object with the corresponding field specified (days, hours or another field). Note that this object must contain only one of the fields described in this section.

NOTE: The minorTickInterval option can be applied to a continuous axis only. For logarithmic axes, use the minorTickCount option.

Show Example:
jQuery

In the following example, the argument axis minor tick interval is set to 20 minutes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(2012, 3, 2, 6, 35), traffic: 3 },
    { date: new Date(2012, 3, 2, 7, 50), traffic: 8 },
    { date: new Date(2012, 3, 2, 9, 0), traffic: 7 },
    { date: new Date(2012, 3, 2, 10, 20), traffic: 5 },
    { date: new Date(2012, 3, 2, 10, 50), traffic: 5 },
    { date: new Date(2012, 3, 2, 11, 35), traffic: 6 },
    { date: new Date(2012, 3, 2, 12, 14), traffic: 7 },
    { date: new Date(2012, 3, 2, 13, 42), traffic: 8 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{
            valueField: 'traffic',
            argumentField: 'date'
        }],
        argumentAxis: {
            tickInterval: { hours: 1 },
            minorTickInterval: { minutes: 20}
        },
        animation: { enabled: false },
        legend: { visible: false }
    });
});

opacity

Specifies the opacity of the line that represents an axis.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the opacity option of the argument axis is set to 0.5.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, val: 546 },
    { year: 2050, val: 650 },
    { year: 2040, val: 680 },
    { year: 2030, val: 704 },
    { year: 2020, val: 721 },
    { year: 2010, val: 728 },
    { year: 2000, val: 730 },
    { year: 1990, val: 721 },
    { year: 1980, val: 694 },
    { year: 1970, val: 656 },
    { year: 1960, val: 605 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [
            {
                argumentField: 'year',
                valueField: 'val',
                type: 'line',
                closed: false
            }
        ],
        legend: { visible: false },
        argumentAxis: {
            color: 'green',
            opacity: 0.5
        }
    });
});

originValue

Specifies the value to be used as the origin for the argument axis.

Type: Number
Default Value: undefined

Normally, PolarChart calculates the origin value of the argument axis automatically depending on the smallest argument of series points. In case you need to specify it explicitly, use the argumentAxis | originValue option.

NOTE: If the series contains points whose argument is less than the specified origin value, these points will reside to the left from the argument axis' origin. This may lead the start and end of the resulting diagram to overlap.

period

Specifies the period of the argument values in the data source.

Type: Number
Default Value: undefined

This option makes sense when you have a continuous argument axis. By default, all the argument values in the data source fit one circle of the argument axis. You can use the period option to set the interval of argument values that fits one circle of the argument axis. For instance, the argument values from 5 to 10 can be displayed with a period set to 5 in two argument axis circles: from 0 to 5 and from 6 to 10.

View Demo

setTicksAtUnitBeginning

Indicates whether or not to set ticks/grid lines of a continuous axis of the 'date-time' type at the beginning of each date-time interval.

Type: Boolean
Default Value: true

This property is used when a continuous axis of the 'date-time' value type is divided. If this property is set to true, axis ticks/grid lines are set at the beginning of date-time units (months, days, years, etc.). The following examples will help you understand the logic.

Tick Interval Start Value Ticks Generated
2 hours 11 (h) : 35 (min) : 25 (s) : 10 (ms) "13 (h) : 00 (min) : 00 (s) : 00 (ms)"; "15 (h): 00 (min) : 00 (s) : 00 (ms)"; ...
2 days 6 (d) : 11 (h) : 35 (min) "8 (d) : 00 (h) : 00 (min)"; "10 (d) : 00 (h) : 00 (min)"; ...
2 months March : 13 (d) "May : 0 (d)"; "July: 0 (d)"; ...

The values that will be generated for the axis can be formatted using the format property (see Data Formatting).

startAngle

Specifies the angle in arc degrees to which the argument axis should be rotated. The positive values rotate the axis clockwise.

Type: Number
Default Value: 0

Start Angle ChartJS

strips[]

Specifies options for argument axis strips.

Type: Array
Cannot be used in themes.

Strips are the highlighted areas in a chart within the defined range of values (minimum and maximum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series to trace whether the series points' values fall in or out of that range. For more details on strips, refer to the Strips topic.

To define strips for the argument axis, use the strips array. When a strip's startValue, endValue and color properties are specified, the strip is displayed in a chart. In addition, you can show a label with descriptive information on a strip. To set the text for a label, use the strip's label object.

If you need to set similar values for all strips of all axes, use the commonAxisSettings | stripStyle configuration object. It exposes the properties that can be specified for strips of all axes at once. Note that the values specified for the argument axis individually (in the argumentAxis | strips object) override the values that are specified for all axes (in the commonAxisSettings | stripStyle object).

Show Example:
jQuery

In this example, the argument axis' strips are defined and colored in a custom color.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            strips: [
                { startValue: 1960, endValue: 1970, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 1980, endValue: 1990, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2000, endValue: 2010, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2020, endValue: 2030, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2040, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)' }
            ]
        }
    });
});

stripStyle

An object defining configuration options for strip style.

Type: Object

Strips are the highlighted areas of a chart within a defined range of values (maximum and minimum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series, to trace whether the series point values fall in or out of that range. For more details on strips, refer to the Strips topic.

To set options for configuring strip style, define the stripStyle object within the argumentAxis or valueAxis configuration object. To set common options for all strips in a chart, define the stripStyle object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

tick

An object defining the configuration options for axis ticks.

Type: Object

Ticks divide an axis into equal sections by a step whose value is determined automatically, or by the tickInterval and axisDivisionFactor options of an axis. Ticks improve the readability of charts, but are not visible in the PolarChart widget by default. To set up tick configuration options, define the tick object within the argumentAxis or valueAxis configuration object. To set common options for all ticks in a chart, define the tick object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

Show Example:
jQuery

In this example, the argument axis minor ticks are visible with the opacity option set to 0.75.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            grid: { visible: false },
            minorGrid: {visible: false },
            tick: {
                opacity: 0.85
            }
        }
    });
});

tickInterval

Specifies an interval between axis ticks/grid lines.

Default Value: undefined
Accepted Values: 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'

Use this option to divide the scale by ticks in a specified interval one from another. If this option is not set, ticks are automatically arranged so that their labels do not overlap each other.

In case of a numeric axis, assign a numeric value to this option.

If the axis is of the date-time type, assign one of the predefined string values or an object to this option. The object's fields specify the number of days, hours, etc.

When you use a logarithmic axis, ticks are generated on a base of powers. For example, assume that the logarithm base is 10. Then, if the tick interval is 1, ticks are generated at 0.01, 0.1, 1, 10, 100, 1000, 10000, etc. If the tick interval is 2, ticks are generated at 0.1, 10, 1000, etc.

NOTE: The specified tick interval can be changed internally if its value leads to label overlapping. If you need to prohibit an automatic tick arrangement in this situation, specify the argumentAxis | label | overlappingBehavior option.

To set the tickInterval option for several axes at once, use the commonAxisSettings configuration object. To set this option for an individual axis, use the argumentAxis or valueAxis configuration object.

Show Example:
jQuery

In the following example, the argument axis tick interval is set to 1 hour.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(2012, 3, 2, 6, 35), traffic: 3 },
    { date: new Date(2012, 3, 2, 7, 50), traffic: 8 },
    { date: new Date(2012, 3, 2, 9, 0), traffic: 7 },
    { date: new Date(2012, 3, 2, 10, 20), traffic: 5 },
    { date: new Date(2012, 3, 2, 10, 50), traffic: 5 },
    { date: new Date(2012, 3, 2, 11, 35), traffic: 6 },
    { date: new Date(2012, 3, 2, 12, 14), traffic: 7 },
    { date: new Date(2012, 3, 2, 13, 42), traffic: 8 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [{
            valueField: 'traffic',
            argumentField: 'date'
        }],
        argumentAxis: {
            tickInterval: { hours: 1 }
        },
        animation: { enabled: false },
        legend: { visible: false }
    });
});

type

Specifies the required type of the argument axis.

Type: String
Default Value: undefined
Accepted Values: 'discrete' | 'continuous' | 'logarithmic'

The 'discrete' type is set when string arguments are specified in the data source of the chart's series. The discrete axis is divided by the values (called categories) that are specified as arguments in the data source. The categories order can be specified by the categories property, if the order used in the data source is not appropriate.

The 'continuous' type is set when numeric or date-time arguments are specified in the series data source. The continuous axis is divided automatically.

The 'logarithmic' type can be set when numeric values are specified in the series data source. The logarithmic axis is useful when you visualize a dataset of rapidly-growing values. Each axis tick represents a particular value that is raised to the next power in turn. This particular value is specified by the logarithmBase option. For example, if you set this option to 5, the following ticks will be generated: 50, 51, 52, 53 etc.

On continuous and logarithmic axes, ticks and grid lines are positioned so that their labels do not overlap each other. In addition, you can set a custom tick interval (the tickInterval or axisDivisionFactor options).

NOTE: If you require a discrete axis when numeric or date-time arguments are specified in the data source, set the type option to 'discrete' explicitly.

visible

Indicates whether or not the line that represents an axis in a chart is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the line that represents an axis in the chart.

Type: Number
Default Value: 1