Charts - Data Labels

#Usage

import { ChartDataLabels, ChartSvg } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series and axes -->
    <ChartDataLabels />
</ChartSvg>

Data labels are opt-in: add ChartDataLabels to display values on chart elements; remove it and labels disappear. Works across all chart types. Use display, format, and render to control content; color, fontSize, and offset to control appearance.

#Basic

Add ChartDataLabels to display values on chart elements. By default labels show the raw value at each data point, bar, or slice.

#Display Mode

Set display to control what is shown. value shows the raw number, percentage shows the proportion of the total, and both shows both. Set display="none" to hide labels without removing the component.

#Formatter

Set formatter to control the label text. The callback receives the raw value, the percentage (0–100), the category label, and the row datum, and returns a string. Use the datum to pull sibling fields into the label. Use this for currency formatting, units, and conditional display logic.

Security. formatter returns a string, rendered as text (textContent) and never parsed as HTML. There is no XSS surface even with untrusted data: any returned markup shows up as literal text, not elements.

#Min Percentage

Set minPercentage to hide labels on slices or segments smaller than a threshold. Applies to pie, donut, polar, and radar charts.

#Leader Lines

On pie and donut charts, labels render outside the slices with a leader line connecting each label to its slice. Set lineStyle to angled (default; radial segment with horizontal elbow), straight (single direct line), or none (no connector). Set alignTo to labelLine (labels align to the line end) or edge (labels align flush to the chart boundary).

#Align To

Set alignTo to edge to align all outside labels flush to the chart boundary. Labels on both sides line up at the same horizontal distance, giving a column layout. The default labelLine positions each label at its own leader line end.

#Styling

Set fontSize to adjust label text size. Set color to override the default label color. Pass a string for uniform color or an array for per-item colors. Use lineHeight to adjust the line height multiplier when labels wrap.

#Offsets

Use distance (alias: leaderOffset) to control the gap between the slice edge and the start of the leader line on circular charts. Use textGap (alias: textOffset) to add space between the leader line end and the label text. Use horizontalOffset to shift labels horizontally after alignment.

#Custom Label

Set render to replace the default label with custom content. The callback receives the full DataLabelContext. Use formattedText for the pre-formatted value, x/y for position, and ctx in Canvas mode to draw imperatively.

#API

#ChartDataLabels

fontSize and color are layout-aware per-label accessors. When an array, callback, or field name is provided, the per-label font size is honored during collision detection and layout. For combo charts, branch on seriesId inside the callback to vary styling per series.

Universal props (apply to all chart types):

Pie and donut only (ignored on bar, line, scatter, and other chart types):

#DataLabelContext

Passed to the render callback for each label.

#Related Docs

• Pie & Donut
• Column & Bar
• Line & Area
• Scatter & Bubble