Skip to content

How to use graphs

This guide shows you how to use graphs to visualize your data in the dashboard.

The Graph model is the most used component in many dashboards, allowing you to visualize data in a variety of ways.

To add a Graph to your page, do the following:

  • insert the Graph model into the components argument of the Page model
  • enter any of the currently available charts of the open source library into the figure argument


In order to use the chart in a Vizro dashboard, you need to import it as import as px. This leaves any of the functionality untouched, but allows direct insertion into the Graph model as is.


import vizro.models as vm
import as px
from vizro import Vizro

df =

page = vm.Page(
    title="My first page",
                df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], color="species"
    controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],

dashboard = vm.Dashboard(pages=[page])

# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
- components:
  - figure:
      _target_: scatter_matrix
      color: species
      data_frame: iris
      dimensions: ["sepal_length", "sepal_width", "petal_length", "petal_width"]
    type: graph
    - column: species
      type: filter
        title: Species
        type: dropdown
  title: My first page


Note that in the above example we directly inserted the chart into the figure argument for the .py version. This is also the simplest way to connect your chart to a Pandas DataFrame - for other connections, please refer to this guide on data connections. For the yaml version, we simply referred to the name by string.

Vizro automatically sets the plotly default template

When importing Vizro, we automatically set the plotly default template to a custom designed template. In case you would like to set the default back, simply run

import as pio
pio.templates.default = "plotly"
or enter your desired template into any chart as template="plotly" on a case-by-case basis. Note that we do not recommend the above steps for use in dashboards, as other templates will look out-of-sync with overall dashboard design.