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.

Note also that the chart needs to have a data_frame argument. In case you require a chart without a data_frame argument (for example, the imshow chart), refer to our guide on custom charts.


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 add data to the 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


In the Python example we directly inserted the pandas DataFrame df into figure=px.scatter_matrix(df, ...). This is one way to connect a chart to data. For the YAML version, we refer to the data source by name as data_frame: iris. For a full explanation of the different methods you can use to send data to your dashboard, see our guide to using data in Vizro.

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.