DataLabelSettings API in JavaScript (ES5) Chart API control

Configures the data label in the series.

Properties

alignment

Alignment

Specifies the alignment for data Label. They are,

• Near: Aligns the label to the left of the point.
• Center: Aligns the label to the center of the point.
• Far: Aligns the label to the right of the point.

Defaults to ‘Center’

angle

number

Specifies angle for data label.

Defaults to 0

border

BorderModel

Option for customizing the border lines.

enableRotation

boolean

Enables rotation for data label.

Defaults to false

fill

string

The background color of the data label accepts value in hex and rgba as a valid CSS color string.

Defaults to ‘transparent’

font

FontModel

Option for customizing the data label text.

format

string

Used to format the point data label that accepts any global string format like ‘C’, ‘n1’, ‘P’ etc. It also accepts placeholder like ‘{value}°C’ in which value represent the point data label, e.g, 20°C.

Defaults to null

labelIntersectAction

DataLabelIntersectAction

Show Datalabel Even two Data Labels Are Overflow.

Defaults to ‘Hide’

margin

MarginModel

Margin configuration for the data label.

name

string

The DataSource field that contains the data label value.

Defaults to null

opacity

number

The opacity for the background.

Defaults to 1

position

LabelPosition

Specifies the position of the data label. They 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 to the middle of the point.
• Auto: Positions the label based on series.

Defaults to ‘Auto’

rx

number

The roundedCornerX for the data label. It requires border values not to be null.

Defaults to 5

ry

number

The roundedCornerY for the data label. It requires border values not to be null.

Defaults to 5

showZero

boolean

If set true, data label for zero values in series renders.

Defaults to true

template

string | Function

Custom template to show the data label. Use ${point.x} and ${point.y} as a placeholder text to display the corresponding data point.

Defaults to null

visible

boolean

If set true, data label for series renders.

Defaults to false