Questions tagged [dash-bootstrap-components]

dash-bootstrap-components is a library of Bootstrap components for Plotly Dash.

dash-bootstrap-components is a library of Bootstrap components for Plotly Dash, that allows you to build consistently styled apps with responsive layouts.

77 questions
6
votes
1 answer

dash_bootstrap_components installed succesfully but no recognised

I have my dash working perfectly. I have installed dash_bootstrap_components to give style to my dash. I wrote pip install dash-bootstrap-components and was perfectly installed. But when I run the app, I have this error: import…
Papu
  • 121
  • 1
  • 1
  • 7
4
votes
0 answers

How can I have two labels for a toggle switch?

How can I have two labels for a toggle button in Plotly Dash? Or a different kind of button with two labels. In the picture above, the 'Toggle here for XX' are the labels. Currently, its defined as: dbc.Col(dbc.NavbarBrand("Toggle here for…
4
votes
1 answer

How to collapsed sidebar in Dash-Plotly (Dash-Bootstrap-Components)

I am using the following code which creates a simple sidebar in Dash Plotly using the Dash-Bootstrap-Components library. My goal is to achieve a collapsed sidebar as shown in the following gif by reusing the code above. I am not an expert in…
Joan
  • 269
  • 1
  • 3
  • 10
3
votes
1 answer

Dash Bootstrap Components: Replace primary color across components

I am currently writing a Dash application, mostly using Dash Bootstrap Components. I am quite happy with the layout, but want to adjust the primary color to match my companies color scheme. In the picture below, I basically want to replace all the…
Thomas
  • 4,696
  • 5
  • 36
  • 71
3
votes
1 answer

Plotly dash grid layout using dbc.Col & dbc.Row without the use of the bootstraps themes

Is it possible to use the dbc.Col and dbc.Row functions to set up the grid layout without using the bootstrap themes ? When adding for example the codepen.io css stylesheet, even when specifying the rows and columns, it displays everything stacked…
3
votes
0 answers

Dash bootstrap grid not working: columns not showing

I am trying to build a dashboard using plotly-dash and bootstrap for python. Now I am trying to format the dashboard such that i have two columns with the input on the left and the graph on the right. I am however not getting two columns. Below is a…
Joep
  • 31
  • 4
3
votes
1 answer

Plotly-Dash : Linking external / local CSS

I am trying to link an external/local CSS, however, it doesn't seem to be linked. I followed the example in this link: https://dash.plot.ly/external-resources app.py external_stylesheets = [ dbc.themes.SLATE, { 'href':…
kms
  • 1,810
  • 1
  • 41
  • 92
3
votes
0 answers

Is there a way to set dynamic width & height for plotly graphs?

I am trying to create a Dashboard using Dash and Plotly graphs. I have also added dash bootstrap components for card-component. I want to fit 4 graphs on 4 cards in this fashion: I was able to create card body using following code: import…
2
votes
2 answers

Set specific colour map to Bar-chart with callback - dash Plotly

I've got an interactive bar chart that displays counts from days of the week. I'm trying to set the color map so each day of the week maintains the same color. At the moment, if I remove any days, the color changes. Separately, is it possible to…
Chopin
  • 96
  • 1
  • 10
  • 35
2
votes
0 answers

How to vertically place Plotly Dash Navbar on the left in python?

I am trying to replicate the Navbar on the left side in the following link: https://historicalbaseball.herokuapp.com/team I have tried this so far and I've looked through the other example projects provided by Plotly and Dash and nothing else…
2
votes
0 answers

Setting border radius for Dash Bootstrap Components's CardGroup component or its parent Div doesn't work the same as for individual cards

I'm building an app in Dash using the dbc module and all of my other components and UI elements have corners rounded for 20px. However, I use a CardGroup component to display some information as individual cards stitched together and it doesn't…
David K.
  • 41
  • 3
2
votes
1 answer

Creating mixed width and height cells in a Dash layout

I've seen multiple posts about how to create mixed height/width using Dash's built in dbc components and didn't see a truly flexible, easy to use method for making the following: here are some links, Plotly-Dash: How to span a component across two…
joshp
  • 706
  • 5
  • 22
2
votes
1 answer

How to add x-scrollbar to a part of dbc.Card, dash, Python3?

I want to make 2 rows of entries. Each row has one label on the left side followed by up-to 20 entries. I am using dbc.Container to hold the layout. In the container I have several dbc.Cards. For simplicity here, I only used one card. In this card,…
aura
  • 383
  • 7
  • 24
2
votes
1 answer

dash_bootstrap_components Col and Row not showing as expected - just stacking each item

I am trying to build my first dash app and want to organize things using dbc.Col and dbc.Row. I'm trying to build something to look like this in the first tab section called "Equity Risk"... basic layout i'm aiming for Unfortunately, all that's…
2
votes
1 answer

Python - Building a descriptive statistics table using dash_bootstrap_components

I'm working on a dashboard using Dash and dash_bootstrap_components. I already have a layout with 3 rows of graphs that will change after a drop down selection (from a data frame). The one Thing I would like to do but could not find an answer for ,…
NsN
  • 109
  • 5
1
2 3 4 5 6