React Chart - valueAxis.label

Configures the labels of the value axis.

Selector: Label
Type:

ValueAxisLabel

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 UI component.

alignment

Aligns axis labels in relation to ticks.

Type:

HorizontalAlignment

Default Value: undefined

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

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:
Name Type Description
valueText

String

The formatted value converted to a string.
value

Date

|

Number

|

String

The raw value.
Return Value:

String

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:

Object

Information on the axis value.

Object structure:
Name Type Description
valueText

String

The formatted value converted to a string.
value

Date

|

Number

|

String

The raw value.
Return Value:

String

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:

ChartLabelDisplayMode

Default Value: 'standard'

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

This property accepts one of the following values.

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

font

Specifies font properties for axis labels.

Selector: Font
Type:

Object

format

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

Selector: Format
Type:

Format

Default Value: undefined

See the format section for information on accepted values.

When this property value is undefined, the date-time axes display larger date range boundaries in labels. For example, if an axis displays months, it also displays a year near each instance of January. If an axis displays days, it also displays a month name near each first visible day mark.

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 display all of them.

Type:

ChartsAxisLabelOverlap

Default Value: 'hide'

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

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

You can specify the following values for both horizontal and vertical axes:

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

The following values can be specified for horizontal axes only:

  • rotate
    Rotates axis labels at the angle specified by the rotationAngle property.
  • stagger
    Arranges axis labels in two rows in a staggered manner. Use the staggeringSpacing property to specify an empty space between rows.

View Demo

See Also

position

Specifies the position of labels relative to the chart or its axis.

Type:

RelativePosition

|

Position

Default Value: 'outside'

You can specify the following positions for labels on the valueAxis:

Value Result
'inside', 'right'
'outside', 'left'

The following positions are available for labels on the argumentAxis:

Value Result
'inside', 'top'
'outside', 'bottom'

The "inside" and "outside" values allow you to retain the label's position when you rotate the chart.

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

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

template

Specifies a custom template for axis labels.

Type:

template

Template Data:
Name Type Description
valueText

String

The formatted value converted to a string.
value

Date

|

Number

|

String

The raw value.
Default Name: undefined

IMPORTANT

  • Template content must be presented as SVG elements.

  • We recommend that you do not use the foreignObject element to define template content (Safari does not support this element).

View Demo

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:

TextOverflow

Default Value: 'none'

The textOverflow property does not apply if the displayMode or overlappingBehavior property is used to rotate axis labels.

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:

WordWrap

Default Value: 'normal'

This property affects the vertical axis only when the placeholderSize property limits space for labels.

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 UI component applies the textOverflow property.