skills.rest
mckinsey
mckinseyOFFICIAL
Explore all skills by this author →
Website𝕏@McKinseyGitHub

writing-vizro-yaml

Write and debug Vizro YAML dashboard configurations with correct component syntax and data wiring.

3.8k|299|Updated Sep 4, 2023
Search Tags:#YAML#Configuration#Plotly#Dashboard#ag grid#vizro#Data Visualization
One-click install
npx skills add https://github.com/mckinsey/vizro --skill writing-vizro-yaml
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: writing-vizro-yaml
Source: https://github.com/mckinsey/vizro/tree/main/vizro-e2e-flow/skills/writing-vizro-yaml
Command: npx skills add https://github.com/mckinsey/vizro --skill writing-vizro-yaml

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vizro, pandas, pyyaml, and includes references (resource) components.

What problem does it solve?

Writing Vizro dashboard YAML by hand leads to recurring errors: misused _target_ references, blank charts from incorrect data_manager lookups, misplaced KPI titles, and broken filter or parameter targets. This Skill provides the correct syntax patterns and a checklist of critical mistakes so configurations work on the first run.

Core Features & Use Cases

  • Component syntax patterns: Ready-to-use YAML snippets for graphs, KPI cards, AG Grid tables, cards, filters, parameters, containers, tabs, and navigation.
  • Custom function wiring: Guidance on @capture("graph"), @capture("figure"), and @capture("ag_grid") decorators, module-prefixed _target_ values, and data_manager registration.
  • Error prevention checklist: Ten documented mistakes with fixes, covering parameter target formats, YAML special-character quoting, grid rectangularity, and column type consistency.
  • Use Case: You are building a multi-page Vizro sales dashboard and your bar chart renders blank. The Skill identifies that your custom chart re-looked up data via data_manager[data_frame] instead of using the passed DataFrame directly, and shows the corrected pattern.

Quick Start

Ask the assistant to write a Vizro YAML dashboard with a scatter chart, a KPI card, and a region filter using the writing-vizro-yaml skill.

Frequently Asked Questions about writing-vizro-yaml

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a Vizro YAML dashboard configuration?▼

Define pages with components using `type` and `figure` fields, where `_target_` names a Plotly Express function or custom function. Register DataFrames via `data_manager["key"]` in app.py, then reference them by string key in the YAML `data_frame` field.

How do I add a custom chart to a Vizro dashboard?▼

Create a function decorated with `@capture("graph")` in a file like custom_charts.py, then reference it in YAML as `_target_: custom_charts.my_chart`. The function receives a pandas DataFrame directly; never re-look it up via data_manager.

Why is my Vizro chart rendering blank?▼

Blank charts usually occur when a `@capture("graph")` function re-looks up data via `data_manager[data_frame]` instead of using the passed DataFrame directly. The function already receives a DataFrame, so use it as-is.

Does Vizro support AG Grid tables in YAML?▼

Yes, use `type: ag_grid` with `_target_: dash_ag_grid` in the figure block. For heatmap cell coloring or inline bars, write a custom `@capture("ag_grid")` function and call `dash_ag_grid.__wrapped__()` to avoid serialization errors.

Why does my Vizro parameter control not update the chart?▼

Parameter targets must use the format `component_id.argument_name`, not `component_id.figure`. The targeted custom function must also accept that argument name as a parameter.

How do I handle column names with special characters in Vizro YAML?▼

Quote column names containing YAML special characters like `#`, `:`, or brackets, for example `column: "Version #"`. An unquoted `#` starts a YAML comment and silently truncates the column name.

Related Skills

Explore More Data & Analytics Skills→
Agentic-AssetsAgentic-Assets

pandas-pro

Apply vectorized pandas operations to clean, transform, and aggregate large DataFrames.

Official
Advanced
syl2042syl2042

cloudflare-deploy

Deploy Cloudflare apps and infrastructure across Workers and Pages.

Community
Advanced
e-xodee-xode
3

vuetify-layout

Implement Vuetify 4 app shells with navigation, grids, and tabs for Vue SSR pages.

Official
Intermediate
mckinseymckinsey
3.8k

dashboard-build

Generate Vizro dashboard code from design specifications and run validation tests.

Official
Advanced