shadcn.io is an independent project built on shadcn/ui
The same stacked bars, tooltip already open on the second day. No date title and no color marks. Each row is the series name and its value.
Use the compact form when the axis already shows the date and the chart shows the colors. Keep the title if the tooltip can open away from that label. For a control, use a Tooltip. In React, Base UI does not omit the title. You hide it, and the values still come 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 hideIndicator hideLabel />}
cursor={false}
defaultIndex={1}
/>
</BarChart>
</ChartContainer>
</div>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.
API Reference
Chart
Sets config={chartConfig}, hideIndicator and hideLabel. The rest is on the Chart page.
