Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Tooltip

Tooltip - No Label Chart for React

A chart tooltip without a label or indicators, showing only names and values.

Framework
UI library

The most compact tooltip: hideLabel and hideIndicator leave only each series' name and value.

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 I show only the names and values?

ChartTooltipContent sets hideLabel and hideIndicator. hideLabel hides the tooltip title. hideIndicator hides the color dot. Each row is the label from config, Running or Swimming, and the value.

How is the value formatted?

ChartTooltipContent prints a numeric value with toLocaleString, using font-mono and tabular-nums. This demo doesn't set formatter, so there is no unit after the number. The series name comes from config, not from the data key.

Where did the date go?

It stays on XAxis. dataKey is date, and tickFormatter is formatWeekday, a short weekday. axisLine and tickLine are false, and tickMargin is 10. The tooltip no longer repeats that date.

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

Can I hide the title and keep the dots?

Yes. Set hideLabel and leave hideIndicator unset. This demo sets both. indicator still defaults to dot for a row that isn't hidden. Colors come from config: running is var(--chart-1) and swimming is var(--chart-2).

All 70 chart examples