Skip to content
txbrendan/ui

Bar Chart

beta

Bars that compare numbers across categories, side by side or stacked, with a themed tooltip, legend, and states.

Preview

Texture

one

Desktop visitors

two

Visitors by device
  • Desktop
  • Mobile

key on top

Visitors by device
  • Jun

stacked

All visitors
  • Desktop
  • Mobile

stacked, key on top

All visitors
  • Jun

currency

Revenue by quarter

texture

Fades down each bar

Grain, fills in on hover

thin

Even dots

Thin toward the axis

Thin down each bar

fill

Dots thin one by one

Dots thin in steps

stacked

Even dots, stacked

Each stack thins from its top

intro

Intro
Dots come in
  • Desktop
  • Mobile

hover

Fills in near the pointer

Stays still

idle

At rest
Dots move at rest
  • Desktop
  • Mobile

size

Small

Medium

Large

loads, then draws

Visitors by device

Loading chart

loading

Visitors by device
  • Desktop
  • Mobile

Loading chart

empty

Visitors by device
No visitors yet

No visitors yet

error

Visitors by device

Visitors could not load.

Visitors could not load.

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/bar-chart

Use it for

  • Comparing amounts across a few categories, like visitors per month or sales per region.
  • Pass data, a config with one entry per series, and the categoryKey that names each bar.
  • Use stacked when the parts add up to a total that matters.
  • Pass valueFormat, like { style: "currency", currency: "USD" }, to format the tooltip and the y axis.
  • Dithered, each bar's dots snap to its own edges, and hidden dots fill in near the pointer. Pass thin to keep the dots even, thin them toward the axis, or thin them down each bar. Pass fill, intro, hover, or idle to change how they thin and move, or set those on a Dither around the chart.
  • Pass legend="top" for a key beside the title in place of the tooltip box. It shows the bar under the pointer, and its numbers roll as you move. Press a series in the key to hide or show it.

Avoid it for

  • A trend over many points in time. Use LineChart or AreaChart.
  • Parts of one whole. Use DonutChart for up to five parts.
  • More than five series. The theme has five chart colors.
  • Dozens of categories. Bars get too thin. Show the top few, or use a table.

Props

  • data

    One object per category, like { month: "Jan", desktop: 186 }.

    TData[]

  • config

    The series to draw, in order. Colors default to --chart-1 through --chart-5.

    { [key in keyof TData]?: { label: string; color?: string } }

  • categoryKey

    The field that names each category, shown on the x axis.

    keyof TData

  • title

    A visible title. It names the chart. TypeScript requires title, aria-label, or aria-labelledby.

    ReactNode

  • aria-label

    Names the chart when it has no visible title.

    string

  • size

    Height: 5, 7, or 9 times --control-h-md, so density scales it.

    "sm" | "md" | "lg" · default "md"

  • stacked

    Stacks the series in one bar per category.

    boolean · default false

  • valueFormat

    Formats tooltip values, and y axis ticks in short form, like $12.3K.

    Intl.NumberFormatOptions

  • locale

    The locale for numbers. Fixed, so server and browser print the same text.

    string · default "en-US"

  • legend

    Shows the legend. By default it shows when there are two or more series. "top" shows it as a key beside the title, with the bar under the pointer in place of the tooltip box, and the last bar at rest.

    boolean | "top"

  • loading

    Shows skeleton bars at the same height. When data arrives, they fade out while the bars grow in.

    boolean · default false

  • error

    Shows this message in place of the chart. true shows a default message.

    ReactNode

  • onRetry

    Shows a retry button under the error.

    () => void

  • emptyText

    Shown when data is empty.

    ReactNode · default "No data yet"

  • texture

    dither draws the bars as dots, with a glow on dark pages, gradient fades each bar down from its top, and grain speckles it. Hover fills the bar under the pointer. Left out, the chart follows the Texture around it.

    "flat" | "dither" | "gradient" | "grain"

  • thin

    Dithered, where the dots thin out: "none" keeps them even down each bar, "plot" fills them solid at the top of the plot and thins them toward a light base at the axis, so short bars stay lighter, and "bar" thins them down each bar from its own top to a light base at the axis.

    "none" | "plot" | "bar" · default "none"

  • fill

    Dithered, with thin, how the dots thin: one by one, or in 8 even steps. Left out, the chart follows the Dither around it.

    "scatter" | "steps" · default "scatter"

  • intro

    Dithered, how the dots come in when the chart first shows. Any but "fade" brings the bars in as dots, in place of their grow. Motion off plays none. Left out, the chart follows the Dither around it.

    "fade" | "sweep" | "rain" | "ripple" | "pop" | "fall" · default "fade"

  • hover

    Dithered, "fill" fills in hidden dots near the pointer, and they fade back when it leaves. Even dots fill in toward solid. Left out, the chart follows the Dither around it.

    "fill" | "none" · default "fill"

  • idle

    Dithered, what the dots do at rest: a band of extra dots passing across, single dots blinking out and on, the thin edge filling in deeper and back, or soft patches of extra dots drifting across. Left out, the chart follows the Dither around it.

    "none" | "wave" | "twinkle" | "breathe" | "drift" · default "none"

  • className

    Extra classes. Later classes win, so className='h-96' replaces the height.

    string

