---
product: "AG Charts"
title: "Series Labels"
description: "Angular Charts support styling series data labels, controlling their position and orientation, and avoiding collisions between labels, markers and other series geometry."
framework: angular
version: "14.2.0"
related:
    - title: "Cross Lines"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/axes-cross-lines/"
    - title: "Legend"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/legend/"
    - title: "Formatters"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/formatters/"
    - title: "Stylers"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/stylers/"
    - title: "Series Bars"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/bars/"
    - title: "Series Fills"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/fills/"
    - title: "Series Markers"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/markers/"
    - title: "Style Segments"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/style-segments/"
    - title: "Annotations"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/annotations/"
    - title: "Background Regions"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/background-regions/"
    - title: "Colour Scale"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/colour-scale/"
    - title: "Error Bars"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/error-bars/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Series 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](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#api-reference) for the full list of available options, which vary slightly between series types.

## Styling

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

#### Label Styling

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Label Styling](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/label-showcase/)

```js
{
    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](https://www.ag-grid.com/charts/archive/14.2.0/angular/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](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#orientation) for more details.
- Providing `placement` as an ordered array lets a label fall back to an alternative position. See [Placement](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#placement) for more details.

## Placement

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](https://www.ag-grid.com/charts/archive/14.2.0/options/) for the full list of placement values per series type.

#### Label Placement

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Label Placement](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/label-position/)

```js
{
    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](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#orientation) and other [Collision Avoidance](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#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

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.

#### Label Orientation

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Label Orientation](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/label-orientation/)

```js
{
    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](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#placement) and other [Collision Avoidance](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#collision-avoidance) options.
  - Resize the example to see the fallback placements in action.

## Collision Avoidance

> **Note**
>
> Series label collision avoidance is separate from [axis label collision avoidance](https://www.ag-grid.com/charts/archive/14.2.0/angular/axes-labels/#collision-avoidance), which is configured independently on each axis.

As well as using [fallback placement](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#placement) and [fallback orientation](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/#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.

#### Label Fitting

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Label Fitting](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/label-fitting/)

```js
{
    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`.

#### Pie Chart with Fitted Labels

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Pie Chart with Fitted Labels](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/pie-label-fitting/)

```js
{
    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

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.

#### Label Collision Threshold

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Label Collision Threshold](https://www.ag-grid.com/charts/archive/14.2.0/angular/series-labels/examples/label-threshold/)

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

### Threshold

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.

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

## API Reference

#### Label Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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 | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | 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. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | 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. |

#### Collision Avoidance

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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. |
| collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| 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 | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | 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

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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`. |

#### Placement Styles

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| insideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed inside the shape. |
| insideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| insideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| insideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| insideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| outsideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed outside the shape. |
| outsideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| outsideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| outsideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| outsideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |