shadcn.io is not affiliated with official shadcn/ui
About
Use it when people need the numbers, not only the shape: a report, a slide, a screenshot in a ticket. Labels suit a handful of points; past ten or so they collide. To name categories instead of printing values, see the Line Chart with Custom Labels.
A natural curve through six months with a dot on each point and its value in small text above it. The top margin is larger so the highest label isn't cut off, and the tooltip shows the month and value with a line indicator.
Installation
Usage
import { ChartLineLabel } from "@/components/charts/chart-line-label";<ChartLineLabel />Customize
<LabelList position="top" offset={12} />inside<Line>prints each point's value 12px above it.className="fill-foreground"andfontSize={12}style the labels in the theme's text color.margin={{ top: 20 }}on<LineChart>leaves room for the label over the highest point.dot={{ fill: "var(--color-desktop)" }}andactiveDot={{ r: 6 }}mark the points the labels belong to.<ChartTooltipContent indicator="line" />keeps the month as the tooltip's label.
FAQ
How do I format the labels?
Pass formatter to <LabelList>: it gets the raw value and returns the text, for example (value) => value.toLocaleString().
How do I move the labels closer to the points?
Change offset on <LabelList> (12 here), and raise margin.top on <LineChart> to match.
What if the labels overlap?
Recharts doesn't move labels apart. Use fewer points or a smaller fontSize, or give <LabelList> a formatter that returns an empty string for the rows to skip.
Can I label only the highest and lowest months?
Yes. Give <LabelList> a formatter, or a content function, that returns text only for the extremes and nothing for the other months.
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
Line Chart with Custom Labels
Line chartsEach point labeled with its category's name, in its color.
Line Chart with Dots
Line chartsA line with a dot on every data point.
Bar Chart with Labels
Bar chartsEach bar's value printed above it.
Pie Chart with Labels
Pie chartsEach slice's value printed beside it.
Area Chart with Axes
Area chartsStacked areas with both axes and their tick labels drawn.
Line Chart
Line chartsOne series as a smooth line over six months.