KvalityUI

ComboChart

Произвольный график: линии, столбцы, накопление, области и вторая ось.

Живой код — редактируйте
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(
  <ComboChart
    model={toChartModel(trendTable, {
      type: 'combo',
      x: 'day',
      y: ['visits'],
      y2: ['submissions']
    })}
  />
);

Накопленные столбцы

Живой код — редактируйте
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(
  <ComboChart
    model={toChartModel(trendTable, {
      type: 'stackedBar',
      x: 'day',
      y: ['visits', 'submissions']
    })}
  />
);

Пропсы

Prop

Type

On this page