How to convert the advanced callback dash application to vizro app?


Someone please explain how to convert the following dash application to vizro dashboard.

from dash import Dash, dash_table, dcc, html, Input, Output, callback
import pandas as pd

df = pd.read_csv('')
# add an id column and set it as the index
# in this case the unique ID is just the country name, so we could have just
# renamed 'country' to 'id' (but given it the display name 'country'), but
# here it's duplicated just to show the more general pattern.
df['id'] = df['country']
df.set_index('id', inplace=True, drop=False)

app = Dash(__name__)

app.layout = html.Div([
            {'name': i, 'id': i, 'deletable': True} for i in df.columns
            # omit the id column
            if i != 'id'
        page_current= 0,
        page_size= 10,

    Output('datatable-row-ids-container', 'children'),
    Input('datatable-row-ids', 'derived_virtual_row_ids'),
    Input('datatable-row-ids', 'selected_row_ids'),
    Input('datatable-row-ids', 'active_cell'))
def update_graphs(row_ids, selected_row_ids, active_cell):
    # When the table is first rendered, `derived_virtual_data` and
    # `derived_virtual_selected_rows` will be `None`. This is due to an
    # idiosyncrasy in Dash (unsupplied properties are always None and Dash
    # calls the dependent callbacks when the component is first rendered).
    # So, if `rows` is `None`, then the component was just rendered
    # and its value will be the same as the component's dataframe.
    # Instead of setting `None` in here, you could also set
    # `derived_virtual_data=df.to_rows('dict')` when you initialize
    # the component.
    selected_id_set = set(selected_row_ids or [])

    if row_ids is None:
        dff = df
        # pandas Series works enough like a list for this to be OK
        row_ids = df['id']
        dff = df.loc[row_ids]

    active_row_id = active_cell['row_id'] if active_cell else None

    colors = ['#FF69B4' if id == active_row_id
              else '#7FDBFF' if id in selected_id_set
              else '#0074D9'
              for id in row_ids]

    return [
            id=column + '--row-ids',
                'data': [
                        'x': dff['country'],
                        'y': dff[column],
                        'type': 'bar',
                        'marker': {'color': colors},
                'layout': {
                    'xaxis': {'automargin': True},
                    'yaxis': {
                        'automargin': True,
                        'title': {'text': column}
                    'height': 250,
                    'margin': {'t': 10, 'l': 10, 'r': 10},
        # check if column exists - user may have deleted it
        # If `column.deletable=False`, then you don't
        # need to do this check.
        for column in ['pop', 'lifeExp', 'gdpPercap'] if column in dff

if __name__ == '__main__':

Hi @Nagendra

You can find an example here: Vizro: a high-level framework built on top of Dash - #16 by antony.milne

Hi @AnnMarieW ,

That example looks different. There based on the controls, graph is changing.

Here in the above example based on the selected rows of the dash table, graph needs to change.

In my actual case, graph only needs to plot of the selected rows of the data table. If no row is selected, then that div container should be blank.

Iam not able find the correct reference for that to convert dash application to vizro with callbacks. Could you please suggest the correct link.

Hi @Nagendra

This example might be helpful to you

Hi @AnnMarieW,

Thanks for your help. It worked for me.

1 Like