Skip to content

How to add Vizro-AI created charts to a Vizro dashboard

This guide explains the different ways in which you can add a chart generated by Vizro-AI to an existing Vizro dashboard.

Use Vizro-AI's generated code

  1. Create a chart with Vizro-AI that you would like to visualize in a dashboard.

    In this example, we aim to create a chart that illustrates the population development of each continent over time. To gain deeper insights and access the underlying code responsible for generating the chart, include return_elements=True in the plot() method. Let's execute the provided code and examine the outcome.

    Vizro-AI chart

    import vizro_ai
from vizro_ai import VizroAI
import vizro.plotly.express as px
from dotenv import load_dotenv

load_dotenv()

df = px.data.gapminder()
vizro_ai = VizroAI(model="gpt-4o")

result = vizro_ai.plot(
    df,
    """Plot a bubble chart to show the changes in life expectancy
        and GDP per capita for each country over time.
        Color the bubbles by continent.
        Add animation on yearly basis, and do not use facets.
        Put the legend on top""",
    return_elements=True,
)

print(f"Insight:\n{result.chart_insights}\n")
print(f"Code explanation:\n{result.code_explanation}\n\nCode:\n{result.code_vizro}\n")
result.get_fig_object(df).show()

    VizroAIChart

  2. Insert the resulting chart into a dashboard.

    Once you are satisfied with the chart, you can add it to a Vizro dashboard.

    @capture("graph")
def custom_chart(data_frame):
    fig = px.scatter(
        data_frame,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent",
        animation_frame="year",
        hover_name="country",
        size_max=60,
    )
    fig.update_layout(
        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
    )
    return fig

The custom_chart function is an example of the custom chart. It returns a go.Figure() object. This object must then be passed to the figure argument of the Vizro Graph model.

Vizro-AI chart within vizro dashboard

from vizro import Vizro
import vizro.models as vm
from vizro.models.types import capture
import pandas as pd
import vizro.plotly.express as px


@capture("graph")
def custom_chart(data_frame):
    fig = px.scatter(
        data_frame,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent",
        animation_frame="year",
        hover_name="country",
        size_max=60,
    )
    fig.update_layout(
        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
    )
    return fig


df = px.data.gapminder()

page = vm.Page(
    title = 'Demographics',
    components = [
        vm.Graph(figure=custom_chart(df)),
        vm.Graph(
            figure=px.box(
                df, x='continent', y='lifeExp', color='continent', title='Life Expectancy per Continent'
            )
        )
    ],
    controls = [
        vm.Filter(column='country'),
        vm.Filter(column='continent')])

Vizro().build(vm.Dashboard(pages=[page])).run(port=8090)

VizroDashboard

Use Vizro-AI dynamically to return a fig object

We can also use Vizro-AI dynamically and assign the output of plot() directly to the fig variable, enabling its reuse in the vm.Graph.figure argument. This method offers streamlined efficiency, eliminating the need for code copying. Note that each dashboard run triggers an API call to the LLM, possibly escalating costs. This can be avoided if the fig object is stored and retrieved as needed, instead of making repeated calls to plot().

Executing the code below yields the identical dashboard as the example above.

Use Vizro-AI fig directly in vizro dashboard

from vizro import Vizro
import vizro.models as vm
import pandas as pd
import vizro.plotly.express as px
import vizro_ai
from vizro_ai import VizroAI

from dotenv import load_dotenv
load_dotenv()
df = px.data.gapminder()
vizro_ai = VizroAI(model="gpt-4o")

fig = vizro_ai.plot(df,
    """Plot a bubble chart to show the changes in life expectancy
    and GDP per capita for each country over time.
    Color the bubbles by continent.
    Add animation on yearly basis, and do not use facets.
    Put the legend on top"""
)

page = vm.Page(
    title = 'Demographics',
    components = [
        vm.Graph(figure=fig),
        vm.Graph(
            figure=px.box(
                df, x='continent', y='lifeExp', color='continent', title='Life Expectancy per Continent'
            )
        )
    ],
    controls = [
        vm.Filter(column='country'),
        vm.Filter(column='continent')])

Vizro().build(vm.Dashboard(pages=[page])).run(port=8090)

VizroDashboard2