Графики на дашбордах — примеры
Веб-приложения · Дашборды

Графики и диаграммы — живые примеры

Шесть типов визуализаций, которые покрывают 90% задач на дашбордах. Для каждого — когда использовать и что не делать.

KPI-карточки

Самая просматриваемая зона дашборда

Открываются первыми. Отвечают на вопрос «как дела?» за 3 секунды. Три обязательных элемента: значение, метка, дельта к прошлому периоду.

Выручка
₽1.24M
↑ 12%
vs прошлый месяц
Активных
8 340
↓ 3%
vs прошлый месяц
Конверсия
4.7%
↑ 0.4 pp
vs прошлый квартал
Churn rate
2.1%
↑ 0.2 pp
Выше нормы
Число всегда с единицей. «1.24M ₽», а не просто «1247000»
Дельта с базой. «vs прошлый месяц» — без этого число бессмысленно
Spark-line внутри. Добавляет форму тренда без отдельного графика
Максимум 4–6 карточек. Больше — иерархия теряется

Line chart

Тренд во времени

Когда нужно показать как метрика менялась за период. Лучший выбор для метрик с историей — выручка, трафик, количество пользователей.

Выручка по месяцам Январь — Декабрь 2024
2024
2023
Частая ошибка: ось Y не начинается с нуля — тренд выглядит резче, чем есть. Если обрезаешь ось, обозначай это визуально.
Сравнительный период серым. Текущий — акцентным цветом
Не более 3–4 линий. Больше — читаемость падает, нужна другая визуализация
Аннотации для событий. Пометить запуск продукта или изменение алгоритма прямо на графике

Area chart

Объём и накопление

То же что line chart, но с заливкой под кривой. Используется когда важен объём, а не только форма — подписчики, накопленная выручка, хранилище.

Новые пользователи 6 месяцев
Накопленный MRR 6 месяцев
Разница с line chart: area chart использует заливку под кривой — акцент на объёме и накоплении. Line chart без заливки лучше когда нужно сравнить несколько рядов — заливки перекрывались бы и нижний ряд исчезал.

Bar chart

Сравнение категорий

Когда нужно сравнить несколько объектов по одному показателю. Человеческий мозг точнее считывает длину, чем площадь или угол — поэтому bar chart точнее pie chart почти всегда.

Продажи по каналам Q4 2024
Grouped: план vs факт По кварталам
Факт
План
Вертикальный — до 7 категорий, хронология (месяцы, кварталы)
Горизонтальный — много категорий или длинные названия (страны, продукты)
Референсная линия — добавляет цель или среднее прямо на график

Горизонтальный bar

Много категорий с длинными названиями

Идеален для рейтингов, топов, сравнений продуктов или стран. Названия читаются горизонтально — не нужно поворачивать голову.

Топ каналов привлечения Последние 30 дней

Donut chart

Доли от целого

Работает только при 2–5 сегментах. Donut лучше pie — центр можно использовать для ключевого числа. При 6+ сегментах заменяй на горизонтальный bar chart.

Источники трафика Этот месяц
Органика 38%
Платный 27%
Реферал 20%
Прямой 15%
Тарифные планы Активные подписки
Pro 45%
Team 32%
Free 23%
Главная ошибка: 6+ сегментов в donut. Мозг не различает маленькие углы. При 6+ сегментах — горизонтальный bar chart читается точнее.

Stacked bar

Части и целое во времени

Показывает как части складываются в целое, при этом тренд виден по общей высоте бара. Хорошо для структуры выручки по сегментам.

Выручка по продуктам По кварталам 2024
Продукт A
Продукт B
Продукт C
Не более 3–4 сегментов. Больше — цвета смешиваются, читаемость падает
Самый важный сегмент внизу. Нижний ряд читается точнее всего — он опирается на нулевую ось