Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Tooltip

Tooltip - Default Chart for React

The default chart tooltip, with a label, a dot for each series and its value.

Framework
UI library

The tooltip as it comes: the hovered label as the title, then a dot, a name and a value for each series. The chart opens with the tooltip shown on the second day.

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 default tooltip include?

ChartTooltip renders ChartTooltipContent with no extra props. indicator stays dot, a small swatch in the series color. Each row is the label from config, Running or Swimming, and the value passed through toLocaleString in font-mono with tabular-nums.

Why is the tooltip title a raw date?

The title is the XAxis value, the date string, like 2024-07-16. This demo doesn't set labelFormatter. The axis uses tickFormatter={formatWeekday}, which prints a short weekday, so the axis and the tooltip title are formatted differently.

Why is a tooltip open on load?

ChartTooltip sets defaultIndex={1}. That is the second row, 2024-07-16. Hovering another bar moves it. cursor={false} turns the bar's hover cursor off.

How do I change the dot?

Set indicator on ChartTooltipContent. It accepts dot, line, or dashed. line is a narrow bar in the series color. hideIndicator removes it. This demo leaves the default dot.

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)".

Where do the swatch colors come from?

config sets running to var(--chart-1) and swimming to var(--chart-2). ChartContainer writes --color-running and --color-swimming. BarChart sets accessibilityLayer. Keep ChartTooltip inside ChartContainer so the content can read config.

All 70 chart examples