Bar Chart

A bar chart for comparing values across categories, grouped, stacked, or horizontal.

When to use

Use when: Comparing values across categories, grouped, stacked, or horizontal.
Avoid when: There are many categories with long names on a narrow screen, or parts of a whole; use a horizontal bar or Pie Chart.

Installation

bunx shelf add chart-bar

The source lands in src/components/ui/chart-bar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-bar";

<BarChart aria-label="Orders by channel" data={data}>
  <Chart.Grid />
  <Chart.XAxis dataKey="channel" />
  <Chart.YAxis />
  <Chart.Tooltip />
  <Bar dataKey="orders" />
</BarChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.