overlappingBehavior

When labels overlap each other, you can specify how these labels will be displayed by setting the overlappingBehavior option. The values accepted by this option depend on whether an axis is horizontal or vertical.

NOTE

By default, the argument axis is horizontal and the value axis is vertical. To swap the axes over, assign true to the rotated property.

For a vertical axis, the following values can be assigned to the overlappingBehavior option.

auto
Resolve the label overlapping automatically.

ignore
Leave the labels overlapped.

enlargeTickInterval
Leave the labels as they are, but enlarge the axis tick intervals so that the labels do not overlap.

Horizontal axis' labels have two more modes. These modes are always applied regardless of there being a label overlap or not.

stagger
Arrange labels in a staggered manner. The spacing between label rows will be 5 pixels.

rotate
Rotate labels so that they are perpendicular to the axis.

To set custom spacing between staggered rows or the custom rotation angle for the 'stagger' and 'rotate' modes, assign an object to the overlappingBehavior configuration property. Set the object's mode property to the required mode, and set the staggeringSpacing or rotationAngle property to the required value.

In the following example, the argument axis tick interval is intentionally set to a very small value so that the labels overlap each other. The overlap is resolved by rotating the labels by 80 degrees.

mode

When you use the 'stagger' algorithm and set the custom spacing between staggered rows. In this instance, set the mode property to 'stagger' and set the staggeringSpacing property to the required value.

When you use the 'rotate' algorithm and set a custom rotation angle. In this instance, set the mode property to 'rotate' and set the rotationAngle property to the required angle

Otherwise, it is easier to set the overlappingBehavior configuration property to the required mode directly.

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by rotating the labels by 90 degrees.

rotationAngle

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by rotating the labels by 45 degrees.

staggeringSpacing

Specifies the spacing that must be set between staggered rows when the 'stagger' algorithm is applied.

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by staggering the labels with 3 pixel spacing.