Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Tooltip

Tooltip - Formatter Chart for React

A chart tooltip that formats each row with its value and a unit.

Framework
UI library

Use a formatter to add a unit or change how each value reads while keeping the rows simple. Each row shows the series' label and its value followed by kcal.

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

What does the formatter render?

ChartTooltipContent sets formatter to formatItem. That function receives the value and the series name. It prints the label from config (Running or Swimming), then the value and the text kcal. The value uses font-mono and tabular-nums.

Does the default dot still show?

No. A formatter replaces the whole row, so this tooltip has no color dot and no built-in value. The row is the markup formatItem returns, with min-w-[130px]. The name falls back to the series key when config has no entry for it.

Why is the date missing from the tooltip?

hideLabel hides the tooltip title. The date stays on XAxis, where tickFormatter is formatWeekday, a short weekday of the date string. axisLine and tickLine are false, and tickMargin is 10.

Why is a tooltip already open?

ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is 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]} and fill="var(--color-running)". Swimming is on top, with radius={[4, 4, 0, 0]} and fill="var(--color-swimming)".

How do I change the unit?

The unit is the text kcal inside formatItem, after the value. The series name selects the label with chartConfig[name]. Running is var(--chart-1) and swimming is var(--chart-2) in config.

All 70 chart examples