React ChartsSeries Labels

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.
  • This is affected by Orientation and other Collision Avoidance options.
  • Resize the example to see the fallback placements in action.
• 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.
  • This is affected by Placement and other Collision Avoidance options.
  • Resize the example to see the fallback placements in action.

Collision Avoidance Copy Link

As well as using fallback placement and fallback orientation options, labels can also wrap, truncate 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,
            },
        },
    ],
}

In this example:

• maxWidth and maxHeight specify the maximum label size.
• 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.

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

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