Charts - Hover

#Usage

import { ChartHover, ChartLine, ChartRadar, ChartScatter, ChartSvg } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series and axes -->
    <ChartHover />
</ChartSvg>

Hover feedback is opt-in: add ChartHover to brighten the hovered element while non-hovered elements stay at normal opacity. Dimming is explicit: set dimOpacity below 1 on ChartHover, a series hover config, or the chart theme when you want the rest of the marks to fade.

#Basic

Add ChartHover to enable visual feedback when hovering over data elements. The hovered item brightens while non-hovered items stay unchanged. The default brightness is 1.1 and dimOpacity is 1.

#Brightness & Dim

Set brightness to control how much the hovered item lightens. 1.0 means no change, 1.3 means 30% brighter. Set dimOpacity below 1 to fade non-hovered items. 0 makes them invisible, 1 means no fading. Combining brightness with explicit dimming produces a stronger focus effect without changing colors.

#Pie Offset

Set offset to pop the hovered slice outward from the center along the slice angle. The chart reserves extra padding to prevent clipping. Also works on bar charts, where offset lifts the hovered bar upward.

#Border Override

Set borderColor and borderStrokeWidth to add a stroke around the hovered item. Use borderDash to apply a dashed border pattern and borderDashOffset to shift the pattern along the stroke. This provides a selection indicator that works alongside brightness and optional dimming.

#Scale

Set scale to physically resize the hovered element. Unlike brightness which only adjusts color, scale grows or shrinks the element. 1.2 makes it 20% larger. Scale and brightness can be combined for a stronger pop effect.

#Color Override

Set backgroundColor to replace the hovered item's fill color instead of adjusting brightness. When backgroundColor is set, brightness is ignored. Use this when base colors are muted and brightness alone is not visible enough.

#Click

Add ChartHover and set onClick to respond to clicks on data elements. The callback receives the clicked element's datasetId, index, label, value, and color. When onClick is not set, a click has no effect on the data element; series visibility is toggled through the legend, not by clicking the chart.

#Line Marker Scaling

On line, scatter, and radar charts the hovered point's marker enlarges. By default it grows to markerSize × 1.3. Set radiusMultiplier on ChartHover to change that multiplier globally, or hoverPointRadius on the series component to override a specific series with an absolute pixel radius. Use pointHoverBackgroundColor and pointHoverBorderColor to override marker colors on hover.

#API

#ChartHover

#onClick context

The object passed to the onClick callback when a data element is clicked.

#Per-Series Marker Props

Set these directly on ChartLine, ChartScatter, or ChartRadar to override hover behavior for that specific series.

#Hover Behavior by Chart Type

#Related Docs

• Tooltip
• Legend
• Animation