KvalityUI

TrendChart

Линейный график по дням, до двух серий. Цвета и подсказки — из токенов темы.

Живой код — редактируйте
const trendTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "day", label: "День", role: "dimension", unit: "text" },
    { key: "visits", label: "Визиты", role: "metric", unit: "count" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" }
  ],
  rows: [
    { day: "2026-10-13", visits: 420, submissions: 14 },
    { day: "2026-10-14", visits: 510, submissions: 19 },
    { day: "2026-10-15", visits: 480, submissions: 17 },
    { day: "2026-10-16", visits: 560, submissions: 23 },
    { day: "2026-10-17", visits: 530, submissions: 21 },
    { day: "2026-10-18", visits: 390, submissions: 15 },
    { day: "2026-10-19", visits: 570, submissions: 19 }
  ]
};

render(
  <TrendChart {...toTrend(trendTable)} />
);

Свои данные

Живой код — редактируйте
<TrendChart
  labels={[
    '2026-10-13',
    '2026-10-14',
    '2026-10-15',
    '2026-10-16',
    '2026-10-17'
  ]}
  series={[
    {
      name: 'Звонки',
      values: [12, 18, 9, 22, 16],
      format: (value) => String(value)
    }
  ]}
/>

Пропсы

Prop

Type

On this page