React Chart - valueAxis.label

Axis labels display the values of major axis ticks.

DevExtreme HTML5 Charts AxisLabels

alignment

Aligns axis labels in relation to ticks.

Type:

Default Value: undefined

Accepted Values: 'center' | 'left' | '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.

customizeHint

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

Type:

Function

Function parameters:

axisValue:

Information on the axis value.

Object structure:

Name	Type	Description
value	Date \| Number \| String	The raw value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

value

Date

|

|

The raw value.

valueText

The formatted value converted to a string.

Return Value:

The text for the hint to display.

DevExtreme HTML5 Charts AxisLabelHint

NOTE

As an alternative to the function’s parameter you can use the this keyword.

customizeText

Customizes the text displayed by axis labels.

Type:

Function

Function parameters:

axisValue:

Information on the axis value.

Object structure:

Name	Type	Description
value	Date \| Number \| String	The raw value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

value

Date

|

|

The raw value.

valueText

The formatted value converted to a string.

Return Value:

The text for the label to display.

Cannot be used in themes.

NOTE

As an alternative to the function’s parameter you can use the this keyword.

displayMode

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

Type:

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:

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.

indentFromAxis

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

Type:

Default Value: 10

DevExtreme HTML5 Charts IdentFromAxis

overlappingBehavior

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

Type:

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 Control. This enum accepts the following values: Stagger, Rotate, Hide, and None.

View Demo

rotationAngle

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

Type:

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: