Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Tooltip

Tooltip - Custom Label Chart for React

A chart tooltip whose label comes from a chart config entry instead of the data.

Framework
UI library

Use labelKey when the tooltip's title should come from the chart config instead of the hovered data. Here the title reads Activities over the running and swimming rows, with line indicators.

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 does the tooltip title become Activities?

ChartTooltipContent sets labelKey="activities". That key is looked up in config, where activities has label: "Activities" and no color. The same title is used for every bar. The date stays on the axis.

What does indicator line draw?

indicator="line" draws a narrow bar in the series color beside Running and Swimming. The default indicator is dot. The same prop also accepts dashed. The row names come from those entries' label in config.

What does the axis show if the tooltip doesn't?

XAxis uses dataKey="date" and tickFormatter={formatWeekday}, which prints a short weekday from the date string. axisLine and tickLine are false, and tickMargin is 10.

Why is a tooltip open before I hover?

ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is the second row, 2024-07-16, so that bar's tooltip renders on first paint. cursor={false} turns the hover cursor off.

How are the two 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)".

Where do Running and Swimming get their colors?

config sets running to var(--chart-1) and swimming to var(--chart-2). ChartContainer writes --color-running and --color-swimming. BarChart sets accessibilityLayer. The activities entry is only the tooltip title.

All 70 chart examples