How to add footnotes and source text to plots in dash

Hi, below is my code:

app = dash.Dash(__name__, meta_tags=[{
      'name': 'viewport',
      'content': 'width=device-width, initial-scale=1.0'
    }])
server=app.server

tabs_styles = {'display': 'inlineBlock', 'height': 'auto', 'width': 'auto',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': '#A9A9A9',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "#A9A9A9",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', mobile_breakpoint=0, children=[
        dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Ahmedabad', value='tab-2',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Bengaluru', value='tab-3',style=tab_style, selected_style=tab_selected_style)
    ]),
    html.Div(id='tabs-example-content')
])

@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))

def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            dcc.Graph(id='g2', figure=india)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-2':
        return html.Div([
            dcc.Graph(id='g2', figure=ahm)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-3':
        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})


if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

I want to include footnotes in this dashboard under each tab for each plot. How should I modify to achieve this?

The expected output of a plot in a tab looks something like this:

Hi @skwolvie

I can’t see the image you provided, but to add a note just add a new dcc.Div and use their “children” property to pass the note, like:

    html.Div(id='tabs-example-content'),
    html.Div(id='footnote')
])

@app.callback(Output('tabs-example-content', 'children'),
              Output('footnote', 'children'),
              Input('tabs-example', 'value'))

Then:

        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "This is my footnote to the tab-2 graph"

Hi, thanks for this solution. But how do I right adjust my footnote, and design my text like italic, underline break line,…
If you cant observe the images please refer to the plot in this URL: https://twitter.com/ShamikaRavi/status/1377893086810959872/photo/1

I would like to build something like this

@skwolvie

You can apply any style in the dcc.Div or use a css file to do that:

    html.Div(id='tabs-example-content'),
    html.Div(id='footnote', style={'font-size':12, 'color':'blue', etc.)
])

You also can pass different html.H to the dcc.Div like:

   return dcc.Div(html.H5("this is my footnote"),
                  html.H6("abut the graphic"),
                         etc. )

And if you want, you can use markdowwn to write and style.