Charts - Tooltip

#Usage

import { ChartSvg, ChartTooltip } from '@primeui/vue-chart';

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

Hover details are opt-in: add ChartTooltip to show a tooltip on hover; remove it and hover produces nothing. It works across all chart types with no additional wiring. Mode, snap strategy, crosshair, and custom content are all configured on the same component.

#Basic

Add ChartTooltip to display a tooltip when hovering over data elements. The default mode="item" shows details for the specific element under the cursor: one series, one value.

#Shared Mode

Set mode="shared" to show all series values at the hovered position in a single tooltip. This works for multi-series charts where comparing values at the same anchor is the main interaction. The tooltip snaps to the nearest anchor regardless of where the cursor is off-axis.

#Snap Strategy

Use snap to control how the hovered point is selected. category snaps to the nearest category (bar/column default), x snaps along the X axis (line/area default), xy picks the Euclidean-nearest point (scatter/bubble default), y snaps along the Y axis, and none disables neighborhood search so the tooltip only appears on exact shape hover. When unset, each chart type uses its natural default. Heatmap is the exception that snaps without being asked: its cells tile the plot, so the spacing between them is decoration rather than background, and the cursor resolves to the cell whose band it falls in. Pass none there for exact hover on the painted cell only.

#Crosshair

Set crosshair to display a reference line at the hovered position. Pass true for default styling or a CrosshairConfig object for fine control. Set x/y to show vertical or horizontal lines independently, and dashArray, color, width to customize their appearance.

#Position

Set position to control where the tooltip appears relative to the hovered element. cursor (default) follows the mouse, top and bottom pin it to the chart edges, left and right align it to the sides. Use offsetX and offsetY to adjust placement after the position is applied.

#Custom Tooltip

Set render to replace the default tooltip with custom content. The callback receives a TooltipRenderContext object containing all series items at the hovered position, the chart type, and theme information. Return a VNode.

Security. The built-in tooltip renders values as text (textContent), so raw data cannot inject markup. It is XSS-safe by default. When you supply a custom render, you control the VNode tree: never build it from untrusted strings via v-html/innerHTML. Bind values as text ({{ value }}) and your tooltip stays safe.

#OHLC Layout

On candlestick charts, the tooltip renders open, high, low, and close values in a structured layout with no configuration. Use render to replace this layout with custom content if needed.

#API

#ChartTooltip

#CrosshairConfig

Pass to crosshair for fine-grained control over the reference line appearance.

#TooltipRenderContext

Passed to the render callback. Represents the primary hovered item. Use allSeries to access all series values at the hovered position.

#TooltipItem

Each entry in TooltipRenderContext.allSeries.

#Related Docs

• Hover
• Candlestick & OHLC
• Combo
• Synced Charts