Chart Line

Chart Line рисует одну или несколько серий по равномерным точкам времени: линия толщиной --chart-series-w, под ней градиент от цвета серии к прозрачному, пять линий сетки от верха до низа области (штрих --chart-line-grid-dash: в базе штриховые, в ADMY сплошные), подписи оси снизу и точка на последнем значении. По наведению — вертикальная линия, точка на серии и тёмная подсказка с подписью капсом, значением и изменением к предыдущей точке. Без осей, сетки и подсказки становится спарклайном компактного виджета. Числа форматирует format — по умолчанию разряды через пробел и точка в дробной части; цвета серий — токены --c-chart-1…6 или любой CSS-цвет.

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

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

Расход, клики, конверсии по дням в виджете дашборда.
Спарклайн под ключевым числом в компактной ячейке.
Доход по месяцам в бонусной программе.

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

Сравнение категорий — Chart Bars.
Доли целого — Chart Donut.
Плейсхолдер графика в документе экрана — chart.

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

chart-bars — сравнение категорий и стопки
chart — схематичный плейсхолдер без данных

Конверсии за неделю

Одна серия с областью, сеткой, осью и подсказкой; наведите на точку.

<!--
  🟢

  Конверсии за неделю (виджет Conversions галереи): одна серия с областью,
  сеткой, подписями дней и подсказкой по наведению — день капсом, значение,
  изменение к предыдущему дню.
-->

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

const labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const values = [80, 140, 110, 160, 190, 220, 240];
</script>

<div style="width: 560px;">
	<ChartLine {values} {labels} color="var(--c-chart-2)" label={t("Конверсии за неделю")} />
</div>

Спарклайн

axis={false} grid={false} tooltip={false} — миниатюра под числом.

<!--
  🟢

  Спарклайн компактного виджета (Total clicks · 1 cell галереи): без осей,
  сетки и подсказки — только линия от нуля, область и точка на последнем
  значении.
-->

<script>
import ChartLine from "$lib/ui/ChartLine.svelte";

const values = [3200, 4100, 3800, 5400, 4900, 7200, 6900];
</script>

<div style="width: 320px;">
	<ChartLine {values} color="var(--c-chart-4)" axis={false} grid={false} tooltip={false} zero size="s" />
</div>