Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Tooltip

Tooltip - Icons Chart for React

A chart tooltip showing each series' icon in place of its color dot.

Framework
UI library

Use icons when they say more than a color dot. Each series in the chart config has an icon, and the tooltip draws it in place of the dot next to the series' label.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the icons get into the tooltip?

Set icon on the config entry. Running uses FootprintsIcon and swimming uses WavesIcon, next to the labels Running and Swimming. ChartTooltipContent draws that component in place of the color dot.

Do the icons use the series color?

No. Tooltip icons paint with text-muted-foreground at size-2.5. The bar color stays on fill: var(--color-running) and var(--color-swimming), from var(--chart-1) and var(--chart-2).

Why is there no date in the tooltip?

ChartTooltipContent sets hideLabel, so the title is hidden. XAxis still shows the day through tickFormatter={formatWeekday}, a short weekday of the date string. The row is the icon, the label, and the value.

Why is a tooltip open on load?

ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is the second row, 2024-07-16. cursor={false} turns the hover cursor off. BarChart sets accessibilityLayer.

How are the bars stacked?

Both Bar components set stackId="a". Running is first, on the baseline, with radius={[0, 0, 4, 4]}. Swimming is on top, with radius={[4, 4, 0, 0]}. The tooltip lists both, each with its own icon.

How do I swap an icon?

Replace the component on that config entry. icon is the component itself, not an element. ChartLegendContent reads the same icon if you add a ChartLegend. This file doesn't render one, so the icons are only in the tooltip.

All 70 chart examples