ChartDataLabelProps

Configuration options for customizing data labels in chart series.

Props

The following table outlines the props for the ChartDataLabelProps:

NameTypeDefaultDescription
border
ChartBorderProps
{ color: '', width: 1 }

Customizes the border appearance of the data label, including width and color.

borderRadius
BorderRadiusProps
{ x: 5, y: 5 }

Specifies the horizontal (x) and vertical (y) corner radius for the background of the data label. This controls how rounded the corners of the label background appear.

enableRotation
boolean
false

Specifies whether the data label should be rotated based on the provided angle. When set to true, the label is rotated according to the angle value. When set to false, the label remains in its default orientation regardless of the angle.

fill
string
'transparent'

Specifies the background color of the data label. Use any valid CSS color values such as hex codes or RGBA.

font
ChartFontProps
{ color: '', fontFamily: '', fontSize: '12px', fontStyle: 'Normal', fontWeight: 'Normal', opacity: 1 }

Customizes the font used in the data label, including size, color, style, weight, and family.

format
string | null
null

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

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

Optional function to customize the content of the data label. If provided, this callback will be invoked for each data label during rendering. It receives the following arguments:

  • index: The index of the data point in the series.
  • text: The current formatted text of the data label.
intersectMode
DataLabelIntersectMode
'Hide'

Specifies how overlapping data labels are handled. Available options:

  • None - All labels are shown, even if they overlap.
  • Hide - Overlapping labels are hidden.
  • Rotate90 - Labels are rotated 90° to reduce overlap.
labelField
string | null
null

Maps a specific field from the data source to use as the data label content. The mapped field's value is displayed as the label for each data point.

margin
ChartMarginProps
{ left: 5, right: 5, top: 5, bottom: 5 }

Sets the margin around the data label with top, right, bottom, and left values.

opacity
number
1

Specifies opacity level of the data label background. Accepts values from 0 (transparent) to 1 (opaque).

position
LabelPosition
'Auto'

Sets the position of the data label relative to the data point. Available options:

  • Outer - Outside the data point.
  • Top - Above the data point.
  • Bottom - Below the data point.
  • Middle - Centered on the data point.
  • Auto - Automatically determined based on context.
rotationAngle
number
0

Specifies the rotation angle (in degrees) for the data label. A positive value rotates the label clockwise, while a negative value rotates it counterclockwise. This property is only effective when enableRotation is set to true.

showZero
boolean
true

Sets whether to display data labels for zero values in the series. When true, labels are shown even when the value is zero. When false, labels for zero values are hidden.

template
((data: ChartDataLabelTemplateProps) => JSX.Element | null)
null

Custom template function for rendering the data label content. This function receives the data point properties and returns a JSX element to access the data point values.

textAlign
HorizontalAlignment
'Center'

Sets the alignment of the data label relative to the data point. Available options:

  • Left - Left-aligned.
  • Center - Center-aligned.
  • Right - Right-aligned.
visible
boolean
false

Controls the visibility of data labels in the series. Set to true to display labels for each data point.