---
title: "Series Highlighting"
framework: angular
version: "14.1.0"
---

# Series Highlighting

Highlighting the hovered data item or series allows for easier differentiation, especially in charts with many series and data points.

#### Simple Highlight

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

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

bootstrapApplication(AppComponent);
```

[Live example: Simple Highlight](https://www.ag-grid.com/charts/angular/series-highlighting/examples/stacked-bars)

In the above example:

- Hovering a bar segment will highlight it. The other segments in that series are partially dimmed.
- Hovering a bar segment in one series will dim the other series.
- Hovering a legend item will dim the other series.

Highlighting is enabled by default. Use `highlight.enabled` to configure it globally, or `series[].highlight.enabled` to override it per series.

## Bring to Front

By default, the highlighted series is brought to the front to make it stand out, especially when multiple series overlap.

#### Bring to Front

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

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

bootstrapApplication(AppComponent);
```

[Live example: Bring to Front](https://www.ag-grid.com/charts/angular/series-highlighting/examples/bring-to-front)

The `bringToFront` property is enabled by default, and can be disabled in the `highlight` options if the default rendering order should be preserved.

```js
{
    highlight: {
        bringToFront: false,
    },
}
```

In the above example:

- By default, hovering any series in the chart or legend will render it above all the other series.
- This behaviour can be toggled using the buttons to see the difference when `bringToFront` is disabled.

## Customisation

The highlight styles of each series can be customised with the `highlight` options.

#### Area Series with Custom Highlight Style

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

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

bootstrapApplication(AppComponent);
```

[Live example: Area Series with Custom Highlight Style](https://www.ag-grid.com/charts/angular/series-highlighting/examples/basic-area)

```js
{
    highlight: {
        // Attributes that apply to the currently highlighted item.
        highlightedItem: {
            fill: 'yellow',
            stroke: 'gold',
            strokeWidth: 2,
        },
        // Attributes that apply to the unhighlighted items within the highlighted series.
        unhighlightedItem: {
            fill: 'maroon',
            strokeWidth: 0,
        },
        // Attributes that apply to the entire series containing the highlighted item.
        highlightedSeries: {
            fill: 'red',
            stroke: 'maroon',
            strokeWidth: 2,
        },
        // Attributes that apply to all other series.
        unhighlightedSeries: {
            opacity: 0.2,
        },
    },
}
```

In this example:

- The hovered marker is highlighted using the `highlightedItem` configuration. This changes the `fill` to `yellow`, the `stroke` to `gold`, and the `strokeWidth` to `2`.
- The non-hovered markers within the hovered series are styled using the `unhighlightedItem` configuration. This changes the `fill` to `maroon`, and removes the stroke by setting the `strokeWidth` to `0`.
- The hovered series is highlighted using the `highlightedSeries` configuration. This changes the `fill` and `stroke` to shades of red, with a `strokeWidth` of `2`.
- The non-highlighted series are dimmed with an applied opacity of `0.2` using the `unhighlightedSeries` configuration.

In the above example we provided the same `highlight` for all of the series, but the style can be unique to each series.

For simplicity, we provided the `highlight` once within a chart [Theme](https://www.ag-grid.com/charts/angular/themes/), rather than repeating it on each series.

## Stylers

All [Styler](https://www.ag-grid.com/charts/angular/stylers/) callbacks receive a `param.highlightState` property which can be used to dynamically customise the chart style based on the highlighted state.

#### Dynamic Highlight

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

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

bootstrapApplication(AppComponent);
```

[Live example: Dynamic Highlight](https://www.ag-grid.com/charts/angular/series-highlighting/examples/balance-sheet)

```js
{
    label: {
        itemStyler: (params) => {
            switch (params.highlightState) {
                case 'highlighted-series':
                    return { fontSize: 10 };
                case 'unhighlighted-item':
                    return { color: 'lightgray' };
                case 'highlighted-item':
                    return { fontWeight: 'bold' };
                default:
                    return { color: 'transparent' };
            }
        },
    },
}
```

In this example:

- The labels are hidden and only shown for the highlighted series.
- The label of the currently highlighted item is rendered in bold.

The `highlightState` parameter can have the following values:

- `'highlighted-item'`: The specific item is highlighted
- `'unhighlighted-item'`: Another item is highlighted, but not this one
- `'highlighted-series'`: The series containing this item is highlighted
- `'unhighlighted-series'`: Another series is highlighted, but not this one
- `'none'`: No highlighting is currently active

## API Reference

The available options differ between series types. See [the Options API](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-series) for more details.