Vue Chart - commonAxisSettings.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.

color

Specifies the color of ticks.

Type:

String

Default Value: '#767676'

This option supports the following colors:

length

Specifies the length of ticks in pixels.

Type:

Number

Default Value: 7

opacity

Specifies how transparent ticks should be.

Type:

Number

Default Value: undefined

This option accepts a value from 0 to 1, where 0 makes ticks completely transparent, and 1 makes them opaque.

shift

Shifts ticks from the reference position.

Type:

Number

Default Value: 3

In the reference position, the axis runs through the center of each tick:

DevExtreme Chart - Reference position for tick shift

Positive values shift ticks toward axis labels; negative values shift ticks in the opposite direction.

The following table illustrates this option:

Shift Value Horizontal Axis Vertical Axis
shift: 3 DevExtreme Chart - Positive tick shift on the argument axis DevExtreme Chart - Positive tick shift on the value axis
shift: -3 DevExtreme Chart - Negative tick shift on the argument axis DevExtreme Chart - Negative tick shift on the value axis

visible

Makes ticks visible.

Type:

Boolean

Default Value: true

width

Specifies the width of ticks in pixels.

Type:

Number

Default Value: 1