Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Line Chart with Custom Labels

A line across five browsers with each point labeled by its browser's name, so the categories read without an x axis, in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick it when the points are named categories and you'd rather name them on the chart than under it. The names sit next to the data, so the eye doesn't travel to an axis and back. For values instead of names, use the Line Chart with Labels; when color should carry the category, the colored dots version.

A natural curve through five browsers, Chrome to Other, with a dot on each point and the browser's name above it in the text color. There's no x axis, the margins leave room for the end labels, and the tooltip shows the visitor count alone.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartLineLabelCustom } from "@/components/charts/chart-line-label-custom";
<ChartLineLabelCustom />

Customize

  • <LabelList dataKey="browser" position="top" offset={12} /> inside <Line> prints each row's browser above its point.
  • Its formatter maps the key to chartConfig[value].label, so chrome prints as Chrome.
  • className="fill-foreground" and fontSize={12} style the labels; there's no <XAxis>, since the labels name the points.
  • margin={{ left: 24, right: 24, top: 24 }} keeps the first, last and highest labels inside the card.
  • <ChartTooltipContent hideLabel indicator="line" nameKey="visitors" /> names the row from chartConfig.visitors.

FAQ

Where do the label names come from?

From dataKey="browser" on <LabelList>, passed through a formatter that returns chartConfig[value]?.label. Without the formatter you'd see the raw keys, chrome and safari.

Can a label show the name and the value?

Yes. Give <LabelList> a content function that returns an SVG <text> with both, or add a second <LabelList dataKey="visitors" position="bottom" /> under each point.

What about long category names?

Shorten them in the formatter, or use content to render a rotated <text>. The margins have to fit the longest label, so test with real names.

Should I bring back the x axis?

Not while every point has a label: the names would appear twice. Bring it back if you label only some points, or if the line has more categories than fit as labels.

Does the order of the rows matter?

Yes. The line connects the browsers in row order, so sort the rows by visitors for a clean falloff. In any other order the line zigzags, and the Bar Chart with Custom Labels says the same thing more plainly.

How do screen readers get the browser names?

With accessibilityLayer, Tab and the arrow keys move between points and the tooltip follows. Remove hideLabel so the tooltip names the browser above the count; the labels themselves are only drawn text.

API Reference

ChartContainer

PropType
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>

PropType
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>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
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 – any

payload – 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.

All 70 charts