ChartAxisLabelProps

Defines the style settings for axis labels in a chart. Extends basic font properties and includes additional customization options.

Props

The following table outlines the props for the ChartAxisLabelProps:

NameTypeDefaultDescription
align
HorizontalAlignment
'Center'

Determines the alignment of the text within its container. Available options:

  • Left: Aligns the text to the left.
  • Center: Aligns the text to the center.
  • Right: Aligns the text to the right.
border
ChartBorderProps
{color: '', width: 0, dashArray: ''}

The border property allows customization of the border for axis labels. It includes options to set the color, width, and dash pattern of the border.

color
string
''

Sets the color of the text. Accepts any valid CSS color string, including hexadecimal and RGBA formats.

edgeLabelPlacement
EdgeLabelPlacement
'Shift'

The edgeLabelPlacement property ensures that labels positioned at the edges of the axis do not overlap with the axis boundaries or other chart elements, offering several options to improve chart readability by managing edge labels effectively. Available options are:

  • None: No action will be performed on edge labels.
  • Hide: Edge labels will be hidden to prevent overlap.
  • Shift: Edge labels will be shifted to fit within the axis bounds without overlapping.
enableTrim
boolean
false

When set to true, axis labels are trimmed based on the maxLabelWidth setting. This helps prevent label overflow and ensures a cleaner layout, especially when labels are long or space is limited on the chart.

enableWrap
boolean
false

When set to true, axis labels will automatically wrap to fit within the width defined by maxLabelWidth. This helps maintain readability by preventing label overflow, especially when labels are long or the chart has limited space.

fontFamily
string
''

Specifies the font family used for the text (e.g., 'Arial', 'Verdana', 'sans-serif').

fontSize
string
''

Sets the font size of the text in pixels.

fontStyle
string
''

Specifies the font style of the text (e.g., 'Normal', 'Italic').

fontWeight
string
''

Specifies the font weight (thickness) of the text (e.g., 'Normal', 'Bold', '400').

format
string
''

Used to format the axis label. This property accepts global string formats such as C, n1, P, etc. It also accepts placeholders like {value}°C, where {value} represents the axis label (e.g., 20°C).

formatter
(value: number, text: string) => string | boolean
null

A callback function that allows for custom rendering of axis labels. This function is invoked for each axis label and receives the label's properties as an argument. Available arguments are:

  • value- The numeric value of the axis label.
  • text - The current formatted text of the axis label.
intersectAction
LabelIntersectMode
Trim

Specifies the action to take when axis labels intersect with each other. The available options are:

  • None: Shows all labels without any modification.
  • Hide: Hides the label if it intersects with another label.
  • Trim: Trims the label text to fit within the available space.
  • Wrap: Wraps the label text to fit within the available space.
  • MultipleRows: Displays the label text in multiple rows to avoid intersection.
  • Rotate45: Rotates the label text by 45 degrees to avoid intersection.
  • Rotate90: Rotates the label text by 90 degrees to avoid intersection.
maxLabelWidth
number
34

Specifies the maximum width of an axis label.

opacity
number
1

Sets the opacity level of the text. A value of 1 means fully opaque, while 0 means fully transparent.

padding
number
5

The padding property adjusts the distance to ensure a clear space between the axis labels and the axis line.

placement
LabelPlacement
'BetweenTicks'

The placement property controls where the category axis labels are rendered in relation to the axis ticks. Available options are:

  • BetweenTicks: Renders the label between the axis ticks.
  • OnTicks: Renders the label directly on the axis ticks.
position
AxisLabelPosition
'Outside'

The position property determines where the axis labels are rendered in relation to the axis line. Available options are:

  • Inside: Renders the labels inside the axis line.
  • Outside: Renders the labels outside the axis line.
rotationAngle
number
0

Specifies the angle in degrees to rotate the axis label text. A positive value rotates the label clockwise, and a negative value rotates it counterclockwise.

skeleton
string
''

Specifies the skeleton format used for processing date-time values.