Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
data-goblin avatar

Deneb Visuals

data-goblin/power-bi-agentic-development

  • 35 installs
  • 836 repo stars
  • Updated July 29, 2026
  • data-goblin/power-bi-agentic-development

Author Deneb custom visuals in Power BI PBIR reports using Vega and Vega-Lite specs, including cross-filtering and theme color integration.

About

Guidance for creating Deneb custom visuals in PBIR reports by authoring Vega/Vega-Lite specifications with best practices for interactivity and theming. A developer uses it to build Deneb visuals with cross-filtering, pbiColor theme integration, and correct field escaping.

  • Authors Vega/Vega-Lite specs for Deneb visuals
  • Covers cross-filtering, interactivity, and pbiColor theming

Deneb Visuals by the numbers

  • 35 all-time installs (skills.sh)
  • Ranked #1,060 of 2,064 Data Science & ML skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/data-goblin/power-bi-agentic-development --skill deneb-visuals

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs35
repo stars★ 836
Last updatedJuly 29, 2026
Repositorydata-goblin/power-bi-agentic-development ↗

What it does

Author Deneb custom visuals in Power BI PBIR reports using Vega and Vega-Lite specs, including cross-filtering and theme color integration.

Files

SKILL.mdMarkdownGitHub ↗

Deneb Visuals in Power BI (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.

Deneb is a certified custom visual for Power BI that enables Vega and Vega-Lite declarative visualization specs directly inside reports. Author specs using this skill.

Provider Policy

Prefer Vega-Lite for new Deneb visuals unless specific Vega-only features are required (signals, event streams, custom projections, force/voronoi layouts). Vega-Lite is more concise, easier to maintain, and covers most chart types. For advanced Vega features, see references/vega-patterns.md and the Vega documentation.

Visual Identity

  • visualType: deneb7E15AEF80B9E4D4F8E12924291ECE89A
  • Bundled runtime: Vega 6.2.0 / Vega-Lite 6.4.1 (since Deneb 1.8; use v6.json schema URLs)
  • Data role: Single dataset role (all fields go into one "Values" well)
  • Default row limit: 10,000 rows (override via dataLimit.override)
  • Provider: vegaLite (default) or vega (when Vega-specific features needed)
  • Render modes: svg (default, sharp text) or canvas (better for large datasets)

Custom Visual Registration (Required)

Register deneb7E15AEF80B9E4D4F8E12924291ECE89A in report.json publicCustomVisuals array manually. Without this, the visual shows "Can't display this visual."

For more information, use the pbir-format skill and check the report.md reference.

{
  "publicCustomVisuals": ["deneb7E15AEF80B9E4D4F8E12924291ECE89A"]
}

Workflow: Creating a Deneb Visual

Step 1: Add the Visual

Create the visual.json file manually (see pbir-format skill in the pbip plugin for JSON structure) with visualType: deneb7E15AEF80B9E4D4F8E12924291ECE89A, field bindings for the columns and measures you need, and position/size as required.

All fields bind to the single dataset role. Use Table.Column for columns and Table.Measure for measures. Field names in bindings must match those used in the Vega/Vega-Lite spec.

Step 2: Write the Spec

Create a Vega-Lite (or Vega) JSON spec file. Key difference:

  • Vega-Lite: "data": {"name": "dataset"} (object)
  • Vega: "data": [{"name": "dataset"}] (array)
{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {"name": "dataset"},
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "y": {"field": "Category", "type": "nominal"},
    "x": {"field": "Value", "type": "quantitative"}
  }
}

See examples/spec/ for complete spec files (Vega and Vega-Lite) and examples/visual/ for full PBIR visual.json files. Field names in the spec must match the nativeQueryRef (display name) from the field bindings.

Step 3: Inject the Spec

Set the spec and config in the visual's objects.vega[0].properties as single-quoted DAX literal strings. The jsonSpec property holds the Vega spec (stringified JSON), jsonConfig holds the config, and provider is set to 'vega' or 'vegaLite'. See the PBIR structure reference (references/pbir-structure.md) for the full encoding pattern.

Escaping rules for visual.json injection:

The spec JSON must be stringified into a single line and wrapped in single quotes inside the expr.Literal.Value:

