Active Index

The active index determines which data point the tooltip highlights. vccs manages this internally — you control it through the <Tooltip> component's props.

Default index

Show a tooltip on initial render by setting default-index:

The tooltip will appear at index 2 when the chart first renders. Users can still hover to change the active index.

Click-based activation

Use trigger="click" so the tooltip only appears when the user clicks:

The tooltip stays visible until the user clicks elsewhere.

Controlled tooltip

Force the tooltip to always show by combining active with default-index:

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

Shared vs item tooltips

By default, tooltips show data from all series at the hovered index (shared mode). Set :shared="false" to only show data from the nearest series:

<!-- Show all series at index (default) -->
<Tooltip :shared="true" />

<!-- Show only the hovered series -->
<Tooltip :shared="false" />

Tooltip event types

Charts have a tooltip-event-type that determines how the tooltip activates:

• 'axis' (default for most charts): Activates when hovering anywhere along the axis, showing all items at that index
• 'item' (default for ScatterChart, PieChart, FunnelChart): Activates when hovering directly over an item