Chart Ranked

Chart Ranked показывает список категорий по убыванию: подпись фиксированной ширины, полоса в долях максимума, значение полужирным и доля справа. inline держит всё в одну строку с полосой --chart-ranked-bar-h (страны по расходу), stacked кладёт тонкую полосу --chart-ranked-stack-bar-h под строку и добавляет номер (источники по доходу). columns={2} раскладывает список в две колонки для широкой ячейки. Полоса в покое приглушена до --chart-bar-opacity; по наведению — полная яркость и подсказка со значением и долей.

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

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

Топ стран по расходу.
Источники по доходу за день.
Кампании по кликам.

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

Доли до шести категорий с итогом — Chart Donut.
Тренд — Chart Line.

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

chart-donut — мало долей с итогом в центре
table — больше двух метрик на строку

Топ стран

inline: пять стран по расходу с долями.

США $1 284.4

Бразилия $642.1

Индия $486.6

Индонезия $372.2

Германия $318.8

<!--
  🟢

  Топ стран (макет Top countries): пять стран по расходу — подпись, полоса
  от максимума, значение и доля в одну строку.
-->

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

const items = [
	{ label: t("United States"), value: 1284.4, share: 41 },
	{ label: t("Brazil"), value: 642.1, share: 21 },
	{ label: t("India"), value: 486.6, share: 16 },
	{ label: t("Indonesia"), value: 372.2, share: 12 },
	{ label: t("Germany"), value: 318.8, share: 10 },
];
const money = (value) => `$${formatNumber(value)}`;
</script>

<div style="width: 360px;">
	<ChartRanked {items} format={money} label={t("Топ стран по расходу")} />
</div>

Источники в две колонки

layout="stacked" columns={2} rank: восемь источников за день.

1 src-40219 · Push $82.4

2 src-38855 · In-page $64.1

3 src-41022 · Push $48.6

4 src-39710 · Native $39.2

5 src-40988 · Push $36.8

6 src-37421 · In-page $28.1

7 src-41560 · Native $14.9

8 src-40033 · Push $8.3

<!--
  🟢

  Источники в две колонки (макет Campaign by source): восемь источников за
  день с номерами, полоса под строкой.
-->

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

const items = [
	{ label: "src-40219 · Push", value: 82.4 },
	{ label: "src-38855 · In-page", value: 64.1 },
	{ label: "src-41022 · Push", value: 48.6 },
	{ label: "src-39710 · Native", value: 39.2 },
	{ label: "src-40988 · Push", value: 36.8 },
	{ label: "src-37421 · In-page", value: 28.1 },
	{ label: "src-41560 · Native", value: 14.9 },
	{ label: "src-40033 · Push", value: 8.3 },
];
const money = (value) => `$${formatNumber(value)}`;
</script>

<div style="width: 640px;">
	<ChartRanked {items} layout="stacked" columns={2} rank share={false} format={money} label={t("Источники за день")} />
</div>