P40 · Power BI · Дизайн без custom visuals

Нестандартные диаграммы в Power BI стандартными визуалами

Bullet, lollipop, dumbbell, slope, marimekko, sparklines прямо в строках таблицы — всё это делается без единого custom visual. Только Bar, Line, Scatter, Matrix и немного DAX. 8 рецептов, которые мы используем в корпоративных проектах DEEONE.

Коротко. Custom visuals в Power BI — это долго, рискованно и часто запрещено корпоративной политикой. На самом деле bullet chart, lollipop, dumbbell, slope, marimekko и даже sparklines в таблице делаются комбинацией стандартных визуалов: Bar, Line, Scatter, Matrix и Card. Главные приёмы — оверлей двух визуалов через прозрачные слои, conditional formatting в матрице и SVG в DAX-мерах. Каждый рецепт ниже — из production-проекта.

Почему «только стандартные визуалы»

В корпоративных Power BI-внедрениях мы всегда продвигаем правило: стандартные визуалы по умолчанию, custom — только когда без них никак. Причин три, и все важны.

Первая — безопасность. Custom visual — это сторонний код, который рендерится прямо в корпоративном отчёте. У большинства серьёзных компаний есть политика «только certified visuals», и даже сертифицированные требуют ревью от ИБ. На этом этапе срываются все «красивые библиотеки от ноунейм-разработчиков» из App Source.

Вторая — производительность. Custom visuals в 3–5 раз медленнее стандартных. На маленьких данных это незаметно, но на 1М+ строк один custom-визуал может растянуть загрузку страницы с 1.5 до 8 секунд.

Третья — устойчивость во времени. Через два года автор любимой библиотеки забил, App Source выпиливает её, ваш отчёт ломается посередине совещания. Со стандартными визуалами такого не бывает — Microsoft не удалит из Power BI bar chart.

Поэтому правильная позиция: научиться выжимать максимум из стандартного арсенала. Вот 8 типичных задач, под которые часто хватаются за custom — и ровно столько же случаев, когда стандартные справляются не хуже.

Рецепт 01 · Comparison

Bullet chart — план vs факт в одном глифе

Один из самых полезных финансовых визуалов: компактно показывает факт, план и «плохо/норма/хорошо» зоны. Стивен Фью описал его 20 лет назад. В Power BI его обычно ищут среди custom — а на самом деле собирается двумя стандартными bar.

Bullet chart на стандартных Stacked bar + line marker

Как собрать в Power BI:

  1. Возьмите Stacked bar chart. В Values положите три ступени зон: [Zone Bad], [Zone OK], [Zone Good] — это DAX-меры с фиксированными процентами от плана (например, 0–60%, 60–95%, 95–110%).
  2. Цвета сегментов — pale red / yellow / green (или любые ваши). Высоту бара (Format → Bars → Inner padding) уменьшите до 0%, чтобы бары шли плотно.
  3. Поверх положите ещё один Bar chart с [Sales Amount] (факт). Высоту бара сделайте примерно в 3 раза тоньше зон. Цвет — основной brand (синий).
  4. На тот же визуал положите Line с [Plan] — это будет вертикальная отметка цели. Сделайте через line с data-marker.
  5. Выровняйте оба визуала через выравнивание (View → Selection → Align). Использование одной x-оси гарантируется через одинаковый Axis.

Stacked barBar chartLineConditional formatting

Подводный камень: разные axes у двух визуалов. Power BI по умолчанию автоматически выбирает разные шкалы. Жёстко зафиксируйте Min и Max в Format → Y-axis (или X для горизонтального) на обоих визуалах одинаково.

Рецепт 02 · Comparison

Lollipop chart — лёгкая альтернатива bar

Когда категорий 12+ и значения близки, обычные bar превращаются в «забор». Lollipop — тонкая линия + маркер на конце — даёт ту же информацию, но визуально легче и элегантнее.

Lollipop через Bar (тонкий) + Scatter с маркером

Как собрать:

  1. Возьмите Bar chart (горизонтальный). Уменьшите Inner padding до 0% и Bar height (если есть в настройках темы) до минимума. Цвет — нейтральный серо-синий с прозрачностью 60–70%.
  2. Поверх положите Scatter chart. На X — ту же меру [Sales Amount]. На Y — Region (категория). Размер маркеров — фиксированный (например, 14–18px). Цвет — основной brand. Без линий между точками.
  3. Выровняйте оба визуала по размеру и позиции. Зафиксируйте одинаковые Min/Max обеих осей.
  4. Подпись значений — включите Data labels у Scatter (они на конце линии).

