Legend

Legend перечисляет серии графика: точка --legend-dot цветом серии, подпись, значение полужирным справа. list — строки с линиями между ними рядом с кольцом; bars добавляет под строкой мини-полосу доли от максимума или из share, и линии между строками уходят — строки делит сама полоса. inline — скруглённые квадраты серий --legend-inline-dot-radius с подписями в одну строку под заголовком столбчатого графика. Цвета — из items или по кругу --c-chart-1…6, как у Chart Donut.

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

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

Рядом с Chart Donut: статусы с числами.
Над Chart Bars: серии стопки.

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

Список с действиями — Menu или Table.

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

stat-list — показатели без цвета серий

Статусы и серии

list с bars рядом с кольцом и inline над столбцами.

Активные 6
На модерации 3
Заблокированы 2
Остановлены 1

Push
In-page
Native

<!--
  🟢

  Легенда строками с мини-полосами долей от общего (у кольца статусов, без
  линий между строками) и в линию со свотчами серий (над стопкой столбцов).
-->

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

const statuses = [
	{ label: t("Active"), value: 6, share: 50, color: "var(--c-chart-4)" },
	{ label: t("Moderated"), value: 3, share: 25, color: "var(--c-chart-3)" },
	{ label: t("Blocked"), value: 2, share: 16.7, color: "var(--c-status-rejected)" },
	{ label: t("Stopped"), value: 1, share: 8.3, color: "var(--c-chart-5)" },
];
const formats = [
	{ label: "Push", color: "var(--c-chart-1)" },
	{ label: "In-page", color: "var(--c-chart-2)" },
	{ label: "Native", color: "var(--c-chart-3)" },
];
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-3); width: 240px;">
	<Legend items={statuses} bars />
	<Legend items={formats} layout="inline" />
</div>