Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Bar Chart

Six rounded bars, one per month, for comparing a single series category by category. The base bar chart for React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick it when people compare separate periods or categories and the heights matter: one month's sales against the next. For the shape of a trend, an area or line chart says more. For two series, the multiple or stacked versions keep them together.

Each month is one bar with 8px rounded corners, over horizontal grid lines. The month labels sit under the bars, cut to three letters, with no axis line and no value axis. The tooltip shows the value without the month.

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

Customize

  • <BarChart data={chartData}> holds the rows, and <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} /> draws them.
  • radius takes one number for every corner, or [topLeft, topRight, bottomRight, bottomLeft].
  • <CartesianGrid vertical={false} /> draws the horizontal guides; <XAxis> hides its line and ticks, and tickFormatter keeps three letters.
  • Bar width comes from the chart's barCategoryGap. Set barSize on <Bar> for a fixed width, or maxBarSize for a cap.
  • <ChartTooltipContent hideLabel /> drops the month from the tooltip, and cursor={false} turns off the hover highlight.

FAQ

How do I change the bar corners?

Set radius on <Bar>: one number rounds every corner, and [8, 8, 0, 0] rounds only the top two. 0 gives square bars.

How do I make the bars thinner or wider?

Set barCategoryGap on <BarChart> for the space between bars, barSize on <Bar> for a fixed width, or maxBarSize to cap it as the chart grows.

How do I show the values on the side?

Add <YAxis axisLine={false} tickLine={false} tickMargin={8} /> inside <BarChart>. It takes room on the left, and the bars narrow to fit.

How do I plot my own categories?

Replace chartData and set dataKey on <XAxis> and <Bar>. Bars follow the order of the rows, so sort them first if order matters, and rename the desktop entry in chartConfig to the bar's dataKey.

Why doesn't the tooltip show the month?

<ChartTooltipContent hideLabel /> hides it, since the month is already under the bar. Remove hideLabel to show it.

Can I use it from the keyboard?

Yes. accessibilityLayer on <BarChart> makes the chart focusable, and the arrow keys move the tooltip from one month to the next.

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