Tooltip

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 the tooltip at a data index on the first render. Users can still hover to move it.

<Tooltip :default-index="2" />

Activate on click

With trigger="click", the tooltip appears when the user clicks, and stays until the user clicks elsewhere.

<Tooltip trigger="click" />

Keep the tooltip open

active overrides the chart: true keeps the tooltip visible, false hides it. Combine it with default-index to pin the tooltip to one point:

<Tooltip :active="true" :default-index="3" />

To control the active point from outside the chart, bind v-model:active-index. See Events and v-model.

Shared and item tooltips

Each chart type activates the tooltip in one of two ways:

• Axis: the tooltip follows the category axis and shows every series at that index. This is the default for AreaChart, BarChart, LineChart, ComposedChart, RadarChart and RadialBarChart.
• Item: the tooltip opens on the hovered item and shows only that item. This is the default for ScatterChart, PieChart, FunnelChart and the standalone charts.

shared switches between the two where the chart supports both: :shared="false" gives item tooltips in a BarChart, LineChart or RadialBarChart, and :shared="true" gives axis tooltips in a ScatterChart. AreaChart, ComposedChart and RadarChart always use axis tooltips; PieChart and FunnelChart always use item tooltips.

<Tooltip :shared="false" />

Disable the cursor

<Tooltip :cursor="false" />

Tooltip props

Payload

The #content slot, the formatter and label-formatter receive payload: one TooltipPayloadEntry per row, in series order.

All charts use this shape, including the standalone charts: payload is the domain object (your Treemap or Sankey node, a Heatmap cell, a Tracker row, …) and value is the raw number. The default content shows readable text; a formatter receives the raw value. Import TooltipPayloadEntry and TooltipPayload from vccs to type your own content.

Tooltip slots

<script setup lang="ts">
import { ref } from 'vue'
import { Tooltip } from 'vccs'

const activePoint = ref<number | null>(null)
</script>

<template>
  <Tooltip v-model:active-index="activePoint" />
</template>

Multiple Tooltip components share selection. The first owns interaction settings; each can customize its presentation. Only one may bind active-index; conflicting bindings warn in development and the first controls selection. See Events and v-model for index order and control precedence.