Chart Bars

Chart Bars кладёт по столбцу на категорию; несколько серий складываются стопкой снизу вверх в порядке series. Высоты — доли максимума с запасом, столбцы — HTML на flex, поэтому зазор --chart-bar-gap и радиус --chart-bar-radius — токены. В покое столбцы приглушены до --chart-bar-opacity; под наведением столбец выходит на полную яркость и показывает подсказку: подпись, итог и строки серий со свотчами цвета. Легенда серий — Legend inline над графиком.

Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)

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

Расход по дням с разбивкой по формату.
Показы по неделям.
Сравнение периодов.

Не использовать:

Тренд с десятками точек — Chart Line.
Ранжированный список — Chart Ranked.

Альтернативы:

chart-line — тренд по времени
chart-ranked — горизонтальные полосы с рейтингом

Расход по форматам

Стопка Push / In-page / Native по дням с легендой и подсказкой.

Push
In-page
Native

<!--
  🟢

  Расход по форматам (виджет Spend by format галереи): стопка Push / In-page
  / Native по дням, легенда в линию над графиком, подсказка с итогом дня и
  разбивкой. Деньги форматирует продукт: два знака после точки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ChartBars from "$lib/ui/ChartBars.svelte";
import Legend from "$lib/ui/Legend.svelte";

const labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const series = [
	{ id: "push", name: "Push", color: "var(--c-chart-1)", values: [62, 128, 96, 188, 146, 220, 282] },
	{ id: "inpage", name: "In-page", color: "var(--c-chart-2)", values: [38, 74, 54, 108, 84, 126, 162] },
	{ id: "native", name: "Native", color: "var(--c-chart-3)", values: [20, 38, 30, 64, 50, 74, 96] },
];
const money = (value) => `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, " ")}`;
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-1); width: 560px;">
	<Legend items={series.map((s) => ({ label: s.name, color: s.color }))} layout="inline" />
	<ChartBars {series} {labels} format={money} label={t("Расход по форматам")} />
</div>