Bar Chart

Installation

npx shadcn@latest add https://brockui.com/r/bar-chart

Usage

import { BarChart } from "@/components/charts/bar-chart";

const data = [
  { label: "DIRECT", value: 4120 },
  { label: "SEARCH", value: 3870 },
  { label: "SOCIAL", value: 1290 },
  { label: "EMAIL", value: 940 },
];

export function Example() {
  return (
    <BarChart
      data={data}
      sort="desc"
      source="Brock Analytics, 2026"
    />
  );
}

// Opinionated defaults — but every sub-component is yours to replace via the
// `slots` prop. The data is passed in; you control the rendering.
export function WithCustomTooltip() {
  return (
    <BarChart
      data={data}
      slots={{
        tooltip: ({ label, value }) => (
          <div className="border-2 border-brock-accent p-2">
            <span className="font-mono tabular-nums">{value}</span> · {label}
          </div>
        ),
      }}
    />
  );
}

Props

Accessibility

Design moves

1. 1. Height derives from the data: N bars × barThickness + gaps. No height prop – a ranking never crops its categories.
2. 2. Category labels in a fixed-width left column (labelWidth) with an explicit truncation ladder: ellipsis → full text in tooltip + sr-table → container-query clamping. Long labels are WHY bar charts exist.
3. 3. Single --brock-accent on both sides of zero; negatives grow left from a vertical 1px baseline. No gridlines (Tufte data-ink).
4. 4. Direct value labels at the outer end by default (dataLabels: "auto") – the X axis hides when every value is printed; deep bars flip the label inside in background color.
5. 5. Vertical reference line (fixed or mean/median over the original input) with its chip at the top.
6. 6. Deliberate v1 scope cuts per canon §13: no bands / trend / hatch-index shortcuts (temporal, column-specific) and no free annotations – per-datum note covers ranking callouts.

When to use

Ranked categorical comparisons – traffic by channel, revenue by region, contribution by product (negatives are first-class). Reach for Bar over Column whenever category labels are words, not timestamps: horizontal labels read at any length. sort + topN turn raw data into an honest ranking with an explicit 'Other'.

When not to use

For time buckets use Column Chart (time reads left-to-right). For continuous trends use Line Chart. For tiny embedded charts use Sparkline. For part-to-whole composition use Stacked Bar Chart (coming soon).

Inspired by

• · Financial Times Visual Journalism – ranked bars with sparse axes and direct labels
• · Datawrapper – bars over columns whenever labels are words
• · Edward Tufte, The Visual Display of Quantitative Information – data-ink discipline