shadcn.io is not affiliated with official shadcn/ui
Chart examples · Tooltip
Tooltip - Advanced Chart for React
A chart tooltip with a custom row for each series, units and a total.
Use a formatter when the tooltip needs more than a label and a number. Each row gets a color swatch, the series' label and its value in kcal, and the last row adds the day's total under a rule.
Preview
Installation
FAQ
What does the formatter replace?
ChartTooltipContent sets formatter to formatItem. When formatter is set, the default row (indicator, label, and value) is skipped and the function's result is the row. formatItem receives the value, the series name, the tooltip item, and the index.
What does one row contain?
A swatch colored with var(--color- plus the series name, then the label from config (Running or Swimming), then the value and the text kcal. The value uses font-mono and tabular-nums.
When does the total appear?
formatItem adds it when index === 1, the second series, swimming. It sums item.payload.running and item.payload.swimming and prints that under a border-t rule, with kcal again. A third series would not move that check.
Why is there no date in the tooltip?
ChartTooltipContent sets hideLabel, so the title is hidden. The date stays on XAxis, where tickFormatter is formatWeekday, a short weekday. The tooltip className is a fixed w-[180px].
Related
- Tooltip - Default ChartThe default chart tooltip, with a label
- Tooltip - Formatter ChartA chart tooltip that formats each row
- A horizontal bar chartA bar chart laid out horizontally, with
- Tooltip - Label Formatter ChartA chart tooltip that formats its date
- A line chart with dotsA line chart with a dot on every data
- A stacked area chartAn area chart stacking desktop and mobile