Components
Tooltip
Configure tooltips for displaying data on hover
The <Tooltip> component displays data values when users hover over chart elements.
Add a tooltip
Place <Tooltip> inside any chart container:
<BarChart :width="500" :height="300" :data="data">
<Bar data-key="value" fill="#8884d8" />
<Tooltip />
</BarChart>
Customize tooltip content
Use the #content slot for full control:
<Tooltip>
<template #content="{ active, payload, label }">
<div v-if="active && payload?.length" class="bg-background border rounded p-2 shadow">
<p class="font-medium">{{ label }}</p>
<p v-for="entry in payload" :key="entry.dataKey" :style="{ color: entry.color }">
{{ entry.name }}: {{ entry.value }}
</p>
</div>
</template>
</Tooltip>
Pre-select a tooltip index
Use default-index to show a tooltip on initial render:
<Tooltip :default-index="1" />
Activate on click
<Tooltip trigger="click" />
Disable the cursor
<Tooltip :cursor="false" />
Tooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | undefined | Force active state. true keeps tooltip visible, false hides it, undefined lets the chart control visibility. |
defaultIndex | number | string | null | — | Pre-selected data index shown on initial render |
trigger | 'hover' | 'click' | 'hover' | Activation trigger |
shared | boolean | undefined | Show all series at hovered index. When undefined, defaults to true for axis-type charts. |
cursor | boolean | object | true | Show/customize cursor. Pass an object to set SVG attrs on the cursor element. |
offset | number | 10 | Pixel offset from cursor |
includeHidden | boolean | false | Show hidden series data |
filterNull | boolean | true | Filter out entries with null values |
isAnimationActive | boolean | true | Animate tooltip position changes |
allowEscapeViewBox | { x: boolean, y: boolean } | { x: false, y: false } | Allow tooltip to overflow the chart area |
position | { x?: number, y?: number } | — | Pin tooltip to a fixed position |
reverseDirection | { x: boolean, y: boolean } | { x: false, y: false } | Flip tooltip placement direction |
portal | HTMLElement | — | Teleport tooltip to a custom DOM element |
payloadUniqBy | boolean | Function | — | Deduplicate payload entries |
axisId | string | number | 0 | Target axis ID for tooltip interaction |
contentStyle | object | {} | Inline styles for tooltip content wrapper |
labelStyle | object | {} | Inline styles for the label |
itemStyle | object | {} | Inline styles for each payload item |
itemSorter | string | 'name' | Sort payload items. Accepts 'name', 'value', or 'dataKey'. |
separator | string | ' : ' | Separator between name and value in default content |
style | object | {} | Inline styles for the tooltip bounding box |
Tooltip slots
| Slot | Props | Description |
|---|---|---|
#content | { active, payload, label, coordinate, accessibilityLayer } | Full tooltip content |
#cursor | Shape-specific SVG props | Custom cursor element. Receives Cross props for ScatterChart, Rectangle props for BarChart, Sector props for radial charts, Curve props for others. |