Bar (тонкий)Scatter

Рецепт 03 · Ranking

Dumbbell — было/стало по категориям

Сравнение двух периодов по каждой категории с акцентом на дельту. Идеален для «зарплаты по подразделениям 2024 vs 2026», «маржа продуктов до и после акции», «оборот до и после переезда точки».

Dumbbell через Scatter с двумя группами + соединительная линия

Как собрать:

  1. Создайте Scatter chart. На Y — Product (Category). На X — значение метрики. Group by year (или period).
  2. Каждая категория получает две точки: одну для 2024 (серый цвет), одну для 2026 (синий). Используйте Conditional formatting на цвет точки по году.
  3. Соединительная линия — это трюк. Добавьте отдельную меру [Year Connector], которая возвращает диапазон значений для каждого продукта. Положите как Error bars (Y-axis error bars в настройках Scatter) с типом «Custom»: Plus = 0, Minus = delta. Получите горизонтальную линию между двумя точками.
  4. Цвет линии — нейтральный серый. Толщина 2px. Без «усов» на концах.

ScatterError barsConditional formatting

Альтернатива попроще — два отдельных Bar chart рядом (один для 2024, один для 2026), но это не dumbbell, это grouped bar. Dumbbell лучше показывает дельту — а не два независимых значения.

Рецепт 04 · Ranking · Time

Slope chart — резкие изменения позиций

Тот же сценарий «было / стало», но для многих категорий и с акцентом на угол наклона. Резкие изменения видны мгновенно. Категорий 8–20.

Slope через Line chart с двумя точками и цветом по направлению

Как собрать:

  1. Стандартный Line chart. На X — Year (только 2024 и 2026). На Y — значение. Legend — Product (по одной линии на продукт).
  2. Цвет линий — через Conditional formatting → Color by rules. Создайте меру [Direction] = IF([Sales 2026] >= [Sales 2024], "up", "down"). Бинд цвет линии на эту меру: «up» → зелёный, «down» → красный.
  3. Включите Data labels: значение в конечной точке, имя категории — через настройку Custom label.
  4. Уберите легенду (она избыточна, имена уже на точках), сетку, маркеры на промежуточных точках (их нет).

Line chartConditional formatting

Анти-паттерн: 30+ линий на одном slope — это спагетти. Подсветите 5–7 ключевых, остальные приглушите серым в фоне через ту же conditional formatting.

Рецепт 05 · Part-to-whole · 2D

Marimekko — двумерный stacked bar

Любимая диаграмма консультантов BCG/McKinsey. Ширина колонки кодирует размер региона/сегмента, высота сегмента — долю канала внутри. Идеально для P&L по дивизионам, доли рынка по продуктам в разрезе сегментов.

Marimekko из Matrix с variable width column через measure

Как собрать:

  1. Это один из немногих случаев, когда стандартного визуала нет. Но есть приём через SVG-меру: создайте DAX-меру, которая возвращает HTML-разметку Marimekko в виде SVG-блока, и положите в Card или Multi-row card с типом данных HTML content (через HTML Content certified visual — один из немногих допустимых исключений).
  2. В DAX строится строка вида "<svg viewBox='0 0 800 280'>..." & ... с конкатенацией UNICHAR(60) для <. Размеры прямоугольников вычисляются от значений мер.
  3. Альтернатива через Matrix: создайте сводную таблицу region × channel, для каждой ячейки используйте Conditional formatting → Background color пропорционально доле + текст внутри ячейки — название канала. Получится «приближённый Marimekko», но ширина колонок будет одинаковая (это не настоящий mekko).

SVG measureHTML ContentMatrix (упрощённо)

Подробный разбор SVG-мер — в соседней статье «SVG в Power BI: продвинутые техники».

Рецепт 06 · Distribution · в строках

Sparklines — мини-графики прямо в строках таблицы

«Карточка клиента» с именем + последними 12 месяцами выручки в виде маленькой линии прямо в строке. Любимый формат финансовых дашбордов — компактно и информативно.

Sparklines в строках Table через SVG-меру + native Power BI Sparkline

