shadcn.io is not affiliated with official shadcn/ui
About
Reach for it when a bare number would be ambiguous: calories, minutes, dollars. Each row keeps the series name on the left and puts the value on the right with its unit in muted text, and the date heading and color dots are gone, so the tooltip is two compact lines.
Without dots, the names carry the series. That works with two well-named series; with more, or with similar names, keep the dots and use the Advanced variant.
Installation
Usage
import { ChartTooltipFormatter } from "@/components/charts/chart-tooltip-formatter";<ChartTooltipFormatter />Customize
formatter={(value, name) => …}replaces each row's content, including the indicator, so there are no dots.chartConfig[name]?.labelturns the data key back intoRunningorSwimming.hideLabeldrops the heading;defaultIndex={1}opens the tooltip on the second day.min-w-[130px]on the row keeps the tooltip from narrowing as the values change.
FAQ
How is the unit added to each value?
formatter={(value, name) => …} on ChartTooltipContent returns the whole row: the chartConfig label for name, then the value and a kcal span in text-muted-foreground.
Where did the color dots go?
formatter replaces the entire row, indicator included. Render a swatch yourself at the start, a size-2.5 square painted with the series' --color- variable for name, as the Advanced variant does.
How do I format the numbers themselves?
Format the number inside the formatter. value.toLocaleString() adds thousands separators, and Intl.NumberFormat with style: "currency" or style: "unit" writes dollars, percents or kilometers for the reader's locale.
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
Advanced Chart Tooltip
TooltipsA tooltip with formatted values and a total row.
A tooltip whose label is formatted as a full date.
Chart Tooltip without Label
TooltipsA tooltip with the series alone, no label above them.
Chart Tooltip with Icons
TooltipsA tooltip with an icon beside each series.
Bar Chart with Labels
Bar chartsEach bar's value printed above it.
Chart Tooltip
TooltipsThe default tooltip: a label, then each series with its dot.