React Chart - CommonAxisSettingsLabel

Configures axis labels.

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

alignment

Aligns axis labels in relation to ticks.

Type:

HorizontalAlignment

| undefined
Default Value: undefined

displayMode

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

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.

Default Value: 'hide'

position

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

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

| undefined
Function parameters:
data:

Object

The label's data object.

Object structure:
Name Type Description
value

Date

|

Number

|

String

The raw value.

valueText

String

The formatted value converted to a string.

element:

SVGGElement

A container for the template content.

Return Value:

String

|

SVGElement

|

jQuery

One of the following:

  • HTML markup as a string
  • A DOM node
  • A DOM node wrapped in a jQuery element
Default Value: 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'