Как собрать:

  1. Native способ (с июля 2023): в Power BI Desktop встроена функция Sparkline для Table и Matrix. Правый клик на числовое поле → Add a sparkline. На X — дата, на Y — значение. Цвет, маркеры, форма — в Format pane.
  2. SVG-способ (для старых версий или кастомизации): создайте DAX-меру, которая возвращает SVG path как строку, бинд её на ячейку через Conditional formatting → Web URL → Image URL. В ячейку Power BI вставит SVG как картинку.
  3. Цвет sparkline по тренду — через ту же логику что в slope: мера [Trend Color] возвращает hex по знаку дельты. Бинд через Conditional formatting на Color line.

TableMatrixSparkline (native)SVG measure

Рецепт 07 · Comparison

Heatmap — матрица «регион × месяц»

Когда есть две категориальные оси и одна метрика — пытаются ставить два Bar или Stacked chart. Правильный ответ — Heatmap. Делается прямо в Matrix без единого custom visual.

Heatmap из Matrix + Conditional formatting → Background color

Как собрать:

  1. Возьмите Matrix. Rows — Region. Columns — Month. Values — [Sales Amount].
  2. Включите Conditional formatting на поле Values: Format style = Gradient. Min/Max — через Lowest value/Highest value или явные числа. Цвета — палитра тёплый-холодный или brand-градиент.
  3. Уберите числа в ячейках, если их слишком много (Format → Cell elements → Background only). Тогда читается чисто как heatmap. Или оставьте — зависит от аудитории.
  4. Заголовки строк/столбцов — Bold, без границ ячеек (визуальный шум). Альтернируемая заливка строк — ВЫКЛЮЧИТЬ, она ломает heatmap-эффект.

MatrixConditional formatting

Рецепт 08 · Ranking

Tornado chart — для возрастных пирамид и ABC-разрезов

Зеркальный bar: одна категория слева, другая справа от центральной оси. Классика для возрастных пирамид (M/F), сравнения «свой регион vs конкурент», оттока vs притока.

Tornado из двух Stacked bar с противоположными знаками

Как собрать:

  1. В DAX создайте две меры: [Outflow] = -SUM(...) (с минусом) и [Inflow] = SUM(...) (положительная).
  2. Возьмите Stacked bar chart. На Axis — возрастная группа. На Values — обе меры.
  3. Включите Stacked вместо clustered — тогда положительные значения окажутся справа от нуля, отрицательные слева. Power BI автоматически зеркалирует.
  4. Цвет: outflow — красный, inflow — синий. Подписи на оси абсолютные (через формат меры с ;- убираем минус из отображения).

Stacked barDAX (отрицательная мера)

Что НЕ делается стандартными визуалами

Честный список того, для чего реально нужен custom visual или SVG-меры:

  • Sankey-диаграмма. Стандартного нет. Custom есть в App Source, но медленный. Альтернатива — рендер в HTML Content с SVG-кодом меры (см. наш разбор Sankey income statement).
  • Chord diagram для межрегиональных потоков.
  • Network graph для связей между объектами.
  • Hex tile maps с точным offset (квадратная плитка работает через Matrix, hex — нет).
  • Real choropleth с кастомным GeoJSON. Делается через стандартный Shape Map, но он всё ещё в preview-режиме у Microsoft с 2018 года, и это надо учитывать.
  • Calendar heatmap по дням года. Native sparkline покрывает только X-периодную линию; полноценный календарь — только через SVG-меру или custom.

Во всех остальных случаях стандартных визуалов хватает — и качество результата зависит от DAX и Conditional formatting, а не от импорта новой библиотеки.

Главный приём — оверлей и conditional formatting

Если обобщить все 8 рецептов — вы увидите, что 90% «нестандартных» визуалов делаются двумя приёмами:

  1. Оверлей двух стандартных визуалов через выравнивание. Bar + Bar для bullet, Bar + Scatter для lollipop, Line + Scatter для dumbbell.
  2. Conditional formatting в Matrix: фон ячейки по значению, цвет текста по дельте, иконки по статусу. Это превращает обычную таблицу в heatmap, panel layout, status dashboard.

Освойте эти два приёма — и 90% запросов «давайте поставим красивый custom» будут закрыты тем, что уже есть. И ваш отчёт переживёт смену ноунейм-разработчика-автора в App Source.

Связанные материалы