PieChartDataLabelProps

Defines the configuration settings for data labels in a Pie Chart series.

Props

The following table outlines the props for the PieChartDataLabelProps:

NameTypeDefaultDescription
border
PieChartBorderProps
{ width: 0, color: '', dashArray: '' }

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

connectorStyle
ConnectorProps
{ width:1, type: 'Curve', color:'', dashArray:'', length:'' }

Options to customize the connector line in the series. By default, the connector length for the Pie series is set to '4%'. For other series, it is set to null.

enableRotation
boolean
false

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

fill
string
transparent

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

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

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} represents the point data label (e.g., 20°C).

formatter
(props: PieChartDataLabelFormatterProps) => string
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.
maxLabelWidth
number | null
null

Limits the label width and applies wrapping or trimming when the content exceeds the specified width.

name
string
''

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

position
PieLabelPosition
Inside

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

  • Outside - Places the data label outside the data point, typically used to avoid overlap.
  • Inside - Places the data label inside the data point, useful for displaying labels within the point.
rotationAngle
number
0

Specifies the rotation angle of the data label in degrees.

rx
number
5

Specifies the X-axis rounded corner radius for the data label. Note that border values must not be null for this feature to work.

ry
number
5

Specifies the Y-axis rounded corner radius for the data label. Note that border values must not be null for this feature to work.

showZero
boolean
true

Controls whether data labels for zero values are displayed. When set to false, labels for zero values will not be rendered.

visible
boolean
false

When set to true, data labels for the series are rendered.