cheatsheet.html•66.7 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vizro - Cheatsheet</title>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.min.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script>
<script src="assets/js/script.js" defer></script>
</head>
<body>
<header class="header">
<div class="header-left">
<div class="header-content">
<h1 class="header-title">Vizro - Cheatsheet</h1>
<p class="header-subtitle">Essential commands & syntax reference</p>
</div>
</div>
<a href="../../" class="cta-button"> Go to Vizro docs <span>→</span> </a>
</header>
<div class="main-container">
<div class="sidebar">
<h2>Table of contents</h2>
<ul class="nav-links">
<li><a href="#getting-started-section">Get started</a></li>
<li><a href="#components-section">Components</a></li>
<li><a href="#controls-section">Controls</a></li>
<li><a href="#page-layout-section">Page layout & navigation</a></li>
<li>
<a href="#data-management-section">Data management & actions</a>
</li>
<li><a href="#actions-section">Actions</a></li>
<li><a href="#custom-components-section">Custom components</a></li>
</ul>
</div>
<div class="container">
<!-- beginning of first card Get Started-->
<div class="card purple" id="getting-started-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
"
>🚀</span
>
Get started
</h2>
<div class="card-flex">
<div class="component-card">
<h3 class="card-title">📱 Basic dashboard</h3>
<p class="card-description">
Install the Vizro package to get started with dashboard
creation.
</p>
<div class="highlight-box-inline">
<span class="mdi mdi-lightbulb-on-outline"></span>
<div>
<strong></strong> Install Vizro with
<code>pip install --upgrade vizro</code> for the latest
features.
</div>
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">from vizro import Vizro
import vizro.models as vm
dashboard = vm.Dashboard(
pages=[
vm.Page(
title="My first page!",
components=[vm.Card(text="Welcome to Vizro!")],
)
]
)
Vizro().build(dashboard).run()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<p class="card-note">
<strong>Note:</strong> <br />
This code creates a complete dashboard with pages & components,
and runs the application. <br />
All other code in this cheatsheet are snippets to illustrate the
feature under discussion.
</p>
</div>
<div class="component-card">
<h3 class="card-title">📄 Basic page</h3>
<p class="card-description">
Define a single page with title, components, and layout
configuration.
</p>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.plotly.express as px
import vizro.models as vm
df = px.data.iris()
# Basic page with components
page = vm.Page(
title="My first page!",
# Add your components here
components=[
vm.Graph(
figure=px.scatter(
df,
x="sepal_length",
y="petal_width",
color="species",
),
),
],
# Add your controls here
controls=[vm.Filter(column="species")]
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Page tips:</strong>
</div>
<div class="highlight-content">
• Add tooltip with icon & meta tags by providing
<code class="code-inline">description</code> argument. <br />•
Define custom URL path by providing
<code class="code-inline">path</code> argument.
</div>
</div>
</div>
</div>
</div>
<!-- end of first card Getting Started-->
<!-- beginning of second card Components-->
<div class="card green" id="components-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #34d399, #10b981);
color: white;
"
>🧩</span
>
Components
</h2>
<div class="main-flex-container">
<div class="card-flex">
<!-- beginning of first card Graph-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/graph/"
>Graph</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Graph"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Graph API</span>
</a>
</div>
<div class="card-description">
Display interactive plotly charts and visualizations with data
filtering capabilities.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.plotly.express as px
import vizro.models as vm
df = px.data.iris()
graph = vm.Graph(
figure=px.scatter(
df,
x="sepal_length",
y="petal_width",
color="species",
)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of first card Graph-->
<!-- beginning of second card Aggrid-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/table/#ag-grid"
>AgGrid</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.AgGrid"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view AgGrid API</span>
</a>
</div>
<div class="card-description">
Advanced data grid with enterprise features like grouping,
aggregation, and cell editing.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.plotly.express as px
import vizro.models as vm
from vizro.tables import dash_ag_grid
df = px.data.iris()
ag_grid = vm.AgGrid(
title="Dash AG Grid",
figure=dash_ag_grid(data_frame=df),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of second card Aggrid-->
<!-- beginning of third card Kpi card-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/card/#create-a-kpi-card"
>KPI card</a
>
</div>
<div class="card-description">
A KPI card displays a single value, with optional title, icon,
and reference. Vizro includes two built-in KPI card functions
<code>kpi_card</code> and <code>kpi_card_reference</code>.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import pandas as pd
from vizro.figures import kpi_card_reference
import vizro.models as vm
df_kpi = pd.DataFrame(
{"Actual": [100, 200, 700], "Reference": [100, 300, 500]}
)
kpi_card_reference = kpi_card_reference(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
title="KPI reference (pos)",
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of third card Kpi card-->
</div>
<!-- beginning of second row of components-->
<div class="components-second-row">
<!-- beginning of 4th card button-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/button/"
>Button</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Button"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Button API</span>
</a>
</div>
<div class="card-description">
Interactive button component that triggers actions and
callbacks when clicked.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
button = vm.Button(
text="Click me!",
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of 4th card button-->
<!-- beginning of 5th card-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/card/"
>Card</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Card"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Card API</span>
</a>
</div>
<div class="card-description">
Display text content, markdown, or HTML in a styled card
container.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
card = vm.Card(
text="Hello World!",
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of 5th card-->
<!-- beginning of Container (spans 2 rows) -->
<div class="component-card container-span">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/containers/"
>Container</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Container"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Container API</span>
</a>
</div>
<div class="card-description">
Group multiple components together with shared layout,
controls and styling options.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
container = vm.Container(
title="Analysis Section",
components=[
vm.Graph(figure=chart),
vm.Card(text="Summary")
]
)
# Using Container within Tabs
tabs = vm.Tabs(
tabs=[
vm.Container(
title="Overview",
components=[vm.Card(text="Overview")],
),
vm.Container(
title="Details",
components=[vm.Card(text="Details")],
)
]
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of Container (spans 2 rows) -->
<!-- beginning of Figure card -->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/figure/"
>Figure</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Figure"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Figure API</span>
</a>
</div>
<div class="card-description">
Display KPI cards or any custom figures.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
from vizro.figures import kpi_card
figure = vm.Figure(
figure=kpi_card(
data_frame=df,
value_column="column_name",
),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<!-- end of Figure card -->
<!-- beginning of text card -->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/text/"
>Text</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Text"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Text API</span>
</a>
</div>
<div class="card-description">
Render markdown text with support for formatting, links, and
embedded content.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
text = vm.Text(
text="Markdown text content",
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
</div>
<!-- end of second row of components-->
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Component tips:</strong>
</div>
<div class="highlight-content">
• All components can be styled with custom CSS classes and IDs.
<br />• All arguments of underlying dash components can be
entered via <code class="code-inline">extra</code> argument.
</div>
</div>
</div>
</div>
<!-- end of second card Components-->
<!-- beginning of third card Controls-->
<div class="card orange" id="controls-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
"
>🎛️</span
>
Controls
</h2>
<div class="two-column-grid">
<!-- beginning of Filter controls-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/filters/"
>Filter</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Filter"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Filter API</span>
</a>
</div>
<div class="card-description">
Apply data filtering to components based on column values using
various selector types.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
filter = vm.Filter(
column="species",
selector=vm.Dropdown(
value=["setosa", "versicolor"]
),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Filter tips:</strong>
</div>
<div class="highlight-content">
• column argument denotes the target column to be filtered
<br />• Set <code class="code-inline">targets</code> to
specify which components on the page the filter should apply
to.
</div>
</div>
</div>
<!-- end of Filter controls-->
<!-- beginning of Parameter controls-->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/parameters/"
>Parameter</a
>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Parameter"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Parameter API</span>
</a>
</div>
<div class="card-description">
Dynamically control component properties through user input
selectors.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
parameter = vm.Parameter(
targets=["scatter_chart.title"],
selector=vm.Dropdown(
options=["My scatter chart", "A better title!", "Another title..."],
multi=False,
),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Parameter tips:</strong>
</div>
<div class="highlight-content">
• Specify <code class="code-inline">targets</code> in the form
<code class="code-inline"
>target_component_id.target_argument</code
>
(for example,
<code class="code-inline">scatter_chart.title</code>) <br />•
To make parameter optional you can specify the string "NONE"
in the options or value field <br />• To change nested
parameters, you can specify the
<code class="code-inline">targets</code> argument with a dot
separated string like
<code class="code-inline"
>target_component_id.target_argument.first_hierarchy</code
><br />• selector argument is a mandatory field, specify it by
providing the appropriate model and the desired
options/numeric ranges.
</div>
</div>
</div>
<!-- end of Parameter controls-->
</div>
<!-- beginning of categorical selectors -->
<div class="three-column-grid">
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/selectors/#categorical-selectors"
>Categorical selectors</a
>
</div>
<div class="card-description">
Interactive components for selecting from discrete categories
and options.
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>Dropdown</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Dropdown"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Dropdown API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.Dropdown()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/dropdown.png"
alt="Dropdown selector"
class="selector-icon"
title="Dropdown selector"
/>
</div>
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>Checklist</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Checklist"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Checklist API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.Checklist()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/checklist.png"
alt="Checklist selector"
class="selector-icon-checklist"
title="Checklist selector"
/>
</div>
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>RadioItems</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.RadioItems"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view RadioItems API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.RadioItems()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/radioitems.png"
alt="RadioItems selector"
class="selector-icon"
title="RadioItems selector"
/>
</div>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Categorical selectors tips:</strong>
</div>
<div class="highlight-content">
• When configuring
<code class="code-inline">options</code> use a dictionary with
<code class="code-inline">label</code> and
<code class="code-inline">value</code>
for custom labels.
</div>
</div>
</div>
<!-- end of categorical selectors -->
<!-- beginning of temporal selectors -->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/selectors/#temporal-selectors"
>Temporal selectors</a
>
</div>
<div class="card-description">
Date and time selection components for temporal data filtering
and analysis.
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>DatePicker</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.DatePicker"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view DatePicker API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.DatePicker()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/daterangepicker.png"
alt="Date Picker selector"
class="selector-icon-date-picker"
title="Date Picker selector"
/>
</div>
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>DatePicker</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.DatePicker"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view DatePicker API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.DatePicker(
range=False
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/datepicker.png"
alt="Date Range Picker selector"
class="selector-icon-date-picker"
title="Date Range Picker selector"
/>
</div>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Temporal selectors tips:</strong>
</div>
<div class="highlight-content">
• When configuring the DatePicker make sure to provide your
dates for <code class="code-inline">min</code>,
<code class="code-inline">max</code> and
<code class="code-inline">value</code> arguments in
<code class="code-inline">"yyyy-mm-dd"</code> format or as
datetime type (for example,
<code class="code-inline"
>datetime.datetime(2024, 01, 01)</code
>).
</div>
</div>
</div>
<!-- end of temporal selectors -->
<div class="flex-card">
<!-- beginning of numerical selectors -->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/selectors/#numerical-selectors"
>Numerical selectors</a
>
</div>
<div class="card-description">
Components for selecting numerical values and ranges with
precise control.
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>Slider</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Slider"
target="_blank"
class="icon-link"
>
<span class="material-icons"
>integration_instructions</span
>
<span class="tooltip">Click to view Slider API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.Slider()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/slider.png"
alt="Slider selector"
class="selector-icon"
title="Slider selector"
/>
</div>
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>RangeSlider</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.RangeSlider"
target="_blank"
class="icon-link"
>
<span class="material-icons"
>integration_instructions</span
>
<span class="tooltip">Click to view RangeSlider API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.RangeSlider()</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/rangeslider.png"
alt="RangeSlider selector"
class="selector-icon"
title="RangeSlider selector"
/>
</div>
</div>
</div>
<!-- end of numerical selectors -->
<!-- beginning of Boolean selectors -->
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/selectors/#boolean-selectors"
>Boolean selectors</a
>
</div>
<div class="card-description">
Component for selecting boolean values.
</div>
<div class="code-section-flex">
<div class="component-card-row-content">
<span>Switch</span>
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Switch"
target="_blank"
class="icon-link"
>
<span class="material-icons"
>integration_instructions</span
>
<span class="tooltip">Click to view Switch API</span>
</a>
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">selector=vm.Switch(
title="Is True?",
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/switch.png"
alt="Switch selector"
class="selector-icon"
title="Switch selector"
/>
</div>
</div>
</div>
<!-- end of temporal selectors -->
</div>
</div>
</div>
<!-- end of third card Controls-->
<!-- beginning of fourth card Page layout-->
<div class="card teal" id="page-layout-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #2dd4bf, #0d9488);
color: white;
"
>🪟</span
>
Page layout & navigation
</h2>
<div class="two-column-grid">
<div class="component-card">
<div class="card-title">Multi-page dashboard</div>
<div class="card-description">
Create dashboards with multiple pages and automatic navigation
between them.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
page_1 = vm.Page(
title="Overview",
components=[
vm.Card(text="Test")
]
)
page_2 = vm.Page(
title="Details",
components=[
vm.Card(text="Test")
]
)
page_3 = vm.Page(
title="Summary",
components=[
vm.Text(text="Test")
]
)
dashboard = vm.Dashboard(title="My dashboard",pages=[page_1, page_2, page_3])</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">
Navigation
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Navigation"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Navigation API</span>
</a>
</div>
<div class="card-description">
Configure custom navigation to group pages together and
customize how they appear in your navigation by specifying a
navigation model.
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
navigation = vm.Navigation(
pages=[page_1, page_2, page_3],
nav_selector=vm.NavBar(
items=[
vm.NavLink(
icon="home",
label="Home",
pages=["Overview"],
),
vm.NavLink(
icon="Library Add",
label="Features",
pages={
"Components": ["Text"],
"Controls": ["Details"]
},
),
]
)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/navigation.png"
alt="Layout example"
class="navigation-img"
title="Grid layout example"
/>
</div>
</div>
<div class="component-card">
<div class="card-title">
Grid layout
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Grid"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Grid API</span>
</a>
</div>
<div class="card-description">
Arrange components in grid patterns with precise positioning and
responsive design with grid layout.
</div>
<div class="two-column-grid">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
grid_layout = vm.Grid(
grid=[
[0, 1, -1],
[2, 2, 2],
[2, 2, 2],
[2, 2, 2],
],
)
</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<img
src="assets/images/layout_exam.jpg"
alt="Layout example"
class="grid-layout-example-image"
title="Grid layout example"
/>
<div class="example-row">
<code class="code-inline">grid = [[0], [1], [2], [3]</code>
<img
src="assets/images/vertical_stacking.png"
alt="Vertical stacking"
class="layout-icon"
title="Vertical stacking"
/>
</div>
<div class="example-row">
<code class="code-inline">grid = [[0, 1, 2, 3]]</code>
<img
src="assets/images/horizontal_stacking.png"
alt="Horizontal stacking"
class="layout-icon"
title="Horizontal stacking"
/>
</div>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Grid layout tips:</strong>
</div>
<div class="highlight-content">
• Grid numbers match component positions <br />• Add empty
spaces within grid layout by specifying -1 e.g
<code class="code-inline">grid=[[0], [1], [-1]]</code> <br />•
Control the scroll behavior by specifying
<code class="code-inline">row_min_height</code> and
<code class="code-inline">col_min_width</code>
</div>
</div>
</div>
<div class="component-card">
<div class="card-title">
Flex layout
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.Flex"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view Flex API</span>
</a>
</div>
<div class="card-description">
Achieve flexible layout system for dynamic component arrangement
and responsive behavior with flex layout.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
flex_layout = vm.Flex(
direction="row",
)
</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Flex layout tips:</strong>
</div>
<div class="highlight-content">
• To wrap components into multiple lines use
<code class="code-inline">wrap=True</code> <br />• Control the
spacing between components in the flex container by using
<code class="code-inline">gap</code> argument
</div>
</div>
</div>
</div>
</div>
<!-- end of fourth card Page layout-->
<!-- beginning of fifth card Data-->
<div class="card pink" id="data-management-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #f472b6, #db2777);
color: white;
"
>💾</span
>
Data management
</h2>
<div class="three-column-grid">
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#static-data"
>Static data</a
>
</div>
<div class="card-description">
Apply the data_frame directly to your chart if your data will
not refresh while the dashboard is running.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import pandas as pd
# Load data
df = pd.read_csv("data.csv")
# Use in components
vm.Graph(
figure=px.scatter(
data_frame=df,
x="x_col",
y="y_col"
)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Static data tips:</strong>
</div>
<div class="highlight-content">
• The same can be achieved by assigning the
<code>data_frame</code> to the data_manager key such as
<code>data_manager["my_data"] = df</code>, and then
referencing it in the figure like:
<code>data_frame</code> argument in your figure, like:
<code>figure(data_frame="my_data")</code>
</div>
</div>
</div>
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#dynamic-data"
>Dynamic data</a
>
</div>
<div class="card-description">
A dynamic data source is a Python function that returns a pandas
DataFrame. Use if you need your data to be refreshed without
restarting the dashboard.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import pandas as pd
from vizro.managers import data_manager
# Load data
def load_iris_data():
iris = pd.read_csv("iris.csv")
return iris.sample(50)
data_manager["iris"] = load_iris_data
# Use in components
vm.Graph(
figure=px.box(
data_frame="iris",
x="species",
y="petal_width",
color="species",
)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Dynamic data tips:</strong>
</div>
<div class="highlight-content">
• Enable
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#configure-cache"
>caching</a
>
to avoid performance issues with frequent reloads.
</div>
</div>
</div>
<div class="component-card">
<div class="card-title">
<a
href="https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#parametrize-data-loading"
>Parametrized dynamic data</a
>
</div>
<div class="card-description">
Add arguments to your dynamic data loading function and control
it from the dashboard.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import pandas as pd
from vizro.managers import data_manager
# Load data
def load_iris_data(number_of_points=10):
iris = pd.read_csv("iris.csv")
return iris.sample(number_of_points)
data_manager["iris"] = load_iris_data
# Use in components
vm.Graph(
figure=px.box(
id="graph",
data_frame="iris",
x="species",
y="petal_width",
color="species",
)
)
parameter = vm.Parameter(
targets=["graph.data_frame.number_of_points"],
selector=vm.Slider(min=10, max=100, step=10, value=10),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Parametrized dynamic data tips:</strong>
</div>
<div class="highlight-content">
• Always return a DataFrame with a fixed schema when using
parameters.
<br />
• Add function arguments with default values to make data
sources configurable from the dashboard. <br />
• Use parameters to filter or reduce large datasets before
they reach the dashboard for better performance.
</div>
</div>
</div>
</div>
</div>
<!-- end of fifth card Data-->
<!-- beginning of 6th card Actions-->
<div class="card blue" id="actions-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #60a5fa, #2563eb);
color: white;
"
>🔄</span
>
Actions
</h2>
<div class="two-column-grid">
<div class="component-card">
<div class="card-title">
Export data
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/action-callables/#vizro.actions.export_data"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view export_data API</span>
</a>
</div>
<div class="card-description">
To enable downloading data, you can add the export_data action
function to the Button component.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
import vizro.actions as va
# Use action in a Button component
vm.Button(
text="Export Data",
actions=va.export_data()
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">
Cross-filter from Table
<a
href="https://vizro.readthedocs.io/en/stable/pages/API-reference/action-callables/#vizro.actions.set_control"
target="_blank"
class="icon-link"
>
<span class="material-icons">integration_instructions</span>
<span class="tooltip">Click to view set_control API</span>
</a>
</div>
<div class="card-description">
Click on a table row to filter a graph by that row’s value.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
import vizro.plotly.express as px
import vizro.actions as va
from vizro.tables import dash_ag_grid
df = px.data.iris()
page = vm.Page(
components=[
vm.AgGrid(
figure=dash_ag_grid(df),
actions=va.set_control(control="filter_id", value="species"),
),
vm.Graph(id="graph_id", figure=px.histogram(df, x="sepal_length")),
],
controls=[
vm.Filter(id="filter_id", column="species", targets=["graph_id"])
],
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Tip:</strong>
</div>
<div class="highlight-content">
• The same can be achieved if the <strong>graph</strong> is
the source of the <strong>set_control</strong> action. In that
case, include <code class="code-inline">custom_data</code> in
the graph’s figure so the clicked value can be passed to the
filter. For example:
<br />
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">vm.Graph(df,
figure=(..., custom_data=["species"]),
actions=va.set_control(... value="species"),
)</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Actions tips:</strong>
</div>
<div class="highlight-content">
• Chain multiple actions together by providing them in sequence
you want them to be executed. Next action in order will execute
only after the previous action has completed.
</div>
</div>
</div>
<!-- end of 6th card Actions-->
<!-- beginning of 7th card custom components-->
<div class="card blue" id="custom-components-section">
<h2 class="section-title">
<span
class="section-icon"
style="
background: linear-gradient(135deg, #60a5fa, #2563eb);
color: white;
"
>🛠️</span
>
Custom components
</h2>
<div class="two-column-grid">
<div class="component-card">
<div class="card-title">Custom tables</div>
<div class="card-description">
Build custom data tables with specific formatting, styling, and
interactive features.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
from dash_ag_grid import AgGrid
from vizro.models.types import capture
df = px.data.gapminder()
@capture("ag_grid")
def my_custom_aggrid(chosen_columns: list[str], data_frame=None):
defaults = {
"className": "ag-theme-quartz-dark ag-theme-vizro",
"defaultColDef": {
"resizable": True,
"sortable": True,
"flex": 1,
"minWidth": 70,
},
"style": {"height": "100%"},
}
return AgGrid(
columnDefs=[{"field": col} for col in chosen_columns],
rowData=data_frame.to_dict("records"),
**defaults,
)
# Use in AgGrid component
vm.AgGrid(
figure=custom_table(
data_frame=df,
chosen_columns=["country", "continent", "lifeExp", "pop", "gdpPercap"]
)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">Custom figure</div>
<div class="card-description">
Design custom KPI cards or other figures with complex layouts
and specialized visualizations.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
from vizro.models.types import capture
import pandas as pd
import dash_bootstrap_components as dbc
from dash import dcc, html
df = pd.DataFrame({"text": text * 2})
@capture("figure")
def multiple_cards(
data_frame: pd.DataFrame, n_rows: int = 1
) -> html.Div:
texts = data_frame.head(n_rows)["text"]
return html.Div(
children=[
dbc.Card(dcc.Markdown(f"### Card #{i}\n{text}"))
for i, text
in enumerate(texts, 1)
],
className="multiple-cards-container",
)
# Use in Figure component
vm.Figure(
id="my-figure",
figure=multiple_cards(data_frame=df)
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">Custom components</div>
<div class="card-description">
Extend any Vizro component or create completely new ones using
any dash-compatible component.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">from typing import Literal
from dash import html
import vizro.models as vm
class Jumbotron(vm.VizroBaseModel):
type: Literal["jumbotron"] = "jumbotron"
title: str
subtitle: str
text: str
def build(self):
return html.Div(
[
html.H2(self.title),
html.H3(self.subtitle),
html.P(self.text),
]
)
# Register the component
vm.Page.add_type("components", Jumbotron)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">Custom charts</div>
<div class="card-description">
Create custom plotly charts with advanced styling and
interactive features beyond standard templates.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm
from vizro.models.types import capture
import vizro.plotly.express as px
df = px.data.iris()
@capture("graph")
def scatter_with_line(data_frame, x, y, color=None, size=None, hline=None):
fig = px.scatter(
data_frame=data_frame,
x=x,
y=y,
color=color,
size=size,
)
fig.add_hline(y=hline, line_color="gray")
return fig
# Use in Graph component
vm.Graph(figure=custom_chart(data_frame=df))</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">Custom actions</div>
<div class="card-description">
Implement custom callback functions that respond to user
interactions and update dashboard state.
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">import vizro.models as vm<
from vizro.models.types import capture
@capture("action")
def update_card_text(my_dropdown_value):
return f"You selected species **{my_dropdown_value}**"
# Use with Action
vm.Button(
text="Export Data",
actions=vm.Action(
function=update_card_text("my_dropdown"),
outputs=["my_card"],
),
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
</div>
<div class="component-card">
<div class="card-title">Custom styling</div>
<div class="card-description">
Add custom css for your dashboard.
</div>
<div class="two-column-grid">
<div class="code-section-flex">
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-css">/* Apply styling to parent */
.card:has(#custom-card) {
background-color: white;
}
/* Apply styling to child */
#custom-card p {
color: black;
}</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
<div class="code-block-container">
<div class="code-block">
<pre><code class="language-python">vm.Card(
id="custom-card",
text="Lorem ipsum."
)</code></pre>
</div>
<button class="copy-btn" onclick="copyCode(this)">
Copy
</button>
</div>
</div>
<div class="highlight-box">
<div class="highlight-title">
<span class="mdi mdi-lightbulb-on-outline"></span>
<strong>Custom styling tips:</strong>
</div>
<div class="highlight-content">
• Use model ID for core, and suffixed IDs like
<code class="code-inline">{model-id}-title</code>
for non-core parts. Both can be targeted with the CSS #id
selector.
<br />• Many Vizro models accept an
<code class="code-inline">extra</code> argument for the
underlying Dash component. Use it to pass options like
<code class="code-inline">style</code> or
<code class="code-inline">className</code> to adjust
styling.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of 7th card custom components-->
<div>
<footer class="footer">
<a
href="https://vizro.readthedocs.io/en/stable/"
class="footer-icon-link"
>
Vizro docs
</a>
<a
href="https://github.com/mckinsey/vizro/"
class="footer-icon-link"
>
Vizro Github
</a>
<a href="https://huggingface.co/vizro/" class="footer-icon-link">
Hugging Face
</a>
</footer>
</div>
</div>
</div>
</body>
</html>