shadcn.io is not affiliated with official shadcn/ui
About
Start here. Every other tooltip on this page changes one thing about this one: a bold label on top, then a row per series with a square dot in its color, its name, and its value in a monospace column. Use it whenever two or more series share a point and the reader needs the numbers.
Under it is a stack of running and swimming over six days in July, with weekday ticks and no value axis, so the tooltip is the only place the exact values show.
Installation
Usage
import { ChartTooltipDefault } from "@/components/charts/chart-tooltip-default";<ChartTooltipDefault />Customize
<ChartTooltip content={<ChartTooltipContent />} />with no props draws the default: the label, a dot per series and the values.defaultIndex={1}opens the tooltip on the second day when the chart mounts. Remove it and nothing shows until hover.cursor={false}turns off the band Recharts draws behind the hovered bar.- Both
<Bar>s sharestackId="a".radius={[0, 0, 4, 4]}rounds the bottom of running and[4, 4, 0, 0]the top of swimming.
FAQ
Why does the label show 2024-07-16 and not the weekday?
tickFormatter on <XAxis> only changes the ticks. ChartTooltipContent shows the raw date. Add labelFormatter={(value) => …} to format it, as the Label Formatter variant does.
Why does it list both series when I hover one segment?
Recharts' tooltip is shared: it reports every <Bar> at the hovered index, in the order the bars are declared, so both segments of the day get a row.
Can I move the tooltip with the keyboard?
Yes. accessibilityLayer on <BarChart> makes the chart focusable: Tab into it, then the left and right arrows move the tooltip from day to day.
Why is the tooltip open before I hover?
defaultIndex={1} on <ChartTooltip> shows the second day's tooltip when the chart mounts. Remove it and the tooltip waits for a pointer or a key.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
A tooltip that marks each series with a line, not a dot.
A tooltip whose label is formatted as a full date.
Chart Tooltip without Label
TooltipsA tooltip with the series alone, no label above them.
Stacked Bar Chart with Legend
Bar chartsTwo series stacked in each bar, with a legend.
Multiple Bar Chart
Bar chartsTwo series grouped side by side for each month.
Chart Tooltip without Indicator
TooltipsA tooltip with no color indicator beside the series.