10-18-2022, 05:27 AM
Plotly Dash Bootstrap Card Components
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload="{"align":"left","id":"799875","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"0","readonly":"","score":"0","best":"5","gap":"5","greet":"Rate this post","legend":"0\/5 - (0 votes)","size":"24","width":"0","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}">
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 0px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> <span class="kksr-muted">Rate this post</span> </div>
</div>
<p>Welcome to the bonus content of <a href="https://nostarch.com/book-dash" data-type="URL" data-id="https://nostarch.com/book-dash" target="_blank" rel="noreferrer noopener">“The Book of Dash”</a>. <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f917.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p class="has-global-color-8-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Here you will find additional examples of Plotly Dash components, layouts and style. To learn more about making dashboards with Plotly Dash, and how to buy your copy of <a rel="noreferrer noopener" href="https://nostarch.com/book-dash" target="_blank">“The Book of Dash”</a>, please see the reference section at the bottom of this article.</p>
<p>As you read the article, feel free to run the explainer video on the Card components from one of our coauthors’ <a href="https://www.youtube.com/c/CharmingData/" data-type="URL" data-id="https://www.youtube.com/c/CharmingData/" target="_blank" rel="noreferrer noopener">“Charming Data”</a> YT channel:</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/plotly-dash-bootstrap-card-components/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FaEz1-72PKwc%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<p>This article will focus on the <code>Card</code> components from the Dash Boostrap Component library. Using cards is a great way to create eye-catching content. We’ll show you how to make the card content interactive with callbacks, but first we’ll focus on the style and layout.</p>
<h2>Plotly Dash App with a Bootstrap Card</h2>
<p>We’ll start with the basics – a minimal Dash app to display a single card without any additional styling. Be sure to check out the complete reference for <a href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/" target="_blank" rel="noreferrer noopener">using Dash Bootstrap cards.</a></p>
<p>Next, we’ll show how to jazz it up to make it look better — and more importantly — so it conveys key information at a glance.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="476" height="180" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-143.png" alt="" class="wp-image-799965" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-143.png 476w, https://blog.finxter.com/wp-content/uplo...00x113.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) card = dbc.Card( dbc.CardBody( [ html.H1("Sales"), html.H3("$104.2M") ], ),
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Styling a Dash Bootstrap Card</h2>
<p>An easy way to style content is by using Boostrap utility classes. See all the utility classes at the <a href="https://dashcheatsheet.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">Dash Bootstrap Cheatsheet</a> app. This handy cheatsheet is made by a co-author of “The Book of Dash”.</p>
<p>In this card, we center the text and change the color with “<code>text-center</code>” and “<code>text-success</code>“. The Bootstrap themes have named colors and “success” is a shade of green. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Resource</strong>: For more information about styling your app with a Boostrap theme, see <a href="https://hellodash.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">Dash Bootstrap Theme Explorer</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="465" height="166" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-142.png" alt="" class="wp-image-799960" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-142.png 465w, https://blog.finxter.com/wp-content/uplo...00x107.png 300w" sizes="(max-width: 465px) 100vw, 465px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">card = dbc.Card( dbc.CardBody( [ html.H1("Sales"), html.H3("$104.2M", className="text-success") ], ), className="text-center"
)</pre>
<p>Feel free to watch Adam’s explainer video on Bootstrap and styling your app if you need to get up to speed! <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f447.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/plotly-dash-bootstrap-card-components/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvqVwpL4bGKY%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<h2>Dash Bootstrap Card with Icons</h2>
<p>You can add Bootstrap and/or Font Awesome icons to your Dash Bootstrap components. In this example, we will add the bank icon as well as change the background color using the Bootstrap utility class <code>bg-primary</code>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="488" height="226" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-141.png" alt="" class="wp-image-799956" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-141.png 488w, https://blog.finxter.com/wp-content/uplo...00x139.png 300w" sizes="(max-width: 488px) 100vw, 488px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">card = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-bank me-2"), "Profit"]), html.H3("$8.3M"), html.H4(html.I("10.3% vs LY", className="bi bi-caret-up-fill text-success")), ], ), className="text-center m-4 bg-primary text-white",
)</pre>
<p>To learn more, see the <a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/icons/" target="_blank">Icons</a> section of the <code>dash-bootstrap-components</code> documentation. You can also find more information about adding icons to dash components in the buttons article.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/plotly-dash-button-component/" data-type="post" data-id="734958" target="_blank" rel="noreferrer noopener">Plotly Dash Button Component – A Simple Illustrated Guide</a></p>
<h2>Dash Bootstrap Cards Side-by-Side</h2>
<p>In business intelligence dashboards, it’s common to highlight KPIs or Key Performance Indicators in a group of cards. You can find many examples in the <a rel="noreferrer noopener" href="https://dash.gallery/Portal/" target="_blank">Plotly App Gallery</a>:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://dash.gallery/Portal/" target="_blank" rel="noreferrer noopener"><img loading="lazy" width="1024" height="729" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-154-1024x729.png" alt="" class="wp-image-800140" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-154-1024x729.png 1024w, https://blog.finxter.com/wp-content/uplo...00x213.png 300w, https://blog.finxter.com/wp-content/uplo...68x546.png 768w, https://blog.finxter.com/wp-content/uplo...6x1093.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-154.png 1560w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
</div>
<p>This app places three KPI cards side-by-side. We use the <code>dbc.Row</code> and <code>dbc.Col</code> components to create this responsive card layout. When you run this app, try changing the width of the browser window to see how the cards expand to fill the row based on the screen size.</p>
<p>This app also demonstrates the usage of Bootstrap <code>border</code> utility classes to add and style a border. Here we add a border on the left and change the color to highlight the results. Another trick is to use the “<code>text-nowrap</code>” class to keep the icon and the text together on the same line when the cards shrink to accommodate small screen sizes.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="784" height="208" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-144.png" alt="" class="wp-image-799971" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-144.png 784w, https://blog.finxter.com/wp-content/uplo...300x80.png 300w, https://blog.finxter.com/wp-content/uplo...68x204.png 768w" sizes="(max-width: 784px) 100vw, 784px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) card_sales = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-currency-dollar me-2"), "Sales"], className="text-nowrap"), html.H3("$106.7M"), html.Div( [html.I("5.8%", className="bi bi-caret-up-fill text-success"), " vs LY",] ), ], className="border-start border-success border-5" ), className="text-center m-4"
) card_profit = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-bank me-2"), "Profit"], className="text-nowrap"), html.H3("$8.3M",), html.Div( [ html.I("12.3%", className="bi bi-caret-down-fill text-danger"), " vs LY", ] ), ], className="border-start border-danger border-5" ), className="text-center m-4",
) card_orders = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-cart me-2"), "Orders"], className="text-nowrap"), html.H3("91.4K"), html.Div( [ html.I("10.3%", className="bi bi-caret-up-fill text-success"), " vs LY", ] ), ], className="border-start border-success border-5" ), className="text-center m-4",
) app.layout = dbc.Container( dbc.Row( [dbc.Col(card_sales), dbc.Col(card_profit), dbc.Col(card_orders)], ), fluid=True,
) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Creating Dash Bootstrap Cards in a Loop</h2>
<p>In the previous example, notice that a lot of the code for creating the card is the same. To reduce the amount of repetitive code, let’s create cards in a function.</p>
<p>In this app, we introduce the <code>dbc.CardHeader</code> component and the <code>"shadow"</code> class to style the card. We’ll show you how to add more style later in the app that displays crypto prices.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="1013" height="211" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-145.png" alt="" class="wp-image-799979" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-145.png 1013w, https://blog.finxter.com/wp-content/uplo...300x62.png 300w, https://blog.finxter.com/wp-content/uplo...68x160.png 768w" sizes="(max-width: 1013px) 100vw, 1013px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) summary = {"Sales": "$100K", "Profit": "$5K", "Orders": "6K", "Customers": "300"} def make_card(title, amount): return dbc.Card( [ dbc.CardHeader(html.H2(title)), dbc.CardBody(html.H3(amount, id=title)), ], className="text-center shadow", ) app.layout = dbc.Container( dbc.Row([dbc.Col(make_card(k, v)) for k, v in summary.items()], className="my-4"), fluid=True,
) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with an Image</h2>
<p>This card uses the <code>dbc.CardImage</code> component. This is a great format for the “who’s who” section of your app. It works well for displaying information about products too.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="463" height="387" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-146.png" alt="" class="wp-image-799982" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-146.png 463w, https://blog.finxter.com/wp-content/uplo...00x251.png 300w" sizes="(max-width: 463px) 100vw, 463px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) count = "https://user-images.githubusercontent.com/72614349/194616425-107a62f9-06b3-4b84-ac89-2c42e04c00ac.png" card = dbc.Card([ dbc.CardImg(src=count, top=True), dbc.CardBody( [ html.H3("Count von Count", className="text-primary"), html.Div("Chief Financial Officer"), html.Div("Sesame Street, Inc.", className="small"), ] )], className="shadow my-2", style={"maxWidth": 350},
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with an Image and a Link</h2>
<p>This app has a card with the <code>dbc.CardLink</code> component. </p>
<p>When you run this app, try clicking on either the logo or the title. You will see that both are links to the Plotly site displaying the current job openings. </p>
<p>We do this by including both the <code>html.Img</code> component with the Plotly logo and the <code>html.Span</code> with the title in the <code>dbc.CardLink</code> component.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="561" height="272" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-147.png" alt="" class="wp-image-799988" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-147.png 561w, https://blog.finxter.com/wp-content/uplo...00x145.png 300w" sizes="(max-width: 561px) 100vw, 561px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) plotly_logo_dark = "https://user-images.githubusercontent.com/72614349/182967824-c73218d8-acbf-4aab-b1ad-7eb35669b781.png" card = dbc.Card( dbc.CardBody( [ dbc.CardLink( [ html.Img(src=plotly_logo_dark, height=65), html.Span("Plotly Job Openings", className="ms-2") ], className="text-decoration-none h2", href="https://plotly.com/careers/" ), html.Hr(), html.Div("Engineering", className="h3"), html.Div("Intermediate Backend Engineer", className="text-danger"), html.Div("Remote, Canada", className="small"), ] ), className="shadow my-2", style={"maxWidth": 450},
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with a Background Image</h2>
<p>This app puts the image in the background and uses the <code>dbc.CardImgOverlay</code> component to place content on top of the image. </p>
<p>We also use <code>dbc.Button</code>s to link to other sites for more information. See the buttons article for more information. Be sure to run the app and check out the links. The <a href="https://blog.finxter.com/before-after-image-in-plotly-dash/" data-type="post" data-id="489491" target="_blank" rel="noreferrer noopener">Webb Telescope app</a> is pretty cool!</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="536" height="474" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-148.png" alt="" class="wp-image-800012" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-148.png 536w, https://blog.finxter.com/wp-content/uplo...00x265.png 300w" sizes="(max-width: 536px) 100vw, 536px" /></figure>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/before-after-image-in-plotly-dash/" data-type="post" data-id="489491" target="_blank" rel="noreferrer noopener">Before After Image in Plotly Dash</a></p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) webb_deep_field = "https://user-images.githubusercontent.com/72614349/192781103-2ca62422-2204-41ab-9480-a730fc4e28d7.png"
card = dbc.Card( [ dbc.CardImg(src=webb_deep_field), dbc.CardImgOverlay([ html.H2("James Webb Space Telescope"), html.H3("First Images"), html.P( "Learn how to make an app to compare before and after images of Hubble vs Webb with ~40 lines of Python", style={"marginTop":175}, className="small", ), dbc.Button("See the App", href="https://jwt.pythonanywhere.com/"), dbc.Button( [html.I(className="bi bi-github me-2"), "source code"], className="ms-2 text-white", href="https://github.com/AnnMarieW/webb-compare", ) ]) ], style={"maxWidth": 500}, className="my-4 text-center text-white"
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<p>See this Plotly Dash app live: <a href="https://jwt.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">https://jwt.pythonanywhere.com/</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="799" height="673" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-149.png" alt="" class="wp-image-800018" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-149.png 799w, https://blog.finxter.com/wp-content/uplo...00x253.png 300w, https://blog.finxter.com/wp-content/uplo...68x647.png 768w" sizes="(max-width: 799px) 100vw, 799px" /></figure>
</div>
<h2>Plotly Dash App with Live Updates</h2>
<p>This app shows live updates of crypto prices. We use a <code>dcc.Interval</code> component to fetch the data from CoinGecko every 6 seconds. </p>
<p>The CoinGecko API is easy to use because you don’t need an API key, and it’s free if you keep the number of updates within the free tier limits. We pull the current price, 24 hour price change, and the coin logo from the data feed and display the data in a nicely styled card.</p>
<p>In this app we introduce callbacks to update the data, and show how to get the data from CoinGecko. All the other styling has been covered in previous examples. </p>
<p>Note that in this app, the color of the text and the up and down arrows are updated dynamically based on the data in the <code>make_card</code> function.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="268" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-150-1024x268.png" alt="" class="wp-image-800023" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-150-1024x268.png 1024w, https://blog.finxter.com/wp-content/uplo...300x79.png 300w, https://blog.finxter.com/wp-content/uplo...68x201.png 768w, https://blog.finxter.com/wp-content/uplo...ge-150.png 1027w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import dash
from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import requests app = Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO, dbc.icons.BOOTSTRAP]) coins = ["bitcoin", "ethereum", "binancecoin", "ripple"]
interval = 6000 # update frequency - adjust to keep within free tier
api_url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd" def get_data(): try: response = requests.get(api_url, timeout=1) return response.json() except requests.exceptions.RequestException as e: print(e) def make_card(coin): change = coin["price_change_percentage_24h"] price = coin["current_price"] color = "danger" if change < 0 else "success" icon = "bi bi-arrow-down" if change < 0 else "bi bi-arrow-up" return dbc.Card( html.Div( [ html.H4( [ html.Img(src=coin["image"], height=35, className="me-1"), coin["name"], ] ), html.H4(f"${price:,}"), html.H5( [f"{round(change, 2)}%", html.I(className=icon), " 24hr"], className=f"text-{color}", ), ], className=f"border-{color} border-start border-5", ), className="text-center text-nowrap my-2 p-2", ) mention = html.A( "Data from CoinGecko", href="https://www.coingecko.com/en/api", className="small"
)
interval = dcc.Interval(interval=interval)
cards = html.Div()
app.layout = dbc.Container([interval, cards, mention], className="my-5") @app.callback(Output(cards, "children"), Input(interval, "n_intervals"))
def update_cards(_): coin_data = get_data() if coin_data is None or type(coin_data) is dict: return dash.no_update # make a list of cards with updated prices coin_cards = [] updated = None for coin in coin_data: if coin["id"] in coins: updated = coin.get("last_updated") coin_cards.append(make_card(coin)) # make the card layout card_layout = [ dbc.Row([dbc.Col(card, md=3) for card in coin_cards]), dbc.Row(dbc.Col(f"Last Updated {updated}")), ] return card_layout if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Plotly Dash App with a Sidebar</h2>
<p>A common layout for Dash apps is to put inputs in a sidebar, and the output in the main section of the page. We can place both the sidebar and the output in Dash Boostrap Card components.</p>
<p>See the app and the code live at the <a href="https://dash-example-index.herokuapp.com/histograms" target="_blank" rel="noreferrer noopener">Dash Example Index</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="442" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-151-1024x442.png" alt="" class="wp-image-800030" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-151-1024x442.png 1024w, https://blog.finxter.com/wp-content/uplo...00x129.png 300w, https://blog.finxter.com/wp-content/uplo...68x331.png 768w, https://blog.finxter.com/wp-content/uplo...ge-151.png 1219w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Plotly Dash Example Index</h2>
<p>See more examples of interactive apps in the <a href="https://dash-example-index.herokuapp.com" target="_blank" rel="noreferrer noopener">Dash Example Index</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="767" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-152-1024x767.png" alt="" class="wp-image-800033" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-152-1024x767.png 1024w, https://blog.finxter.com/wp-content/uplo...00x225.png 300w, https://blog.finxter.com/wp-content/uplo...68x575.png 768w, https://blog.finxter.com/wp-content/uplo...ge-152.png 1196w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Reference</h2>
<p><a rel="noreferrer noopener" href="https://nostarch.com/book-dash" target="_blank"><strong>Order Your Copy of “The Book of Dash” Today!</strong></a></p>
<div class="wp-block-image">
<figure class="aligncenter"><img src="https://user-images.githubusercontent.com/72614349/185497519-733bdfc3-5731-4419-9a68-44c1cad04a78.png" alt="The Book Of Dash"/></figure>
</div>
<h3><a href="https://github.com/DashBookProject/Plotly-Dash/blob/master/Bonus-Content/Components/sliders.md#dash-documentation---tutorial--getting-started-with-dash"></a></h3>
<ul>
<li><a rel="noreferrer noopener" href="https://dash.plotly.com/" target="_blank">Dash documentation – tutorial</a>. Getting Started with Dash</li>
<li><a rel="noreferrer noopener" href="https://dash-example-index.herokuapp.com/?code=slider" target="_blank">Dash Example Index</a>. Sample apps with sliders</li>
<li><a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/" target="_blank">Dash Bootstrap Components documentation – Themes</a></li>
<li><a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/" target="_blank">Dash Bootstrap Components documentation</a> – <code>dbc.Card</code></li>
<li><a rel="noreferrer noopener" href="https://hellodash.pythonanywhere.com/" target="_blank">Dash Bootstrap Theme Explorer</a>. A guide for styling Plotly Dash apps with a Bootstrap theme</li>
</ul>
<h2>The Book of Dash Authors</h2>
<p class="has-global-color-8-background-color has-background"><strong>Feel free to learn more about the book’s coauthors here:</strong></p>
<p><strong>Ann Marie Ward</strong>:</p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f469-200d-1f4bb.png" alt="??" class="wp-smiley" style="height: 1em; max-height: 1em;" /> GitHub: <a rel="noreferrer noopener" href="https://github.com/AnnMarieW" target="_blank">https://github.com/AnnMarieW</a></li>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4ac.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Dash Forum: <a rel="noreferrer noopener" href="https://community.plotly.com/u/annmariew/summary" target="_blank">https://community.plotly.com/u/annmariew/summary</a></li>
</ul>
<p><strong>Adam Schroeder</strong>:</p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/25b6.png" alt="▶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> YouTube CharmingData: <a rel="noreferrer noopener" href="https://www.youtube.com/c/CharmingData" target="_blank">https://www.youtube.com/c/CharmingData</a></li>
</ul>
<p><strong>Chris Mayer: </strong></p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f40d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Python + Crypto Email Academy: <a rel="noreferrer noopener" href="https://blog.finxter.com/subscribe/" target="_blank">https://blog.finxter.com/subscribe/</a></li>
</ul>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
</div>
https://www.sickgaming.net/blog/2022/10/...omponents/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload="{"align":"left","id":"799875","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"0","readonly":"","score":"0","best":"5","gap":"5","greet":"Rate this post","legend":"0\/5 - (0 votes)","size":"24","width":"0","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}">
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 0px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> <span class="kksr-muted">Rate this post</span> </div>
</div>
<p>Welcome to the bonus content of <a href="https://nostarch.com/book-dash" data-type="URL" data-id="https://nostarch.com/book-dash" target="_blank" rel="noreferrer noopener">“The Book of Dash”</a>. <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f917.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p class="has-global-color-8-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Here you will find additional examples of Plotly Dash components, layouts and style. To learn more about making dashboards with Plotly Dash, and how to buy your copy of <a rel="noreferrer noopener" href="https://nostarch.com/book-dash" target="_blank">“The Book of Dash”</a>, please see the reference section at the bottom of this article.</p>
<p>As you read the article, feel free to run the explainer video on the Card components from one of our coauthors’ <a href="https://www.youtube.com/c/CharmingData/" data-type="URL" data-id="https://www.youtube.com/c/CharmingData/" target="_blank" rel="noreferrer noopener">“Charming Data”</a> YT channel:</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/plotly-dash-bootstrap-card-components/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FaEz1-72PKwc%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<p>This article will focus on the <code>Card</code> components from the Dash Boostrap Component library. Using cards is a great way to create eye-catching content. We’ll show you how to make the card content interactive with callbacks, but first we’ll focus on the style and layout.</p>
<h2>Plotly Dash App with a Bootstrap Card</h2>
<p>We’ll start with the basics – a minimal Dash app to display a single card without any additional styling. Be sure to check out the complete reference for <a href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/" target="_blank" rel="noreferrer noopener">using Dash Bootstrap cards.</a></p>
<p>Next, we’ll show how to jazz it up to make it look better — and more importantly — so it conveys key information at a glance.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="476" height="180" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-143.png" alt="" class="wp-image-799965" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-143.png 476w, https://blog.finxter.com/wp-content/uplo...00x113.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) card = dbc.Card( dbc.CardBody( [ html.H1("Sales"), html.H3("$104.2M") ], ),
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Styling a Dash Bootstrap Card</h2>
<p>An easy way to style content is by using Boostrap utility classes. See all the utility classes at the <a href="https://dashcheatsheet.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">Dash Bootstrap Cheatsheet</a> app. This handy cheatsheet is made by a co-author of “The Book of Dash”.</p>
<p>In this card, we center the text and change the color with “<code>text-center</code>” and “<code>text-success</code>“. The Bootstrap themes have named colors and “success” is a shade of green. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Resource</strong>: For more information about styling your app with a Boostrap theme, see <a href="https://hellodash.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">Dash Bootstrap Theme Explorer</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="465" height="166" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-142.png" alt="" class="wp-image-799960" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-142.png 465w, https://blog.finxter.com/wp-content/uplo...00x107.png 300w" sizes="(max-width: 465px) 100vw, 465px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">card = dbc.Card( dbc.CardBody( [ html.H1("Sales"), html.H3("$104.2M", className="text-success") ], ), className="text-center"
)</pre>
<p>Feel free to watch Adam’s explainer video on Bootstrap and styling your app if you need to get up to speed! <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f447.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/plotly-dash-bootstrap-card-components/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvqVwpL4bGKY%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<h2>Dash Bootstrap Card with Icons</h2>
<p>You can add Bootstrap and/or Font Awesome icons to your Dash Bootstrap components. In this example, we will add the bank icon as well as change the background color using the Bootstrap utility class <code>bg-primary</code>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="488" height="226" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-141.png" alt="" class="wp-image-799956" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-141.png 488w, https://blog.finxter.com/wp-content/uplo...00x139.png 300w" sizes="(max-width: 488px) 100vw, 488px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">card = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-bank me-2"), "Profit"]), html.H3("$8.3M"), html.H4(html.I("10.3% vs LY", className="bi bi-caret-up-fill text-success")), ], ), className="text-center m-4 bg-primary text-white",
)</pre>
<p>To learn more, see the <a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/icons/" target="_blank">Icons</a> section of the <code>dash-bootstrap-components</code> documentation. You can also find more information about adding icons to dash components in the buttons article.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/plotly-dash-button-component/" data-type="post" data-id="734958" target="_blank" rel="noreferrer noopener">Plotly Dash Button Component – A Simple Illustrated Guide</a></p>
<h2>Dash Bootstrap Cards Side-by-Side</h2>
<p>In business intelligence dashboards, it’s common to highlight KPIs or Key Performance Indicators in a group of cards. You can find many examples in the <a rel="noreferrer noopener" href="https://dash.gallery/Portal/" target="_blank">Plotly App Gallery</a>:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://dash.gallery/Portal/" target="_blank" rel="noreferrer noopener"><img loading="lazy" width="1024" height="729" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-154-1024x729.png" alt="" class="wp-image-800140" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-154-1024x729.png 1024w, https://blog.finxter.com/wp-content/uplo...00x213.png 300w, https://blog.finxter.com/wp-content/uplo...68x546.png 768w, https://blog.finxter.com/wp-content/uplo...6x1093.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-154.png 1560w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
</div>
<p>This app places three KPI cards side-by-side. We use the <code>dbc.Row</code> and <code>dbc.Col</code> components to create this responsive card layout. When you run this app, try changing the width of the browser window to see how the cards expand to fill the row based on the screen size.</p>
<p>This app also demonstrates the usage of Bootstrap <code>border</code> utility classes to add and style a border. Here we add a border on the left and change the color to highlight the results. Another trick is to use the “<code>text-nowrap</code>” class to keep the icon and the text together on the same line when the cards shrink to accommodate small screen sizes.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="784" height="208" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-144.png" alt="" class="wp-image-799971" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-144.png 784w, https://blog.finxter.com/wp-content/uplo...300x80.png 300w, https://blog.finxter.com/wp-content/uplo...68x204.png 768w" sizes="(max-width: 784px) 100vw, 784px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) card_sales = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-currency-dollar me-2"), "Sales"], className="text-nowrap"), html.H3("$106.7M"), html.Div( [html.I("5.8%", className="bi bi-caret-up-fill text-success"), " vs LY",] ), ], className="border-start border-success border-5" ), className="text-center m-4"
) card_profit = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-bank me-2"), "Profit"], className="text-nowrap"), html.H3("$8.3M",), html.Div( [ html.I("12.3%", className="bi bi-caret-down-fill text-danger"), " vs LY", ] ), ], className="border-start border-danger border-5" ), className="text-center m-4",
) card_orders = dbc.Card( dbc.CardBody( [ html.H1([html.I(className="bi bi-cart me-2"), "Orders"], className="text-nowrap"), html.H3("91.4K"), html.Div( [ html.I("10.3%", className="bi bi-caret-up-fill text-success"), " vs LY", ] ), ], className="border-start border-success border-5" ), className="text-center m-4",
) app.layout = dbc.Container( dbc.Row( [dbc.Col(card_sales), dbc.Col(card_profit), dbc.Col(card_orders)], ), fluid=True,
) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Creating Dash Bootstrap Cards in a Loop</h2>
<p>In the previous example, notice that a lot of the code for creating the card is the same. To reduce the amount of repetitive code, let’s create cards in a function.</p>
<p>In this app, we introduce the <code>dbc.CardHeader</code> component and the <code>"shadow"</code> class to style the card. We’ll show you how to add more style later in the app that displays crypto prices.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="1013" height="211" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-145.png" alt="" class="wp-image-799979" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-145.png 1013w, https://blog.finxter.com/wp-content/uplo...300x62.png 300w, https://blog.finxter.com/wp-content/uplo...68x160.png 768w" sizes="(max-width: 1013px) 100vw, 1013px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) summary = {"Sales": "$100K", "Profit": "$5K", "Orders": "6K", "Customers": "300"} def make_card(title, amount): return dbc.Card( [ dbc.CardHeader(html.H2(title)), dbc.CardBody(html.H3(amount, id=title)), ], className="text-center shadow", ) app.layout = dbc.Container( dbc.Row([dbc.Col(make_card(k, v)) for k, v in summary.items()], className="my-4"), fluid=True,
) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with an Image</h2>
<p>This card uses the <code>dbc.CardImage</code> component. This is a great format for the “who’s who” section of your app. It works well for displaying information about products too.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="463" height="387" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-146.png" alt="" class="wp-image-799982" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-146.png 463w, https://blog.finxter.com/wp-content/uplo...00x251.png 300w" sizes="(max-width: 463px) 100vw, 463px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) count = "https://user-images.githubusercontent.com/72614349/194616425-107a62f9-06b3-4b84-ac89-2c42e04c00ac.png" card = dbc.Card([ dbc.CardImg(src=count, top=True), dbc.CardBody( [ html.H3("Count von Count", className="text-primary"), html.Div("Chief Financial Officer"), html.Div("Sesame Street, Inc.", className="small"), ] )], className="shadow my-2", style={"maxWidth": 350},
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with an Image and a Link</h2>
<p>This app has a card with the <code>dbc.CardLink</code> component. </p>
<p>When you run this app, try clicking on either the logo or the title. You will see that both are links to the Plotly site displaying the current job openings. </p>
<p>We do this by including both the <code>html.Img</code> component with the Plotly logo and the <code>html.Span</code> with the title in the <code>dbc.CardLink</code> component.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="561" height="272" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-147.png" alt="" class="wp-image-799988" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-147.png 561w, https://blog.finxter.com/wp-content/uplo...00x145.png 300w" sizes="(max-width: 561px) 100vw, 561px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB]) plotly_logo_dark = "https://user-images.githubusercontent.com/72614349/182967824-c73218d8-acbf-4aab-b1ad-7eb35669b781.png" card = dbc.Card( dbc.CardBody( [ dbc.CardLink( [ html.Img(src=plotly_logo_dark, height=65), html.Span("Plotly Job Openings", className="ms-2") ], className="text-decoration-none h2", href="https://plotly.com/careers/" ), html.Hr(), html.Div("Engineering", className="h3"), html.Div("Intermediate Backend Engineer", className="text-danger"), html.Div("Remote, Canada", className="small"), ] ), className="shadow my-2", style={"maxWidth": 450},
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Dash Bootstrap Card with a Background Image</h2>
<p>This app puts the image in the background and uses the <code>dbc.CardImgOverlay</code> component to place content on top of the image. </p>
<p>We also use <code>dbc.Button</code>s to link to other sites for more information. See the buttons article for more information. Be sure to run the app and check out the links. The <a href="https://blog.finxter.com/before-after-image-in-plotly-dash/" data-type="post" data-id="489491" target="_blank" rel="noreferrer noopener">Webb Telescope app</a> is pretty cool!</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="536" height="474" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-148.png" alt="" class="wp-image-800012" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-148.png 536w, https://blog.finxter.com/wp-content/uplo...00x265.png 300w" sizes="(max-width: 536px) 100vw, 536px" /></figure>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/before-after-image-in-plotly-dash/" data-type="post" data-id="489491" target="_blank" rel="noreferrer noopener">Before After Image in Plotly Dash</a></p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from dash import Dash, html
import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) webb_deep_field = "https://user-images.githubusercontent.com/72614349/192781103-2ca62422-2204-41ab-9480-a730fc4e28d7.png"
card = dbc.Card( [ dbc.CardImg(src=webb_deep_field), dbc.CardImgOverlay([ html.H2("James Webb Space Telescope"), html.H3("First Images"), html.P( "Learn how to make an app to compare before and after images of Hubble vs Webb with ~40 lines of Python", style={"marginTop":175}, className="small", ), dbc.Button("See the App", href="https://jwt.pythonanywhere.com/"), dbc.Button( [html.I(className="bi bi-github me-2"), "source code"], className="ms-2 text-white", href="https://github.com/AnnMarieW/webb-compare", ) ]) ], style={"maxWidth": 500}, className="my-4 text-center text-white"
) app.layout=dbc.Container(card) if __name__ == "__main__": app.run_server(debug=True)</pre>
<p>See this Plotly Dash app live: <a href="https://jwt.pythonanywhere.com/" target="_blank" rel="noreferrer noopener">https://jwt.pythonanywhere.com/</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" width="799" height="673" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-149.png" alt="" class="wp-image-800018" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-149.png 799w, https://blog.finxter.com/wp-content/uplo...00x253.png 300w, https://blog.finxter.com/wp-content/uplo...68x647.png 768w" sizes="(max-width: 799px) 100vw, 799px" /></figure>
</div>
<h2>Plotly Dash App with Live Updates</h2>
<p>This app shows live updates of crypto prices. We use a <code>dcc.Interval</code> component to fetch the data from CoinGecko every 6 seconds. </p>
<p>The CoinGecko API is easy to use because you don’t need an API key, and it’s free if you keep the number of updates within the free tier limits. We pull the current price, 24 hour price change, and the coin logo from the data feed and display the data in a nicely styled card.</p>
<p>In this app we introduce callbacks to update the data, and show how to get the data from CoinGecko. All the other styling has been covered in previous examples. </p>
<p>Note that in this app, the color of the text and the up and down arrows are updated dynamically based on the data in the <code>make_card</code> function.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="268" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-150-1024x268.png" alt="" class="wp-image-800023" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-150-1024x268.png 1024w, https://blog.finxter.com/wp-content/uplo...300x79.png 300w, https://blog.finxter.com/wp-content/uplo...68x201.png 768w, https://blog.finxter.com/wp-content/uplo...ge-150.png 1027w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import dash
from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import requests app = Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO, dbc.icons.BOOTSTRAP]) coins = ["bitcoin", "ethereum", "binancecoin", "ripple"]
interval = 6000 # update frequency - adjust to keep within free tier
api_url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd" def get_data(): try: response = requests.get(api_url, timeout=1) return response.json() except requests.exceptions.RequestException as e: print(e) def make_card(coin): change = coin["price_change_percentage_24h"] price = coin["current_price"] color = "danger" if change < 0 else "success" icon = "bi bi-arrow-down" if change < 0 else "bi bi-arrow-up" return dbc.Card( html.Div( [ html.H4( [ html.Img(src=coin["image"], height=35, className="me-1"), coin["name"], ] ), html.H4(f"${price:,}"), html.H5( [f"{round(change, 2)}%", html.I(className=icon), " 24hr"], className=f"text-{color}", ), ], className=f"border-{color} border-start border-5", ), className="text-center text-nowrap my-2 p-2", ) mention = html.A( "Data from CoinGecko", href="https://www.coingecko.com/en/api", className="small"
)
interval = dcc.Interval(interval=interval)
cards = html.Div()
app.layout = dbc.Container([interval, cards, mention], className="my-5") @app.callback(Output(cards, "children"), Input(interval, "n_intervals"))
def update_cards(_): coin_data = get_data() if coin_data is None or type(coin_data) is dict: return dash.no_update # make a list of cards with updated prices coin_cards = [] updated = None for coin in coin_data: if coin["id"] in coins: updated = coin.get("last_updated") coin_cards.append(make_card(coin)) # make the card layout card_layout = [ dbc.Row([dbc.Col(card, md=3) for card in coin_cards]), dbc.Row(dbc.Col(f"Last Updated {updated}")), ] return card_layout if __name__ == "__main__": app.run_server(debug=True)</pre>
<h2>Plotly Dash App with a Sidebar</h2>
<p>A common layout for Dash apps is to put inputs in a sidebar, and the output in the main section of the page. We can place both the sidebar and the output in Dash Boostrap Card components.</p>
<p>See the app and the code live at the <a href="https://dash-example-index.herokuapp.com/histograms" target="_blank" rel="noreferrer noopener">Dash Example Index</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="442" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-151-1024x442.png" alt="" class="wp-image-800030" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-151-1024x442.png 1024w, https://blog.finxter.com/wp-content/uplo...00x129.png 300w, https://blog.finxter.com/wp-content/uplo...68x331.png 768w, https://blog.finxter.com/wp-content/uplo...ge-151.png 1219w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Plotly Dash Example Index</h2>
<p>See more examples of interactive apps in the <a href="https://dash-example-index.herokuapp.com" target="_blank" rel="noreferrer noopener">Dash Example Index</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="767" src="https://blog.finxter.com/wp-content/uploads/2022/10/image-152-1024x767.png" alt="" class="wp-image-800033" srcset="https://blog.finxter.com/wp-content/uploads/2022/10/image-152-1024x767.png 1024w, https://blog.finxter.com/wp-content/uplo...00x225.png 300w, https://blog.finxter.com/wp-content/uplo...68x575.png 768w, https://blog.finxter.com/wp-content/uplo...ge-152.png 1196w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Reference</h2>
<p><a rel="noreferrer noopener" href="https://nostarch.com/book-dash" target="_blank"><strong>Order Your Copy of “The Book of Dash” Today!</strong></a></p>
<div class="wp-block-image">
<figure class="aligncenter"><img src="https://user-images.githubusercontent.com/72614349/185497519-733bdfc3-5731-4419-9a68-44c1cad04a78.png" alt="The Book Of Dash"/></figure>
</div>
<h3><a href="https://github.com/DashBookProject/Plotly-Dash/blob/master/Bonus-Content/Components/sliders.md#dash-documentation---tutorial--getting-started-with-dash"></a></h3>
<ul>
<li><a rel="noreferrer noopener" href="https://dash.plotly.com/" target="_blank">Dash documentation – tutorial</a>. Getting Started with Dash</li>
<li><a rel="noreferrer noopener" href="https://dash-example-index.herokuapp.com/?code=slider" target="_blank">Dash Example Index</a>. Sample apps with sliders</li>
<li><a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/" target="_blank">Dash Bootstrap Components documentation – Themes</a></li>
<li><a rel="noreferrer noopener" href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/" target="_blank">Dash Bootstrap Components documentation</a> – <code>dbc.Card</code></li>
<li><a rel="noreferrer noopener" href="https://hellodash.pythonanywhere.com/" target="_blank">Dash Bootstrap Theme Explorer</a>. A guide for styling Plotly Dash apps with a Bootstrap theme</li>
</ul>
<h2>The Book of Dash Authors</h2>
<p class="has-global-color-8-background-color has-background"><strong>Feel free to learn more about the book’s coauthors here:</strong></p>
<p><strong>Ann Marie Ward</strong>:</p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f469-200d-1f4bb.png" alt="??" class="wp-smiley" style="height: 1em; max-height: 1em;" /> GitHub: <a rel="noreferrer noopener" href="https://github.com/AnnMarieW" target="_blank">https://github.com/AnnMarieW</a></li>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4ac.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Dash Forum: <a rel="noreferrer noopener" href="https://community.plotly.com/u/annmariew/summary" target="_blank">https://community.plotly.com/u/annmariew/summary</a></li>
</ul>
<p><strong>Adam Schroeder</strong>:</p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/25b6.png" alt="▶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> YouTube CharmingData: <a rel="noreferrer noopener" href="https://www.youtube.com/c/CharmingData" target="_blank">https://www.youtube.com/c/CharmingData</a></li>
</ul>
<p><strong>Chris Mayer: </strong></p>
<ul>
<li><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f40d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Python + Crypto Email Academy: <a rel="noreferrer noopener" href="https://blog.finxter.com/subscribe/" target="_blank">https://blog.finxter.com/subscribe/</a></li>
</ul>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
</div>
https://www.sickgaming.net/blog/2022/10/...omponents/