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. Ensure that vizro is installed.

    pip install vizro

  2. 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. The chart_agent returns a BaseChartPlan object that contains the generated code. Let's execute the provided code and examine the outcome.

    Vizro-AI chart

    import plotly.express as px
from pydantic_ai.models.openai import OpenAIChatModel
from pydantic_ai.providers.openai import OpenAIProvider
from vizro_ai.agents import chart_agent

model = OpenAIChatModel(
    "gpt-4o",
    provider=OpenAIProvider(api_key="your-api-key-here"),
)

df = px.data.gapminder()
result = chart_agent.run_sync(
    model=model,
    user_prompt="""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""",
    deps=df,
)

print(f"Code:\n{result.output.code_vizro}\n")
fig = result.output.vizro_chart_function(df)
fig.show()

    VizroAIChart

  3. 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 result.output.vizro_chart_function() 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 chart_agent.run_sync().

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
from pydantic_ai.models.openai import OpenAIChatModel
from pydantic_ai.providers.openai import OpenAIProvider
from vizro_ai.agents import chart_agent

model = OpenAIChatModel(
    "gpt-4o",
    provider=OpenAIProvider(api_key="your-api-key-here"),
)
df = px.data.gapminder()
result = chart_agent.run_sync(
    model=model,
    user_prompt="""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""",
    deps=df,
)
fig = result.output.vizro_chart_function(df)

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