Question 1

Which tooltip should I start from?

Accepted Answer

Start from Default: the hovered category as a label, then each series with its dot and value. Label Formatter spells out a raw date, Line Indicator suits line and area charts, and No Indicator and No Label trim it for small charts. Formatter adds units, Icons a symbol per series, Advanced a total row, and Custom Label a heading from your config.

Question 2

What's the difference between the dot, line and dashed indicators?

Accepted Answer

Set `indicator` in `ChartContainer`'s `tooltip` prop: `dot`, the default, a small square in the series color; `line`, a 4px bar as tall as the row; or `dashed`, a narrow outline with a dashed border. The dot matches bars, the line matches the strokes of line and area charts, and dashed pairs with dashed strokes, such as a forecast beside actuals. Line Indicator and Custom Label use `{ indicator: "line" }`.

Question 3

How do I hide the tooltip's label or indicator?

Accepted Answer

Pass `hideLabel` in `ChartContainer`'s `tooltip` prop to drop the heading, and `hideIndicator` to drop the dot or line beside each row. No Indicator sets the second, No Label sets both. A config `icon` still shows with `hideIndicator`, since the icon takes the indicator's place.

Question 4

How do I format the values and dates in a tooltip?

Accepted Answer

Two functions. `labelFormatter` returns the heading from the label text and the focused points, as Label Formatter turns `2024-07-16` into July 16, 2024 with `toLocaleDateString`; add `timeZone: "UTC"` so a date-only string doesn't shift a day west of UTC. `formatter` draws each row from its value, series key, item and index, as Formatter does to add `kcal`, and it replaces the whole row, dot included. React and Solid pass both in `ChartContainer`'s `tooltip` prop; Vue and Svelte pass `formatter` as a slot or snippet of `ChartTooltipContent`.

Question 5

Where do the tooltip's names, heading and icons come from?

Accepted Answer

From `chartConfig`. Each row's name is its series' `label`, and `labelKey` heads the tooltip with another entry's label: Custom Label adds `activities: { label: "Activities" }`, with no color, so no legend item or variable comes from it. An `icon` on a series takes the place of its dot, as Lucide's `Footprints` and `Waves` do in Icons, and a legend on the same chart shows the icons too.

Question 6

How do I add a total row to the tooltip?

Accepted Answer

Advanced does it in `formatter`: on the last row it also draws a Total under a `border-t` rule, the day's values added up from the row's `point.datum`. To total more series, add over the `chartConfig` keys instead of naming each one. For a layout rows can't hold, give `ChartContainer` a body of your own: `renderTooltip` in React and Solid, the `tooltip` slot in Vue, the `renderTooltip` snippet in Svelte.

Question 7

Can I use these tooltips on other charts?

Accepted Answer

Yes. Every variant here draws the same stacked bar chart of running and swimming, so they're easy to compare, but the options belong to `ChartTooltipContent` in the `tanstack-chart` kit. It draws the tooltip on the area, line, pie, radar and radial charts too, so a variant's options work in any chart's `tooltip` prop.

Question 8

Can the tooltip open from the keyboard, or before anyone hovers?

Accepted Answer

Yes. Tab to the chart and the arrow keys step from one category to the next, the tooltip following; Enter or Space pins it and Escape closes it. It's a polite live region, so a screen reader reads each step. `defaultIndex` on `ChartContainer` opens a category's tooltip on the first render: every variant here sets `1`, the second day.

Question 9

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn@latest add` with its URL (`shadcn-vue` and `shadcn-svelte` for those ports). 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 for every framework.

Tooltips

More 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 tooltip should I start from?

What's the difference between the dot, line and dashed indicators?

How do I hide the tooltip's label or indicator?

How do I format the values and dates in a tooltip?

Where do the tooltip's names, heading and icons come from?

How do I add a total row to the tooltip?

Can I use these tooltips on other charts?

Can the tooltip open from the keyboard, or before anyone hovers?

How do I install a chart?

Are the charts free?

One tooltip, every chart.