I'm trying to create a dashboard to display bullet charts side by side, but they are showing vertically underneath each other. I'm using dash.bootstrap-components with plotly. A lot of people are saying in different forums that I should add the dbc.themes.bootstrap to styling for it to work but it isn't working for me -> (app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP]).
Below is some of my code that I have that shows the charts going vertically. I want them to display side by side. When I first installed my packages, I was ablee to get it working, but once I upgraded pip and ran a few other packages and moved my folder to another location the layout seemed like it broke or something. Any suggestions. I do think that conda and pip installation have something to do with it im assuming bc I had issues with them and ran different packages with pip and conda. I also re-installed the dash_bootstrap_components. Any ideas what I should do.
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
import dash_core_components as dcc
import plotly.figure_factory as ff
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
html.Div(html.H6("Title"),
style={"text-align": "Center"}),
html.Hr(),
html.H1("Sub-Title"),
dbc.CardHeader(
dbc.Button(
"Completed",
color="link",
id="buttonCompleted",
)
),
dbc.Collapse(
dbc.CardBody("Chart goes here if needed."),
id="collapseCompleted", is_open=False
),
dbc.CardHeader(
dbc.Button(
"In Progress",
color="link",
id="buttonInProgress",
)
),
dbc.Collapse(
dbc.CardBody(html.Div([
dbc.Row(html.Div([
dbc.Col(html.Div( [
dcc.Graph(id='bullet-chart1',
figure=ff.create_bullet(
data, titles="title",
ranges='ranges',
measures='measures',
title=None, autosize=True,
width=450, height=300,
),
),
]),
),
dbc.Col(html.Div([
dcc.Graph(id='bullet-chart2',
figure=ff.create_bullet(
data2, ranges='ranges',
measures='measures',
title=None, autosize=True,
width=450, height=300
)
),
]),
),
]),
)
])),
id="collapseInProgress", is_open=True
),
dbc.CardHeader(
dbc.Button(
"Not Started",
color="link",
id="buttonNotStarted"
)
),
dbc.Collapse(
dbc.CardBody("Chart goes here"),
id="collapseNotStarted", is_open=False
)
])
