Get startedGet started for free

Styling a Dash app with CSS

It's time to unleash the power of CSS and take your dashboards to the next level. You have been thinking about ways to spruce up the marketing dashboard you created and have a few ideas to demonstrate to the business stakeholders.

Adjusting the size of the graph and logo and adding some nice background colors to various elements would jazz it up!

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Set the logo size to 215px wide and 240px high below line 16.
  • Set the bar graph size to 500px wide and 350px high below line 21.
  • Add a background color of lightgrey to the copyright notice below line 30.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Edit and Run Code