Axis Labels in React Chart

Axis labels are the textual representations displayed along the chart axes to describe the scale and values of the data. They play a key role in helping users interpret the chart accurately.

Smart axis label

When axis labels become crowded, especially in charts with many or lengthy labels, you can control their visibility and arrangement using the intersectMode property in the ChartAxisLabel component.

For example, setting intersectMode to "Hide" will automatically hide overlapping labels to maintain a clean appearance.

Available intersectMode Options:

• None – No action is taken; labels may overlap.

• Hide – Overlapping labels are hidden.

• Trim – Truncates long labels and adds an ellipsis (...).

• Wrap – Wraps labels onto multiple lines.

• MultipleRows – Stacks labels in multiple rows to avoid overlap.

• Rotate45 – Rotates labels 45 degrees for better spacing.

• Rotate90 – Rotates labels vertically (90 degrees).

Axis label rotation

Use the rotationAngle property to rotate the axis labels from 0 to 360 degrees. By default, the rotationAngle value is set to 0 degrees.

Axis label positioning

By default, axis labels are placed outside the axis line for better visibility. However, you can reposition them inside the axis by setting the position property to Inside.

Managing edge labels

Use the edgeLabelPlacement property to control how axis labels at the edges of the chart are displayed. This helps prevent labels from overflowing or being clipped outside the chart area.

Available edgeLabelPlacement Options:

• None – No adjustment; edge labels may overflow.

• Hide – Hides edge labels if they exceed the chart boundaries.

• Shift – Moves edge labels inward to keep them fully visible within the chart area.

Label customization

You can personalize the look and feel of axis labels using the following styling properties:

• color – Sets the text color of the label.

• fontSize – Defines the font size of the label text.

• fontWeight – Controls the thickness of the font (e.g., Normal, Bold).

• fontFamily – Specifies the font style (e.g., Arial, Roboto, Times New Roman).

Label trim

To prevent axis labels from overflowing or overlapping, you can enable trimming using the enableTrim property. This automatically shortens long labels and adds an ellipsis (...) when necessary.

Additionally, you can control the maximum width of each label using the maxLabelWidth property in the ChartAxisLabel component. By default, this value is set to 34 pixels.

Controlling maximum number of axis labels

You can limit the number of axis labels displayed by setting the maxLabelDensity property. This defines the maximum number of labels rendered per 100 pixels of the chart width, helping to reduce clutter in dense charts.

If both maxLabelDensity and axis range properties (minimum, maximum, interval) are specified, the range settings take priority over maximumLabels.