Black Lives Matter. Please consider donating to Black Girls Code today.

How to create multiple separate bar graphs on one page using dash

Hello I am new to dash. I want to graph multiple bar graphs on one page, all with titles and axes, and I want the hex color of the bar graphs to be #7AB547. What I have so far:

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html

df=pd.read_csv('df.csv') 

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

colors = {
    'background': '#111111',
    'text': '#7AB547'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='zero',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='zero', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-1',
        figure={
            'data': [
                {'x': df['x'], 'y': df['x'], 'type': 'bar'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )

])

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

Hi @zero, how can we help you? If you want multiple bar charts you can defined multiple dcc.Graph as the one you already defined.

1 Like