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.
npx claudepluginhub mckinsey/vizro --plugin vizro-e2e-flowThis skill uses the workspace's default tool permissions.
Each mistake below is expanded with code examples and fixes in [yaml-reference.md](references/yaml-reference.md).
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.
Generates self-contained interactive HTML dashboards with KPI cards, charts, filters, and tables from queries, CSVs, or samples for reports and monitoring.
Share bugs, ideas, or general feedback.
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 |