Line Chart

Установка

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

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

import { LineChart } from "@/components/charts/line-chart";

const data = [
  { name: "Revenue", data: [120, 138, 131, 159, 172, 188] },
  { name: "Costs", data: [98, 104, 109, 112, 118, 121] },
];
const labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN"];

export function Example() {
  return (
    <LineChart
      data={data}
      labels={labels}
      height={240}
      emphasisSeries="Revenue"
      source="Brock Analytics, 2026"
    />
  );
}

// Opinionated defaults — but every sub-component is yours to replace via the
// `slots` prop. The crosshair tooltip lists every series at the hovered x.
export function WithCustomTooltip() {
  return (
    <LineChart
      data={data}
      labels={labels}
      slots={{
        tooltip: ({ xLabel, points }) => (
          <div className="border-2 border-brock-accent p-2">
            <div className="font-mono text-[10px] uppercase">{xLabel}</div>
            {points.map((p) => (
              <div key={p.series} className="flex gap-2">
                <span style={{ color: p.color }}>{p.series}</span>
                <span className="font-mono tabular-nums">{p.formatted}</span>
              </div>
            ))}
          </div>
        ),
      }}
    />
  );
}

Пропы

Доступность

Дизайн-ходы

1. 1. Прямые подписи у концов линий заменяют легенду (подпись FT), в цвете каждой линии, с защитой от коллизий по вертикали.
2. 2. Акцент, не радуга: один ряд в --brock-accent на полную, остальные приглушены до сдержанной серой шкалы. Никакой разноцветной «лапши».
3. 3. Бледная горизонтальная сетка – намеренное и верное отступление от правила «без сетки» для столбцов. Тафти / FT допускают её для чтения временных рядов.
4. 4. Честные разрывы: точка y: null РАЗРЫВАЕТ линию на под-пути – пропуск никогда не интерполируется молча.
5. 5. Шкала Y показывает изменение, а не величину – «красивый» авто-диапазон, по умолчанию НЕ от нуля (yBaselineZero включает ноль для долей/процентов).
6. 6. Перекрестье + тултип на несколько рядов привязывается к ближайшему x и перечисляет значение каждого ряда там, по убыванию.
7. 7. Редакционные слои: вертикальные маркеры events, затенённые bands (затенение рецессий), dashed-ряд для прогнозов – всё воспроизводится в SVG-экспорте.
8. 8. Понятное пустое состояние (иконка + сообщение No data) и сплошной скелетон загрузки в том же визуальном языке Тафти.

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

Line Chart подходит для непрерывных рядов, где ось X упорядочена, а история – это тренд: метрики во времени (выручка, задержка, активные пользователи), индексированные сравнения сущностей (страны, когорты, приведённые к 100) и факт-vs-прогноз (пунктирная линия прогноза). Несколько рядов делят одну ось Y, чтобы читаться друг против друга; акцент держит один в фокусе, остальные дают контекст.

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

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

Источники

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