Bar Chart

Установка

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

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

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

Пропы

Доступность

Дизайн-ходы

1. 1. Высота выводится из данных: N полос × barThickness + зазоры. Пропа height нет – рейтинг никогда не обрезает свои категории.
2. 2. Подписи категорий в колонке фиксированной ширины (labelWidth) с явной лестницей обрезки: многоточие → полный текст в тултипе и sr-таблице → сжатие через container queries. Длинные подписи – причина существования bar chart.
3. 3. Один --brock-accent по обе стороны нуля; негативные растут влево от вертикальной базы 1px. Без сетки (data-ink, Тафти).
4. 4. Прямые подписи значений у внешнего конца по умолчанию (dataLabels: "auto") – ось X скрывается, когда каждое значение напечатано; глубокие полосы переносят подпись внутрь цветом фона.
5. 5. Вертикальная референсная линия (фиксированная или mean/median по исходным данным) с плашкой сверху.
6. 6. Осознанные вырезы v1 по канону §13: без bands / trend / hatch-шорткатов (временна́я семантика Column) и без свободных аннотаций – per-datum note покрывает выноски рейтинга.

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

Ранжированные категориальные сравнения – трафик по каналам, выручка по регионам, вклад по продуктам (отрицательные значения полноправны). Берите Bar вместо Column всегда, когда подписи категорий – слова, а не временные метки: горизонтальные подписи читаются при любой длине. sort + topN превращают сырые данные в честный рейтинг с явным «Other».

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

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

Источники

• · Financial Times Visual Journalism – ранжированные полосы с разреженными осями и прямыми подписями
• · Datawrapper – bars вместо columns всегда, когда подписи – слова
• · Эдвард Тафти, The Visual Display of Quantitative Information – дисциплина data-ink