React Chart - CommonAxisSettingsLabel

Configures axis labels.

import { ChartTypes } from "devextreme-react/chart"

alignment

Aligns axis labels in relation to ticks.

Type:

HorizontalAlignment

Default Value: undefined

displayMode

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

Type:

ChartLabelDisplayMode

Default Value: 'standard'

indentFromAxis

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

Type:

Number

Default Value: 10

overlappingBehavior

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

Type:

ChartsAxisLabelOverlap

Default Value: 'hide'

position

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

Type:

RelativePosition

|

Position

Default Value: 'outside'

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
value

Date

|

Number

|

String

The raw value.
valueText

String

The formatted value converted to a string.
Default Name: undefined

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'

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'