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

alignment

Aligns axis labels in relation to ticks.

Type:

String

Default Value: undefined
Accepted Values: 'center' | 'left' | 'right'

When using a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the HorizontalAlignment enum. This enum accepts the following values: Left, Center and Right.

displayMode

Allows you to rotate or stagger axis labels. Applies to the horizontal axis only.

Type:

String

Default Value: 'standard'
Accepted Values: 'rotate' | 'stagger' | 'standard'

NOTE
Unless the rotated option is set to true, the argument axis is horizontal and the value axis is vertical.

This option accepts one of the following values.

  • rotate
    Rotates axis labels through the angle specified by the rotationAngle option.
  • stagger
    Arranges axis labels in two rows in a staggering manner. An empty space between the rows is specified by the staggeringSpacing option.
  • standard
    Does not change the default disposition of axis labels.

font

Specifies font options for axis labels.

Type:

Object

indentFromAxis

Adds a pixel-measured empty space between an axis and its labels.

Type:

Number

Default Value: 10

DevExtreme HTML5 Charts IdentFromAxis

See Also

overlappingBehavior

Decides how to arrange axis labels when there is not enough space to keep all of them.

Type:

String

Default Value: 'hide'
Accepted Values: 'rotate' | 'stagger' | 'none' | 'hide'

When axis labels overlap each other, you can rearrange them by setting the overlappingBehavior option. Depending on whether an axis is horizontal or vertical, this option accepts different values.

NOTE
Unless the rotated option is set to true, the argument axis is horizontal and the value axis is vertical.

The following values can be specified for both horizontal and vertical axes.

  • hide
    Hides certain axis labels leaving more space for the others.
  • none
    Leaves axis labels overlapped.

The following values can be specified for horizontal axes only.

  • rotate
    Rotates axis labels through the angle specified by the rotationAngle option.
  • stagger
    Arranges axis labels in two rows in a staggering manner. An empty space between the rows is specified by the staggeringSpacing option.

Use the OverlappingBehavior enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Stagger, Rotate, Hide, and None.

View Demo

See Also

rotationAngle

Specifies the rotation angle of axis labels. Applies only if displayMode or overlappingBehavior is "rotate".

Type:

Number

Default Value: 90

staggeringSpacing

Adds a pixel-measured empty space between two staggered rows of axis labels. Applies only if displayMode or overlappingBehavior is "stagger".

Type:

Number

Default Value: 5

textOverflow

Specifies what to do with axis labels that overflow the allocated space after applying wordWrap: hide, truncate them and display an ellipsis, or do nothing.

Type:

String

Default Value: 'none'
Accepted Values: 'ellipsis' | 'hide' | 'none'

Use the VizTextOverflow enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Ellipsis, Hide, and None.

visible

Shows/hides axis labels.

Type:

Boolean

Default Value: true

wordWrap

Specifies how to wrap texts that do not fit into a single line.

Type:

String

Default Value: 'normal'
Accepted Values: 'normal' | 'breakWord' | 'none'

The following modes are available:

  • "normal"
    Text breaks only at allowed breakpoints (for example, a space between two words).

  • "breakWord"
    Words can be broken if there are no available breakpoints in the line.

  • "none"
    Word wrap is disabled.

If the text overflows the container even after word wrap, the widget applies the textOverflow option.

Use the VizWordWrap enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Normal, BreakWord, and None.