svg-visuals

Solid

SVG generation via DAX measures and extension measures with ImageUrl data category for inline visualizations in PBIR reports. Automatically invoke when the user mentions "SVG visual", "DAX sparkline", "SVG measure", "inline graphics with DAX", "ImageUrl data category", "extension measure", or asks to create any DAX-generated chart (progress bars, bullet charts, KPI indicators, data bars, gauges, donut charts, lollipop charts, dumbbell charts, status pills, overlapping bars, boxplots, IBCS bars, jitter plots, box-and-whisker charts).

Data & Documents 654 stars 103 forks Updated 4 days ago GPL-3.0

Install

View on GitHub

Quality Score: 92/100

Stars 20%
94
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# SVG Visuals via DAX Measures (PBIR) > **Report modification requires tooling.** Two paths exist: > 1. **`pbir` CLI (preferred)** -- use the `pbir` command and the `pbir-cli` skill. Install with `uv tool install pbir-cli` or `pip install pbir-cli`. Check availability with `pbir --version`. > 2. **Direct JSON modification** -- if `pbir` is not available, use the `pbir-format` skill (pbip plugin) for PBIR JSON structure and patterns. Validate every change with `jq empty <file.json>`. > > If neither the `pbir-cli` skill nor the `pbir-format` skill is loaded, ask the user to install the appropriate plugin before proceeding with report modifications. Generate inline SVG graphics using DAX measures that return SVG markup strings. These render as images in table, matrix, card, image, and slicer visuals. Store as extension measures in `reportExtensions.json`. ## How It Works 1. A DAX measure returns an SVG string prefixed with `data:image/svg+xml;utf8,` 2. The measure's `dataCategory` is set to `ImageUrl` 3. Power BI renders the SVG as an image in supported visuals ## Supported Visuals | Visual | visualType | Binding | Reference | |--------|------------|---------|-----------| | Table | `tableEx` | `grid.imageHeight` / `grid.imageWidth` | `references/svg-table-matrix.md` | | Matrix | `pivotTable` | Same as table | `references/svg-table-matrix.md` | | Image | `image` | `sourceType='imageData'` + `sourceField` | `references/svg-image-visual.md` | | Card (New) | `cardVisual` | `ca...

Details

Author
data-goblin
Repository
data-goblin/power-bi-agentic-development
Created
4 months ago
Last Updated
4 days ago
Language
C#
License
GPL-3.0

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

r-visuals

R visual creation and ggplot2 patterns for PBIR reports. Automatically invoke when the user mentions "R visual", "ggplot2", "ggplot in Power BI", or asks to "create an R visual", "add an R chart", "write an R visual script", "inject an R script into Power BI".

654 Updated 4 days ago
data-goblin
AI & Automation Solid

python-visuals

Python visual creation and matplotlib/seaborn patterns for PBIR reports. Automatically invoke when the user mentions "Python visual", "matplotlib in Power BI", "seaborn in Power BI", "pythonVisual", or asks to "create a Python visual", "add a matplotlib chart", "write a Python visual script".

654 Updated 4 days ago
data-goblin
AI & Automation Solid

deneb-visuals

Deneb visual creation, Vega/Vega-Lite spec authoring, and Deneb best practices for PBIR reports. Automatically invoke whenever the user mentions "Deneb" in any context, or asks about Vega/Vega-Lite specs in Power BI, Deneb cross-filtering, Deneb interactivity, pbiColor theme integration, Deneb field name escaping, or Deneb rendering issues.

654 Updated 4 days ago
data-goblin
AI & Automation Solid

blog-chart

Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-label), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).

923 Updated 3 days ago
AgriciDaniel
Data & Documents Listed

visualizing-data

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.

368 Updated 5 months ago
ancoleman