Column Chart

Установка

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

Использование

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>
        ),
      }}
    />
  );
}

Пропы

Доступность

Дизайн-ходы

1. 1. Моноширинные числа оси Y + tabular-nums (шрифт Hack) – значения выравниваются по ширине цифры.
2. 2. Один --brock-accent (оранжевый) для всех столбцов – по обе стороны нуля. Без градиентов, свечения и палитр; per-bar color зарезервирован под единичные редакционные исключения (аномалия, текущий период).
3. 3. Без сетки. Одна линия 1px на нулевой базе (data-ink, Тафти).
4. 4. Тултип при наведении: подпись периода в Geist sans + значение в Hack mono, в единой приподнятой карточке.
5. 5. Каскадная анимация появления (30 мс на столбец, scale-Y от базы). Отключается при prefers-reduced-motion.
6. 6. Встроенный проп source рендерит строку атрибуции в стиле FT/Bloomberg под графиком.
7. 7. Понятное пустое состояние (иконка + сообщение No data) при пустом наборе; полная машина состояний через loading / error (сплошной скелетон, оверлей обновления со спиннером, повтор) в том же визуальном языке.

Когда использовать

Column Chart подходит для упорядоченных категорий, где каждый столбец – дискретный интервал: временной (часы, дни, недели, вызовы агента в минуту) или ранжированный (трафик по каналам через sort + topN, выручка по регионам, прибыль/убыток по месяцам – отрицательные значения полноправны). Лучше всего показывает объём, количество и ритм активности с первого взгляда – разреженные оси не спорят с данными.

Когда не использовать

Для непрерывных трендов – Line Chart. Для крошечных графиков внутри метрик-карточек и текста – Sparkline. Для рейтингов с длинными подписями (горизонтальные полосы) – Bar Chart (скоро). Для состава во времени – Stacked Column Chart (скоро).

Источники

• · Financial Times Visual Journalism – разреженные оси, строка источника, одноцветные столбцы
• · Годовые письма Stripe – числа внутри редакционного текста
• · The Pudding – интерактивный сторителлинг со сдержанностью
• · Эдвард Тафти, The Visual Display of Quantitative Information – дисциплина data-ink