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

JavaScript ChartsSeries Highlighting

Version 14.2.0

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

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.

Highlight Modes Copy Link

By default, hovering an item highlights only that item. Use highlight.mode: 'shared' to also highlight the item of every other series that shares the hovered item's category.

 
{
    highlight: {
        mode: 'shared', // or 'single'
    },
}

The options for mode are:

  • single - highlights the hovered item only.
  • shared - highlights the item of every other series that shares the hovered item's category.

See Tooltip Modes to apply the same shared grouping to series highlighting.

Bring to Front Copy Link

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

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

{
    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 Copy Link

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

 
{
    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, rather than repeating it on each series.

Stylers Copy Link

All Styler callbacks receive a param.highlightState property which can be used to dynamically customise the chart style based on the highlighted state.

 
{
    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 Copy Link

The available options differ between series types. See the Options API for more details.