shadcn.io is not affiliated with official shadcn/ui
Chart examples · Tooltip
Tooltip - Label Formatter Chart for React
A chart tooltip that formats its date label as a full date.
Use labelFormatter when the axis shows a short label but the tooltip should give the whole thing. The axis shows weekdays, and the tooltip's title turns the date into a full date with the month's name and the year.
Preview
Installation
FAQ
How does the tooltip turn the date into a full date?
ChartTooltipContent sets labelFormatter to formatDateLabel. That function receives the label, which is the date string, and calls toLocaleDateString with en-US, a long month, a numeric day, and a numeric year.
What does the axis show?
XAxis uses dataKey="date" and tickFormatter={formatWeekday}, a short weekday only. axisLine and tickLine are false, and tickMargin is 10. The full date is only in the tooltip title.
What is under that title?
ChartTooltipContent leaves indicator at dot. Each row is the label from config, Running or Swimming, and the value with toLocaleString. There is no formatter and no hideLabel, so the title and the dots both stay.
Why is a tooltip open on load?
ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is 2024-07-16, so the title is that date run through formatDateLabel. cursor={false} turns the hover cursor off.
Related
- Tooltip - Default ChartThe default chart tooltip, with a label
- Tooltip - Custom Label ChartA chart tooltip whose label comes from a
- Tooltip - No Label ChartA chart tooltip without a label or
- Tooltip - Formatter ChartA chart tooltip that formats each row
- A line chartA line chart drawing one series as a
- A bar chartA bar chart with rounded corners