Question 1

Which of the 9 tooltips do I copy?

Accepted Answer

Default shows the day, then each series with its dot. Line Indicator and No Indicator change the marker, No Label drops the heading too, Label Formatter writes the full date, and Custom Label takes the heading from the config. Icons swaps the dots for Lucide components, Formatter adds `kcal` to each value, and Advanced adds a total row.

Question 2

What can the `:tooltip` object set?

Accepted Answer

Any of `ChartTooltipContent`'s options: `indicator` (`'dot'`, `'line'` or `'dashed'`), `hideLabel`, `hideIndicator`, `labelFormatter`, `labelKey`, `nameKey`, `valueKey`, `label`, `color` and a `class`. Line Indicator is `:tooltip="{ indicator: 'line' }"`, and No Label is `{ hideIndicator: true, hideLabel: true }`. `:tooltip="false"` hands the body back to TanStack Charts.

Question 3

How does the heading become a full date?

Accepted Answer

Pass `labelFormatter` in the `:tooltip` object. Label Formatter's turns `2024-07-16` into July 16, 2024 with `toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' })`. A date-only string parses as midnight UTC, so add `timeZone: 'UTC'` or readers west of it see the day before.

Question 4

How do I add `kcal`, or any unit, to each value?

Accepted Answer

Fill `ChartContainer`'s `#tooltip` slot, which hands you the focused `points`, with `<ChartTooltipContent hide-label :points="points">`, and give that its own `#formatter` slot. Formatter's slot takes `{ item, value }` and writes the config label, then the value and a muted `kcal`. The slot replaces the whole row, so draw the color swatch yourself if you want one, as Advanced does.

Question 5

Why does the formatter slot use `item.key`, not `name`?

Accepted Answer

In Vue, `name` belongs to the slot itself, so the kit passes each row's series key as `item.key` in place of shadcn's `name` argument. Look the label up with `chartConfig[item.key as keyof typeof chartConfig]?.label`, as both slot variants do. The slot also gets `index`, the row's place, and `value`.

Question 6

Where does Advanced's total row come from?

Accepted Answer

Inside its `#formatter` slot: on the second and last row, `v-if="index === 1"` draws a Total under a `border-t` rule, and `dayTotal(item.point.datum)` adds that day's running and swimming. For more series, test for the last index and sum over the config keys instead of naming two fields.

Question 7

Do the tooltip options carry over to the area or pie charts?

Accepted Answer

Yes. They're options and slots of the kit's `ChartTooltipContent`, which the area, bar, line, pie, radar and radial charts here render through `ChartContainer` too. Copy the `:tooltip` object or the `#tooltip` slot onto any of them.

Question 8

Why is the second day's tooltip open before I hover?

Accepted Answer

Each variant sets `:default-index="1"` on `ChartContainer`, so the second day's tooltip shows before any pointer, as Recharts' `defaultIndex` does. Remove the prop for a chart that waits for hover or focus. From the keyboard, Tab into the chart and the arrow keys move the tooltip from day to day.

Question 9

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn-vue@latest add` with its URL. It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.

Question 10

Are the charts free?

Accepted Answer

Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Chart tooltips as Vue props and slots.

Tooltips

More Vue charts

Tooltips in other frameworks

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Which of the 9 tooltips do I copy?

What can the `:tooltip` object set?

How does the heading become a full date?

How do I add `kcal`, or any unit, to each value?

Why does the formatter slot use `item.key`, not `name`?

Where does Advanced's total row come from?

Do the tooltip options carry over to the area or pie charts?

Why is the second day's tooltip open before I hover?

How do I install a chart?

Are the charts free?

Tooltips you can slot into Vue.