label

Configures the labels of the value axis.

Type:

Object

Axis labels display the values of major axis ticks.

DevExtreme HTML5 Charts AxisLabels

See Also
  • commonAxisSettings.label - configures the labels of all axes in the widget.

alignment

Aligns axis labels in relation to ticks.

Type:

String

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

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

Show Example:
jQuery

Use the drop-down menu at the bottom to change the value axis' alignment option.


                                    

                                    

customizeHint

Specifies the hint that appears when a user points to an axis label.

Type:

function

Function parameters:
axisValue:

Object

Information on the axis value.

Object structure:
value:

Date

|

Number

|

String

The raw value.

valueText:

String

The formatted value converted to a string.

Return Value:

String

The text for the hint to display.

DevExtreme HTML5 Charts AxisLabelHint

NOTE
The value and valueText fields are also exposed by the this object.

customizeText

Customizes the text displayed by axis labels.

Type:

function

Function parameters:
axisValue:

Object

Information on the axis value.

Object structure:
value:

Date

|

Number

|

String

The raw value.

valueText:

String

The formatted value converted to a string.

Return Value:

String

The text for the label to display.

Cannot be used in themes.
NOTE
The value and valueText fields are also exposed by the this object.
Show Example:
jQuery

In the example below, additional text is added to the value axis' label values using the customizeText option.


                                    

                                    

displayMode

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

Type:

String

Default Value: 'standard'
Accepted Values: 'standard' | 'rotate' | 'stagger'
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

format

Formats a value before it is displayed in an axis label.

Type:

Format

Default Value: undefined

See the format section for details on accepted values.

See Also

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: 'hide'
Accepted Values: 'stagger' | 'rotate' | 'hide' | 'none'

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.

When using the widget as an ASP.NET MVC Control, specify this option using the OverlappingBehavior enum. This enum accepts the following values: Stagger, Rotate, Hide and None.

NOTE
Specifying this option with an object as well as with the "enlargeTickInterval" and "ignore" values is deprecated.
See Also
Show Example:
jQuery

In the following example, the chart is rotated and the value axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by staggering the labels with 2 pixel spacing.


                                    

                                    

precision

Deprecated

Use the valueAxis.label.format.precision option instead.

Specifies a precision for the formatted value displayed in the axis labels.

Type:

Number

Default Value: undefined

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

visible

Shows/hides axis labels.

Type:

Boolean

Default Value: true