"jsonSpec": {"expr": {"Literal": {"Value": "'{\"$schema\":\"...\",\"data\":{\"name\":\"dataset\"},\"marks\":[...]}'" }}}
  • The entire JSON spec is flattened to one line
  • All inner double quotes (") become \" (standard JSON string escaping)
  • The stringified JSON is wrapped in single quotes: '...'
  • Field names with spaces inside Vega expressions use doubled single quotes: datum[''Sales Amount'']
  • See examples/visual/ for complete real-world visual.json files showing this encoding

Step 3b: Review

Before presenting the spec to the user, dispatch the deneb-reviewer agent to validate syntax and provide design feedback.

Step 4: Validate

Validate JSON syntax with jq empty <visual.json> and inspect the visual.json to confirm spec content and field bindings.

Spec Authoring Rules

Data Binding

  • Vega: "data": [{"name": "dataset"}] (array form)
  • Vega-Lite: "data": {"name": "dataset"} (object form)
  • Fields reference display names. Special characters (., [, ], \, ") become _
  • Spaces are NOT replaced -- field names keep their spaces (e.g., "Order Lines")

Field Name Escaping in Expressions (Critical)

Escaping depends on whether the spec is standalone or injected into a PBIR visual.json:

Standalone spec files (in examples/spec/): use double quotes with JSON escaping:

{"calculate": "datum[\"Order Lines\"] - datum[\"Order Lines (PY)\"]", "as": "diff"}

Inside PBIR visual.json (in examples/visual/): the entire spec is a single-quoted DAX literal string. Field names with spaces use doubled single quotes (''):

datum[''Order Lines''] - datum[''Order Lines (PY)'']

Single quotes that are NOT part of field name escaping (e.g., string literals in filter expressions like datum.Series == 'Actuals') work as-is because they don't conflict with the outer single-quote wrapper.

Responsive Sizing (Vega)

Use Deneb's built-in signals for responsive container sizing:

"width": {"signal": "pbiContainerWidth - 25"},
"height": {"signal": "pbiContainerHeight - 27"}

The offsets account for padding. For absolute positioning of text marks, use {"signal": "width"} instead of hardcoded pixel values.

Config (Separate from Spec)

Always provide a config file for consistent styling. See the Standard Config section in references/vega-patterns.md. Key settings: autosize: fit, view.stroke: transparent, font: Segoe UI.

Theme Integration

Use Power BI theme colors instead of hardcoded hex values:

Function/SchemePurposeUsage in Vega
pbiColor(index)Theme color by index (0-based){"signal": "pbiColor(0)"}
pbiColor(0, -0.3)Darken theme color by 30%Shade: -1 (dark) to 1 (light)
pbiColor("negative")Sentiment colors"min", "middle", "max", "negative", "positive"
pbiColor("bad")Aliases for sentiment"bad" = "negative", "good" = "positive", "neutral" = "middle"
pbiColorNominalCategorical palette (distinct)"range": {"scheme": "pbiColorNominal"}
pbiColorOrdinalOrdinal palette (ordered categories)"range": {"scheme": "pbiColorOrdinal"}
pbiColorLinearContinuous gradient"range": {"scheme": "pbiColorLinear"}
pbiColorDivergentDivergent gradient"range": {"scheme": "pbiColorDivergent"}

Interactivity

Enable interactivity via the vega objects in visual.json:

FeaturePropertyDefaultNotes
TooltipsenableTooltipstrueUse "tooltip": {"signal": "datum"} in encode
Context menuenableContextMenutrueRight-click drill-through
Cross-filteringenableSelectionfalseRequires __selected__ handling
Cross-highlightingenableHighlightfalseCreates <field>__highlight fields

Cross-Filtering

When enableSelection is true, handle __selected__ ("on", "off", "neutral") in encode blocks. Selection modes: simple (auto-resolves, up to 250 data points) or advanced (Vega only; required for brush/lasso/region selection, supports up to 2500 via options.limit, exposes pbiCrossFilterApply and pbiCrossFilterClear signals). See references/vega-patterns.md for the simple pattern and references/advanced-patterns.md for the advanced signal API.

Cross-Highlighting

Use layered marks -- background at reduced opacity, foreground shows <field>__highlight values. See references/vega-patterns.md for details.

Special Runtime Fields

Deneb injects runtime fields into each dataset row. See references/capabilities.md for the full table.

Key fields: __row__ (zero-based row index, replaces removed __identity__), __selected__ (selection state), <field>__highlight + <field>__highlightStatus + <field>__highlightComparator (cross-highlighting), <field>__formatted (pre-formatted value string), <field>__format (Power BI format string).

Breaking change in 1.9: __identity__ and __key__ were removed. Replace any datum.__identity__ with datum.__row__.

Best Practices

1. Use Vega-Lite for new visuals unless Vega-specific features are needed (signals, events, force layouts) 2. Always use `autosize: fit` in config for responsive Power BI sizing 3. Use `pbiContainerWidth`/`pbiContainerHeight` signals for responsive Vega specs 4. Use theme colors (pbiColor, pbiColorNominal) instead of hex values 5. Use `enter`/`update`/`hover` encode blocks for clean state management (Vega only) 6. Enable tooltips with "tooltip": {"signal": "datum"} on marks 7. Performance -- aggregate in DAX first, prefer renderMode: canvas for many marks, and only then raise dataLimit.override. See references/advanced-patterns.md for the full lever order 8. Test field names -- verify nativeQueryRef matches spec field references 9. Avoid external data -- AppSource certification prevents loading external URLs 10. Escaping depends on context -- double quotes in standalone specs, doubled single quotes in PBIR visual.json (see escaping rules above)

When to Use Deneb

Deneb is the preferred choice for advanced custom visuals that need interactivity (cross-filtering, tooltips, hover effects) and go beyond what native Power BI visuals offer. Use Deneb when you need:

  • Custom chart types not available natively (bullet charts, beeswarms, sankeys, etc.)
  • Fine-grained control over visual encoding, animation, and interactivity
  • Vector-based rendering (crisp at any size)

Use SVG measures instead for simple inline graphics in tables/cards (sparklines, data bars, progress bars) where interactivity is not needed. Use Python/R instead for statistical visualizations (distribution analysis, regression, correlation) where the focus is analytical rigor over interactivity.

References

  • `references/community-examples.md` -- 170+ community templates organized by chart type, with author citations and direct links
  • `references/vega-patterns.md` -- Vega chart patterns (bar, line, scatter, donut, stacked, heatmap, area, lollipop, bullet, KPI card), standard config, transforms and scales reference
  • `references/vega-lite-patterns.md` -- Vega-Lite chart patterns (for editing existing Vega-Lite visuals only)
  • `references/pbir-structure.md` -- PBIR JSON structure (literal encoding, query state, interactivity example)
  • `references/capabilities.md` -- Full Deneb object properties reference and template format (usermeta schema)
  • `references/advanced-patterns.md` -- Advanced cross-filtering signals (Vega pbiCrossFilterApply/pbiCrossFilterClear), performance engineering lever order, and community template round-trip from the terminal
  • `examples/visual/bullet-chart.json` -- PBIR visual.json: faceted bullet chart with conditional indicators and cross-filtering (Vega-Lite)
  • `examples/visual/kpi-card.json` -- PBIR visual.json: KPI card with layered text and conditional % change coloring (Vega-Lite)
  • `examples/visual/trend-line.json` -- PBIR visual.json: dual-series line chart with fold transform and color/legend mapping (Vega-Lite)
  • `examples/visual/ytd-comparison.json` -- PBIR visual.json: YTD vs target with dashed lines, endpoint labels, number formatting, and rank-based filtering (Vega-Lite)
  • `examples/spec/vega/` -- Standalone Vega spec files (bar-chart, line-chart) -- ready to inject into visual.json after escaping
  • `examples/spec/vega-lite/` -- Standalone Vega-Lite spec files (bullet-chart, kpi-card) -- ready to inject after escaping
  • `examples/standard-config.json` -- Standard config for all Deneb specs

Fetching Docs

To retrieve current Power BI custom visual docs, use microsoft_docs_search + microsoft_docs_fetch (MCP) if available, otherwise mslearn search + mslearn fetch (CLI). Search based on the user's request and run multiple searches as needed to ensure sufficient context before proceeding. Note: Vega/Vega-Lite docs live at vega.github.io (not MS Learn) -- use WebFetch for those.

Related Skills

  • `pbir-format` (pbip plugin) -- PBIR JSON format reference
  • `pbi-report-design` -- Layout and design best practices
  • `r-visuals` -- R Script visuals (ggplot2)
  • `python-visuals` -- Python Script visuals (matplotlib)
  • `svg-visuals` -- SVG via DAX measures (lightweight inline graphics)

Related skills

microsoftMicrosoft FoundryDeploy, evaluate, and continuously improve Microsoft Foundry agents from a single agent interface.490k1.3klllllllamaAi Research ReproductionOrchestrate trustworthy, auditable reproduction of deep learning repositories directly from their READMEs.176k511lllllllamaRun TrainSafely execute selected deep learning training commands with standardized evidence capture.176k511lllllllamaExplore RunSafely run isolated exploratory experiments with clear recording and conservative selection before committing changes.176k511lllllllamaPaper Context ResolverFetch precise reproduction-critical details like dataset splits, preprocessing steps, or evaluation protocols from the original academic paper when the repo README leav141k511lllllllamaRepo Intake And PlanScan unfamiliar AI research repositories and receive a minimal, trustworthy reproduction target before investing significant time.140k511
Data Science & MLanalytics
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.