AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

React ChartsSeries Labels

Version 14.2.0

Series data labels display the value of a data point directly on the chart. These are configured on the label property of each series.

Please see the API Reference for the full list of available options, which vary slightly between series types.

Styling Copy Link

Enable labels with label.enabled, then style them with the following options.

 
{
    series: [
        {
            // ...
            label: {
                enabled: true,
            },
        },
    ],
}

In this example:

  • The label text is styled with properties such as color and fontWeight. Other available options include fontSize, fontStyle and fontFamily.
  • The label itself has a fill and border, configured with properties such as fill and border. Other available options include fillOpacity, cornerRadius and padding. See Fills & Borders for more details.
  • The insideStyle and outsideStyle properties override these text and box styles for when the resolved label placement sits inside or outside the series node — used here to swap between a dark-on-light and light-on-dark treatment.
  • Bar-family labels can additionally be rotated with orientation. See Orientation for more details.
  • Providing placement as an ordered array lets a label fall back to an alternative position. See Placement for more details.

Placement Copy Link

The available label positions are series-specific. These include 'inside-start' or 'outside-end' for a bar series, and 'top' or 'left' for a bubble series.

See the API Reference for the full list of placement values per series type.

 
{
    series: [
        {
            // ...
            label: {
                enabled: true,
                placement: ['top', 'bottom', 'left', 'right'],
                spacing: 6,
            },
        },
    ],
}

In this example:

  • Providing placement as an ordered array allows the label to fallback to an alternative position if the first doesn't fit or collides with another item.
  • spacing sets the pixel distance between a label and its anchor and is ignored when the resolved placement is centred.

Orientation Copy Link

Bar-family series can rotate their labels using the label.orientation option. This accepts 'horizontal', 'vertical' or 'vertical-reversed', or an ordered array of fallback orientations.

 
{
    series: [
        {
            type: 'bar',
            // ...
            label: {
                enabled: true,
                orientation: ['horizontal', 'vertical'],
                wrapping: 'never',
            },
        },
    ],
}

In this example:

  • Providing orientation as an ordered array allows the label to fallback to an alternative orientation if the first doesn't fit or collides with another item.

Collision Avoidance Copy Link

Series label collision avoidance is separate from axis label collision avoidance, which is configured independently on each axis.

As well as using fallback placement and fallback orientation options, labels can also wrap, truncate, shrink to a smaller font size or be hidden when they collide with other elements or don't fit within provided maxWidth/maxHeight values.

 
{
    series: [
        {
            // ...
            label: {
                enabled: true,
                placement: 'inside-end',
                maxWidth: 70,
                maxHeight: 54,
                wrapping: 'on-space',
                truncate: true,
                minimumFontSize: 8,
            },
        },
    ],
}

In this example:

  • maxWidth and maxHeight specify the maximum label size.
  • Supplying a minimumFontSize lets the label shrink in conjunction with wrapping, attempting these methods before truncating or hiding.
  • wrapping ('on-space', 'always', 'hyphenate', 'never') controls how overflowing text wraps within the provided size or bar boundary.
  • truncate truncates whatever still doesn't fit, appending an ellipsis.

Pie and Donut

These series configure the same fitting options on calloutLabel and sectorLabel rather than on label.

 
{
    series: [
        {
            type: 'pie',
            angleKey: 'terawattHours',
            calloutLabelKey: 'source',
            sectorLabelKey: 'share',
            calloutLabel: {
                maxWidth: 70,
                wrapping: 'on-space',
                truncate: true,
            },
            sectorLabel: {
                wrapping: 'on-space',
                truncate: true,
                minimumFontSize: 8,
            },
        },
    ],
}

In this example:

  • maxWidth and maxHeight cap the label size in pixels. A sector label is capped by its wedge as well.
  • Use the controls and resize the container to see how the labels wrap, truncate or are hidden when they don't fit.
  • minimumFontSize lets the label shrink to fit before it is truncated or hidden. Switch it on to see the labels render in full at a smaller size.
  • When a calloutLabel doesn't fit around the chart, the pie or donut shrinks to make room for it, rather than fitting the label around a fixed radius.

Hiding Labels Copy Link

When any of these strategies are used but fail to find a satisfactory resolution, the label is hidden by default.

Use collision.alwaysShow: true to force the label to remain visible, or collision.alwaysShow: false to allow labels to be hidden even when no other strategies are enabled.

 
{
    series: [
        {
            // ...
            label: {
                enabled: true,
                collision: {
                    alwaysShow: true,
                },
            },
        },
    ],
}

Threshold Copy Link

Collisions are defined as the edge of one label hitting the edge of another element.

Use a collision.threshold value to ensure labels are a minimum pixel distance from obstacles, or a negative value to allow labels to overlap somewhat.

{
    series: [
        {
            // ...
            label: {
                enabled: true,
                collision: {
                    threshold: 4,
                },
            },
        },
    ],
}

API Reference Copy Link

Represents the configuration options for labels in an AgCharts. Labels are used to display textual information alongside data points in a chart.

formatter RichFormatter
A custom formatting function used to convert data values into text for display by labels.
format string
Format string used when rendering labels.
itemStyler Styler
Function used to style individual datum labels.
enabled boolean
Whether the associated elements and properties should be used in the chart.
color AgCssColorOrRef
The colour for text elements. A colour string, or a theme-colour reference object.
fontSize FontSize
The size of the font in pixels for text elements.
fontFamily FontFamily
The font family for text elements.
fontStyle FontStyle
The style to use for text elements.
fontWeight FontWeight
The font weight to use for text elements.
border BorderOptions
Stroke options for the box border.
cornerRadius PixelSize
Apply rounded corners to the label box.
padding Padding
Distance between the label text and the border. A number applies uniform padding; an object sets each side.
fill AgColorType
The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity
The opacity of the fill colour.

Label-fit options extended with collision handling.

collision AgChartLabelCollisionOptions
Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden.
maxWidth PixelSize
Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit.
maxHeight PixelSize
Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit.
wrapping TextWrap
Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping.
truncate boolean
Whether to truncate the label with an ellipsis when it does not fit within its bounds.

Font reduction applied to a label that does not fit the region produced by its placement.

minimumFontSize FontSize
If the label does not fit within its bounds, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The label is only truncated or hidden when it still does not fit at `minimumFontSize`.

Label style overrides applied according to the placement resolved at layout time.

insideStyle AgChartLabelPlacementStyleOptions
Styles applied when the label is placed inside the shape.
outsideStyle AgChartLabelPlacementStyleOptions
Styles applied when the label is placed outside the shape.