p00318821-eng/skills-plugins-hooks-agents/deneb-visuals

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:

Interactivity

Enable interactivity via the vega objects in visual.json:

Cross-Filtering

When enableSelection is true, handle __selected__ ("on", "off", "neutral") in encode blocks. Selection modes: simple (auto-resolves) or advanced (requires event definitions, Vega only). See references/vega-patterns.md for the full pattern.

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. Mind row limits -- 10K default; set dataLimit.override and use renderMode: canvas for large datasets
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