DataLabelSettings

23 Sep 20252 minutes to read

This class provides options to customize the appearance and behavior of data labels within a series.

Properties

alignment Alignment

Specifies the alignment of the data label relative to the data point.
The available options are:

  • Near: Positions the label to the left of the data point.
  • Center: Positions the label in the center of the data point.
  • Far: Positions the label to the right of the data point.

Defaults to ‘Center’

angle number

Specifies the rotation angle of the data label.

Defaults to 0

border BorderModel

Configures the appearance of the border lines with options for width and color properties.

enableRotation boolean

If set to true, the data label will be rotated according to the specified angle.

Defaults to false

fill string

The background color of the data label accepts hex and rgba values as valid CSS color strings.

Defaults to ‘transparent’

font FontModel

Customizes the appearance of the data label text with options for font size, color, style, weight, and family.

format string

Used to format the data label, accepting global string formats like C, n1, P, etc.
It also supports placeholders, such as {value}°C, where {value} represent the point data label (e.g., 20°C).

Defaults to null

labelIntersectAction DataLabelIntersectAction

Specifies the action to handle overlapping data labels.
Available options include:

  • None - All data labels are displayed, even if they overlap.
  • Hide - Overlapping data labels are hidden to avoid clutter.
  • Rotate90 - Data labels are rotated 90 degrees to avoid overlap and improve readability.

Defaults to ‘Hide’

margin MarginModel

Configures the margin for the data label.

name string

Specifies the data source field that contains the data label value.

Defaults to null

opacity number

Specifies the opacity level for the data label background, which controls its transparency.

Defaults to 1

position LabelPosition

Specifies the position of the data label relative to the data point.
The available options are:

  • Outer: Positions the label outside the point.
  • Top: Positions the label on top of the point.
  • Bottom: Positions the label at the bottom of the point.
  • Middle: Positions the label in the middle of the point.
  • Auto: Automatically selects the best position for the label based on the series and data point.

Defaults to ‘Auto’

rx number

Specifies the X-axis rounded corner radius for the data label.

Note that border values must not be null for this feature to work.

Defaults to 5

ry number

Specifies the Y-axis rounded corner radius for the data label.

Note that border values must not be null for this feature to work.

Defaults to 5

showZero boolean

If set to true, data labels for zero values in the series are render.

Defaults to true

template string|Function

Custom template for the data label.
Use ${point.x} and ${point.y} as placeholders to display the corresponding data point values.

Defaults to null

visible boolean

If set to true, data labels for the series are render. By default, it is set to false.

Defaults to false