From vizro-e2e-flow
References Vizro YAML patterns for dashboard components, data_manager registration, custom charts, filters, parameters, and AG Grid tables. Fixes common syntax and runtime errors.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vizro-e2e-flow:writing-vizro-yamlThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Each mistake below is expanded with code examples and fixes in [yaml-reference.md](references/yaml-reference.md).
Each mistake below is expanded with code examples and fixes in yaml-reference.md.
@capture("graph") receives a DataFrame — use data_frame directly; never re-lookup via data_manager[data_frame] (causes blank charts).data_manager is not subscriptable — pre-process on raw DataFrame, then register._target_ needs module prefix — _target_: custom_charts.my_chart, not _target_: my_chart.type: figure has no title field — KPI titles go in _target_: kpi_card args.type: ag_grid requires _target_: dash_ag_grid."component_id.argument_name", not "component_id.figure".column: "Version #" (unquoted # starts a comment).targets: — omit when you want to apply it to all components on the page whose data source includes defined filter column.# Standard chart
- figure:
_target_: bar
data_frame: sales_data
x: region
y: revenue
type: graph
title: Revenue by Region
# KPI card (title inside figure args, NOT on component)
- figure:
_target_: kpi_card
data_frame: kpi_data
value_column: Revenue
title: Total Revenue
value_format: "${value:,.0f}"
type: figure
# AG Grid table
- figure:
_target_: dash_ag_grid
data_frame: sales_data
type: ag_grid
title: Sales Data
# Filter with targets
controls:
- column: region
targets: [chart_1, chart_2]
type: filter
import vizro.models as vm
from vizro import Vizro
import vizro.plotly.express as px
from vizro.tables import dash_ag_grid
from vizro.figures import kpi_card, kpi_card_reference
from vizro.models.types import capture
from vizro.managers import data_manager
from vizro.themes import palettes, colors
Load yaml-reference.md when you need expanded guidance. Key sections to search for:
| Need | Search for |
|---|---|
| App structure | ## End-to-End Data Flow |
| Data registration | ## Data Registration |
| Custom charts | ## Custom Charts |
| AG Grid (heatmap, inline bars) | ## AG Grid Tables |
| Containers / Tabs | ## Containers or ## Tabs |
| Expanded mistake fixes | ## Critical Mistakes |
npx claudepluginhub mckinsey/vizro --plugin vizro-e2e-flowDefines the YAML schema for grid dashboards with 6 cell types, grid layout, cell merging, and incremental build workflow. Required by skills that produce visual data dashboards.
Guides Vizro dashboard layout design: 12-col grids, component sizing (KPI/charts/tables), filter placement, data-type selectors (dropdown/slider), container patterns.
Build no-code interactive data dashboards with Lumen YAML. Connect files/databases/APIs, add filters/cross-filtering, charts/indicators for exploration/prototyping.