Column Chart

Installation

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

Usage

import { ColumnChart } from "@/components/charts/column-chart";

const data = [142, 168, 187, 159, 203, 178, 215];
const labels = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];

export function Example() {
  return (
    <ColumnChart
      data={data}
      labels={labels}
      height={220}
      trend={0.184}
      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 (
    <ColumnChart
      data={data}
      labels={labels}
      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. Monospace Y-axis numbers + tabular-nums (Hack font) – values align by digit width.
2. 2. Single --brock-accent (orange) for all bars – both sides of zero. No gradient, no glow, no palette coding; per-bar color is reserved for single editorial exceptions (the anomaly, the current period).
3. 3. No gridlines. Single 1px baseline at zero (Tufte data-ink).
4. 4. Hover-tooltip: period label in Geist sans + value in Hack mono, in a single elevated card.
5. 5. Staggered entry animation (30ms cascade, scale-Y from baseline). Disabled on prefers-reduced-motion.
6. 6. Built-in source prop renders FT/Bloomberg-style attribution line below the chart.
7. 7. A clear empty state (icon + No data message) when the dataset is empty; a full state machine via loading / error (solid skeleton, refresh overlay with a spinner, retry) in the same visual language.

When to use

Column Chart fits ordered categories where each bar is a discrete bucket: temporal (hours, days, weeks, agent calls per minute) or ranked (traffic by channel via sort + topN, revenue by region, profit/loss by month – negatives are first-class). Best for showing volume, count, or activity rhythm at a glance with sparse axes that don’t compete with the data.

When not to use

For continuous trends use Line Chart. For tiny embedded charts inside metric cards or prose use Sparkline. For categorical ranking with long labels (horizontal bars) use Bar Chart (coming soon). For composition over time use Stacked Column Chart (coming soon).

Inspired by

• · Financial Times Visual Journalism – sparse axes, source-line attribution, single-color bars
• · Stripe Annual Letters – inline numerics in editorial flow
• · The Pudding – interactive storytelling with restraint
• · Edward Tufte, The Visual Display of Quantitative Information – data-ink discipline