commonAxisSettings

Defines common settings for both the argument and value axis in a chart.

Type:

Object

DevExtreme HTML5 Charts Axis Axes

The commonAxisSettings object, which is described here, specifies common settings for all axes in a chart. To configure a particular axis, use the argumentAxis or valueAxis object. Axis-specific settings override common settings.

allowDecimals

Specifies whether to allow decimal values on the axis. When false, the axis contains integer values only.

Type:

Boolean

Default Value: undefined

breakStyle

Configures the scale breaks' appearance.

Type:

Object

color

Specifies the color of the axis line.

Type:

String

Default Value: '#d3d3d3'

This option supports the following colors.

constantLineStyle

Configures the appearance of all constant lines in the widget.

Type:

Object

DevExtreme HTML5 Charts ConstantLines

The commonAxisSettings.constantLineStyle object, which is described here, specifies common settings for all constant lines in the chart. To configure only those constant lines that belong to a particular axis, use the following objects.

To configure individual constant lines, use the following arrays of objects.

Individual settings override axis-specific settings which, in their turn, override common settings.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can see the default appearance of constant lines.


                                    

                                    

In this example, you can see the default appearance of constant lines.


                                    

                                    

In this example, you can see the default appearance of constant lines.


                                    

                                    

discreteAxisDivisionMode

Specifies whether ticks and grid lines should cross axis labels or lie between them. Applies only to the axes of the "discrete" type.

Type:

String

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

When using the widget as an ASP.NET MVC Control, specify this option using the DiscreteAxisDivisionMode enum. This enum accepts the following values: BetweenLabels and CrossLabels.

See Also
  • argumentAxis.type - sets the type of the argument axis.
  • valueAxis.type - sets the type of the value axis.
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

In this example, you can change the value of the discreteAxisDivisionMode option using the select box under the chart. Note how the grid lines change their position in accordance with the value of this option.


                                    

                                    

                                    

endOnTick

Specifies whether to force the axis to start and end on ticks.

Type:

Boolean

Default Value: undefined

grid

Configures the grid.

Type:

Object

A grid is a set of mutually-crossing vertical and horizontal lines that stretch throughout the entire chart. Visually, grid lines can be considered extensions of major ticks. The grid improves the readability of chart data.

DevExtreme HTML5 Charts GridLines

The commonAxisSettings.grid object specifies common settings for all grid lines in the chart. To configure only those grid lines that descend from a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • commonAxisSettings.minorGrid - configures the minor grid built on minor ticks.
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide grid lines.


                                    

                                    

In this example, click the check box under the chart to show/hide grid lines.


                                    

                                    

In this example, click the check box under the chart to show/hide grid lines.


                                    

                                    

inverted

Inverts the axis.

Type:

Boolean

Default Value: false

When an axis is inverted (that is, when this option is set to true), its maximum and minimum values swap their places. As a result, axis values ascend in the opposite direction. Along with the axis, series also become inverted.

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to invert both the axes.


                                    

                                    

In this example, click the check box under the chart to invert both the axes.


                                    

                                    

In this example, click the check box under the chart to invert both the axes.


                                    

                                    

label

Configures axis labels.

Type:

Object

Axis labels display the values of major axis ticks.

DevExtreme HTML5 Charts AxisLabels

The commonAxisSettings.label object, which is described here, specifies common settings for all axis labels in the chart. To configure only those labels that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can see the default appearance of axis labels.


                                    

                                    

In this example, you can see the default appearance of axis labels.


                                    

                                    

In this example, you can see the default appearance of axis labels.


                                    

                                    

maxValueMargin

Controls the empty space between the maximum series points and the axis. Applies only to the axes of the "continuous" and "logarithmic" type.

Type:

Number

Default Value: undefined

By default, the axes extend slightly beyond their extrema generating an empty space between the axes and the minimum/maximum series points. It prevents cutting off parts of those points. To control this empty space, use the minValueMargin and maxValueMargin options. These options are used in the following formulas for the actual start and end axis values.

startAxisValue = min - (max - min) * minValueMargin
endAxisValue = max + (max - min) * maxValueMargin

For example, consider that min is 1960 and max is 2010. If you set the minValueMargin and maxValueMargin options to 0.1, the axis will start in 1955 and end in 2015.

startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the maxValueMargin option using the slider under the chart.


                                    

                                    

                                    

In this example, you can change the value of the maxValueMargin option using the slider under the chart.


                                    

                                    

                                    

In this example, you can change the value of the maxValueMargin option using the slider under the chart.


                                    

                                    

                                    

minorGrid

Configures the minor grid.

Type:

Object

In addition to the major grid built on major ticks, the Chart widget provides the minor grid built on minor ticks.

DevExtreme HTML5 Charts MinorGridLines

NOTE
Neither minor ticks, nor the minor grid can be displayed if the axis is of the "discrete" type.

The commonAxisSettings.minorGrid object specifies common settings for all minor grid lines in the chart. To configure only those grid lines that descend from a particular axis, use the following objects.

Axis-specific settings override common settings.

NOTE
Displaying the minor grid without the major grid may impair the readability of a chart. To prevent this situation, we recommend you use the minor grid only in conjunction with the major grid.
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide the minor grid.


                                    

                                    

In this example, click the check box under the chart to show/hide the minor grid.


                                    

                                    

In this example, click the check box under the chart to show/hide the minor grid.


                                    

                                    

minorTick

Configures the appearance of minor axis ticks.

Type:

Object

