shadcn.io is an independent project built on shadcn/ui
Stacked running and swimming bars. The tooltip is already open on the second day. The title is the raw date from the row, then a dot, a name, and a value for each series.
Start here when the default tooltip is enough. Change the marker, hide the title, or format the date when it is not. A Tooltip is for a hover on a control, not on a bar. In React, Base UI does not supply this copy. Names come from the config, values from the row.
Installation
Anatomy
Usage
<div className="w-full max-w-xl rounded-md border bg-background p-4">
<ChartContainer config={chartConfig}>
<BarChart accessibilityLayer data={chartData}>
<XAxis
axisLine={false}
dataKey="date"
tickFormatter={formatWeekday}
tickLine={false}
tickMargin={10}
/>
<Bar
dataKey="running"
fill="var(--color-running)"
radius={[0, 0, 4, 4]}
stackId="a"
/>
<Bar
dataKey="swimming"
fill="var(--color-swimming)"
radius={[4, 4, 0, 0]}
stackId="a"
/>
<ChartTooltip
content={<ChartTooltipContent />}
cursor={false}
defaultIndex={1}
/>
</BarChart>
</ChartContainer>
</div>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.
API Reference
Chart
Sets config={chartConfig}. The rest is on the Chart page.
