Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Bar Chart with Labels

Monthly bars with each value printed above its bar, so the numbers read without hovering. Labeled bars for React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Print the values when people need the numbers at a glance: a report, a slide, a screenshot where nobody can hover. Six labels fit easily. With thirty bars they collide, and a tooltip alone does better.

These are the plain bar chart's bars, 8px corners over horizontal grid lines, with each value centered just above its bar in the foreground color. The plot leaves extra room on top so the tallest label fits.

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 { ChartBarLabel } from "@/components/charts/chart-bar-label";
<ChartBarLabel />

Customize

  • <LabelList position="top" offset={12} /> inside <Bar> prints each value; className="fill-foreground" and fontSize={12} style it.
  • margin={{ top: 20 }} on <BarChart> keeps the top label inside the chart.
  • A formatter on <LabelList> returns the text, for units or separators.
  • The bars are <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>, with the labels as their child.

FAQ

How do I add a unit or a currency to the labels?

Pass formatter to <LabelList>: it receives the value and returns the text, so Intl.NumberFormat or a % suffix goes there.

How do I put the value inside the bar?

Set position="insideTop" on <LabelList> and className="fill-background". center and insideBottom work too.

Why is the top label cut off?

It sits outside the plot. margin={{ top: 20 }} on <BarChart> makes room; raise it along with a bigger offset or fontSize.

What happens with many bars?

Once the bars get narrower than the numbers, the labels collide. Shorten them (1.2k), print every other one, or drop the labels and keep the tooltip.

Do the labels work in dark mode?

Yes. className="fill-foreground" on <LabelList> uses the theme's text color, so the labels flip with the .dark class.

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