Chart

Chart держит место под диаграмму: линию расхода по времени, столбцы показов, область охвата. Реальные серии компонент не рисует — он показывает схематичную диаграмму нужного типа (line, bar, area) и высоты, а данные приходят из продукта и в документ экрана не входят.

Статус: experimental · в системе с 2026-08 · интерактивность: none (нет)

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

Место под диаграмму эффективности в сводке или секции: расход, показы, клики по времени.
Тип диаграммы — часть композиции экрана: линия тренда, столбцы сравнения, область охвата.
Пустое или загружающееся состояние графика выражается areaStates области, а не отдельной заглушкой.

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

Одно число или дельта без осей — это indicator с текстом или meter.
Доля одного значения от целого — это progress или meter.
Настоящие данные серий по URL или из стора: в документе экрана график всегда плейсхолдер.

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

meter — доля значения от целого без осей времени
indicator — одно состояние или счётчик точкой

Типы

Линия, столбцы и область на одной высоте.

type=line type=bar type=area

<!--
  🟢

  Три типа диаграммы на одной высоте: линия (тренд), столбцы (сравнение),
  область (накопление). Форма задаётся пропом type, цвет серии — акцент темы.
-->

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

const types = ["line", "bar", "area"];
</script>

<div style="display: grid; gap: var(--sp-4); width: var(--size-full); font-size: var(--fs-xs);">
	{#each types as type (type)}
		<span style="display: grid; gap: var(--sp-1);">
			<Chart {type} size="s" label={`${t("Статистика:")} ${type}`} />
			<code>type={type}</code>
		</span>
	{/each}
</div>

Размеры

Три ступени высоты шкалы --chart-h-*.

size=s size=m size=l

<!--
  🟢

  Три ступени высоты шкалы --chart-h-*: s 96, m 160, l 240. Высоту задаёт
  токен, ширину график занимает по контейнеру.
-->

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

const sizes = ["s", "m", "l"];
</script>

<div style="display: grid; gap: var(--sp-4); width: var(--size-full); font-size: var(--fs-xs);">
	{#each sizes as size (size)}
		<span style="display: grid; gap: var(--sp-1);">
			<Chart type="area" {size} label={`${t("Расход,")} ${size}`} />
			<code>size={size}</code>
		</span>
	{/each}
</div>