Accessibility

  • Renders a <figure> named by its title, or by aria-label. TypeScript requires one.
  • Recharts' keyboard layer stays on: Tab focuses the chart, the arrow keys move between categories, and the tooltip reads each one out. With the key on top, the key follows the arrow keys too, and the tooltip stays on the page for screen readers only, so each category is still read out.
  • The key on top sits beside the title, not in it, so the chart's name never changes as the key moves. Each value holds the width of its longest one, so the key stays still as its numbers roll.
  • Each series in the key is a toggle button. A hidden series fades out where it is, leaves the tooltip, and keeps the y axis still. In a stack, the rest glide down to close the gap once it has faded. The last one shown cannot hide. Tab reaches these buttons first, then the chart.
  • Keeps one height while it loads, draws, fails, or has no data, so the page does not move. When the page prints, it asks the browser to keep a chart that fits on one page whole. In the light theme, it asks the browser to print legend dots and loading shapes even with backgrounds off.
  • Loading, the error, and the empty text are read out through a status line that stays on the page.
  • Series colors come from --chart-1 to --chart-5, which the theme tests hold to 3:1 against the page. The legend and tooltip name each series in text.
  • Bars grow in over three times --motion-duration-base, once the chart is on screen. They finish at once when the page prints. At 0ms they draw at once, and Recharts skips the animation for reduced motion.
  • Dithered dots move only while the theme's pulse runs, so reduced motion and motion off keep them still. Forced colors keeps them still too, and shows every grid line. A print shows the still dots.

Examples

Two series

const data = [
  { month: "Jan", desktop: 186, mobile: 80 },
  { month: "Feb", desktop: 305, mobile: 200 },
  { month: "Mar", desktop: 237, mobile: 120 },
];

<BarChart
  title="Visitors by device"
  data={data}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="month"
/>

Key beside the title in place of the tooltip

<BarChart
  title="Visitors by device"
  data={data}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="month"
  legend="top"
/>

Stacked, with currency

<BarChart
  title="Revenue by plan"
  data={[
    { quarter: "Q1", pro: 8200, team: 4200 },
    { quarter: "Q2", pro: 9100, team: 6150 },
  ]}
  config={{ pro: { label: "Pro" }, team: { label: "Team" } }}
  categoryKey="quarter"
  stacked
  valueFormat={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
/>

Dots that thin down each bar

<BarChart
  title="Visitors by device"
  data={data}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="month"
  texture="dither"
  thin="bar"
  intro="rain"
/>

While it loads, and when it fails

<BarChart
  aria-label="Visitors by device"
  data={data ?? []}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="month"
  loading={isLoading}
  error={error ? "Visitors could not load." : undefined}
  onRetry={() => refetch()}
/>