Along with major ticks, the Chart widget supports minor ticks. They divide an axis segment limited by two neighboring major ticks.

DevExtreme HTML5 Charts MinorTicks

The commonAxisSettings.minorTick object specifies common settings for all minor ticks in the chart. To configure only those minor ticks that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

NOTE
Minor ticks cannot be displayed on an axis of the "discrete" type.
See Also
  • argumentAxis.minorTickInterval - specifies the minor tick interval of the argument axis.
  • valueAxis.minorTickInterval - specifies the minor tick interval of the value axis.
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide minor ticks.


                                    

                                    

In this example, click the check box under the chart to show/hide minor ticks.


                                    

                                    

In this example, click the check box under the chart to show/hide minor ticks.


                                    

                                    

minValueMargin

Controls the empty space between the minimum series points and the axis. Applies only to the axes of the "continuous" and "logarithmic" type.

Type:

Number

Default Value: undefined

By default, the axes extend slightly beyond their extrema generating an empty space between the axes and the minimum/maximum series points. It prevents cutting off parts of those points. To control this empty space, use the minValueMargin and maxValueMargin options. These options are used in the following formulas for the actual start and end axis values.

startAxisValue = min - (max - min) * minValueMargin
endAxisValue = max + (max - min) * maxValueMargin

For example, consider that min is 1960 and max is 2010. If you set the minValueMargin and maxValueMargin options to 0.1, the axis will start in 1955 and end in 2015.

startAxisValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
endAxisValue = 2010 + (2010 - 1960) * 0.1 = 2010 + 50 * 0.1 = 2010 + 5 = 2015

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the minValueMargin option using the slider under the chart.


                                    

                                    

                                    

In this example, you can change the value of the minValueMargin option using the slider under the chart.


                                    

                                    

                                    

In this example, you can change the value of the minValueMargin option using the slider under the chart.


                                    

                                    

                                    

opacity

Specifies how transparent the axis line should be.

Type:

Number

Default Value: undefined

This option accepts a value from 0 to 1, where 0 makes the axis line completely transparent, and 1 makes it opaque.

placeholderSize

Reserves a pixel-measured space for the axis.

Type:

Number

Default Value: null

The reserved space will be occupied by the axis line and axis labels.

DevExtreme HTML5 Charts AxisPlaceholder

See Also
  • margin - generates space around the widget.

setTicksAtUnitBeginning

Deprecated

This functionality is deprecated as redundant.

Rounds off date-time values to the nearest tick interval. Applies only to the axes of the "continuous" type containing date-time values.

Type:

Boolean

Default Value: true

stripStyle

Configures the appearance of strips.

Type:

Object

DevExtreme HTML5 Charts Strips

The commonAxisSettings.stripStyle object specifies common settings for all strips in the chart. To configure only those strips that belong to a particular axis, use the following objects.

To configure individual strips, use the following arrays of objects.

Individual settings override axis-specific settings which, in their turn, override common settings.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can see the default appearance of strips.


                                    

                                    

In this example, you can see the default appearance of strips.


                                    

                                    

In this example, you can see the default appearance of strips.


                                    

                                    

tick

Configures the appearance of major axis ticks.

Type:

Object

Ticks divide an axis into sections that measure off values on this axis.

DevExtreme HTML5 Charts MajorTicks

The commonAxisSettings.tick object specifies common settings for all major ticks in the chart. To configure only those major ticks that belong to a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • argumentAxis.tickInterval - specifies the tick interval of the argument axis.
  • valueAxis.tickInterval - specifies the tick interval of the value axis.
  • commonAxisSettings.minorTick - customizes the appearance of minor ticks.
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide major ticks.


                                    

                                    

In this example, click the check box under the chart to show/hide major ticks.


                                    

                                    

In this example, click the check box under the chart to show/hide major ticks.


                                    

                                    

title

Configures axis titles.

Type:

Object

Usually, an axis title displays units of measurement for values displayed by an axis. However, you can display any needed text in the axis title.

DevExtreme HTML5 Charts AxisTitles

The commonAxisSettings.title object, which is described here, specifies common settings for all axis titles in the chart. To configure only the axis title that belongs to a particular axis, use the following objects.

Axis-specific settings override common settings.

See Also
  • argumentAxis.title.text - specifies the text of the title for the argument axis.
  • valueAxis.title.text - specifies the text of the title for the value axis.

valueMarginsEnabled

Adds an empty space between the axis and the minimum and maximum series points.

Type:

Boolean

Default Value: true

By default, the axes extend slightly beyond their extrema. It prevents cutting off parts of the minimum and maximum series points. To disable this feature, set the valueMarginsEnabled option to false.

NOTE
In bar-like series, setting this option to true adds margins to the value axis only.
See Also
  • commonAxisSettings.minValueMargin - sets a custom margin for minimum series points.
  • commonAxisSettings.maxValueMargin - sets a custom margin for maximum series points.
Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to change the value of the valueMarginsEnabled option.


                                    

                                    

In this example, click the check box under the chart to change the value of the valueMarginsEnabled option.


                                    

                                    

In this example, click the check box under the chart to change the value of the valueMarginsEnabled option.


                                    

                                    

visible

Makes the axis line visible.

Type:

Boolean

Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide the axis lines.


                                    

                                    

In this example, click the check box under the chart to show/hide the axis lines.


                                    

                                    

In this example, click the check box under the chart to show/hide the axis lines.


                                    

                                    

width

Specifies the width of the axis line in pixels.

Type:

Number

Default Value: 1