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.


                                    

                                    

alignment

Aligns axis labels in relation to ticks.

Type:

String

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

When configuring a widget using ASP.NET MVC Wrappers, specify this option using the HorizontalAlignment enum. This enum accepts the following values: Left, Center and Right.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the commonAxisSettings | label | alignment option using the select box under the chart.


                                    

                                    

                                    

In this example, you can change the value of the commonAxisSettings | label | alignment option using the select box under the chart.


                                    

                                    

                                    

In this example, you can change the value of the commonAxisSettings | label | alignment option using the select box under the chart.


                                    

                                    

                                    

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

|

Object

Default Value: 'enlargeTickInterval'
Accepted Values: 'ignore' | 'stagger' | 'rotate' | 'enlargeTickInterval'

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.

  • enlargeTickInterval
    Enlarges the tick interval and, consequently, the interval between axis labels.
  • ignore
    Leaves axis labels as they are - overlapped by each other.

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.
NOTE
When specified, "rotate" and "stagger" apply even if axis labels do not overlap each other.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the OverlappingBehavior enum. This enum accepts the following values: EnlargeTickInterval, Ignore, Rotate and Stagger.

Show Example:
AngularJS
Knockout
jQuery

In this example, tick intervals are intentionally set to very small values so that axis labels overlap each other. You can choose an overlap resolving algorithm using the select box under the chart. Note that the "stagger" and "rotate" algorithms apply to the labels of the argument axis only.


                                    

                                    

                                    

In this example, tick intervals are intentionally set to very small values so that axis labels overlap each other. You can choose an overlap resolving algorithm using the select box under the chart. Note that the "stagger" and "rotate" algorithms apply to the labels of the argument axis only.


                                    

                                    

                                    

In this example, tick intervals are intentionally set to very small values so that axis labels overlap each other. You can choose an overlap resolving algorithm using the select box under the chart. Note that the "stagger" and "rotate" algorithms apply to the labels of the argument axis only.


                                    

                                    

                                    

visible

Shows/hides axis labels.

Type:

Boolean

Default Value: true