commonAxisSettings

An object defining the configuration options that are common for all axes of the PolarChart widget.

Type: Object

Use this object's properties to set the options for all chart axes at once. The option values will be applied to the argument axis and all values axes, which are defined in the valueAxis array. To set a common axis option for an axis individually, use the corresponding valueAxis or argumentAxis object. Values that are set individually override their corresponding common values.

Show Example:
jQuery

Here, the color and width options are changed for both axes.


                                    

                                    

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 common color option is set to green.


                                    

                                    

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 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.


                                    

                                    

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.

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.


                                    

                                    

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

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 both axes.


                                    

                                    

label

An object defining the label configuration options that are common for all axes in the PolarChart widget.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. Use the label object's properties to set common label options for all axes simultaneously.

To set a common option for labels of a particular axis, use the label object within the argumentAxis or valueAxis configuration object. The values that are set individually override the corresponding common values.

Show Example:
jQuery

In this example, the axes label text is enlarged up to the size of 14 pixels.


                                    

                                    

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.

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 minor axis ticks are visible, with the color option set to 'blue' and width option set to 2.


                                    

                                    

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 axes is set to 1.


                                    

                                    

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).

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 axis ticks are visible with the color option set to 'blue' and width option set to 2.


                                    

                                    

visible

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

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box in the bottom to change axes visibility.


                                    

                                    

width

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

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the axes' width option is set to 3.