3 easy ways to make your Dash application look better

Published in

Towards Data Science

5 min readMay 31, 2022

Dash is a low-code framework that allows you to build data visualisations rendered through a web browser. With no license costs, and it offers a flexible and free way to build applications. If you want to learn more about how to build a dash application, I’d recommend starting with the tutorial in the documentation and the Youtube videos by Charming Data.

The default settings in Dash can result in something ‘functional’ — it does the job — but doesn’t always look great. In this article, I’ll cover three simple ways to improve the look and feel of your visualisation.

To see how they work in practice, I built a very quick dummy app using no styling — it’s not great.

1. Use a theme

The quickest way to improve the overall look and feel is to use a theme. Dash bootstrap themes provide a very quick way to improve the format by standardising the format of headers, buttons, tabs, tables, alerts amongst other things. There are a range of styles and Dash provides a ‘theme explorer’.

The list of themes is CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, MORPH, PULSE, QUARTZ, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, VAPOR, YETI, ZEPHYR.

To use a theme you need to import dash bootstrap components:

import dash_bootstrap_components as dbc

Then to specify the theme you add an argument to ‘external_stylesheets’ when initiating the app.

app = dash.Dash(external_stylesheets=[dbc.themes.LUX])

The image below is CYBORG — it makes the font more modern.

However when you use a theme with a dark background an issue becomes apparent. The styling doesn’t do anything to the plots — and a strange white box appears against the dark background. We can fix this with a figure template.

2. Use a figure template

A figure template styles figures. It matches the styling of the plot to the styling of the theme by changing the colours, and fonts.

To use a figure template you need to import it from dash bootstrap templates:

from dash_bootstrap_templates import load_figure_template

Once you’ve loaded the figure template, you then use it in the following way:

load_figure_template(‘LUX’)

You can immediately see that the background plot from the original figure has gone, the colours are updated to the theme.

3. Use a layout and add padding

But there is still more we can do as the text and legend is going right to the edge of the page. To fix this, we can use bootstrap layout to tell the application where to place items and then add some margin to each element.

Layout is controlled with a grid system. There are 12 columns, and the width of the columns is controlled by how many of the 12 columns that the column should span.

Columns are contained within rows, i.e. the application should be built up of a series of rows, which can have different numbers (and widths) of columns. If you don’t specify the width of columns within rows, they by default will be equally split. The outline of the code is as follows:

In our application, we should have 2 rows — one for the header and one for the graph.

Because we only have one column within each row, it’s not strictly necessary to place the dbc.Col() into [] but if you have more than one column you must do this.

Now we have each element within the layout, we can add the styling. Style calls take a dictionary where you can specify the margins for top, bottom, left and right e.g.

style = {‘margin-left’:’7px’, ‘margin-top’:’7px’}

In our application, we’ve done this for the header, and increased the margins on the figure to ‘15px’ so that it is indented further than the header.

The real benefit of using the layout structure is that you can add other elements and change the layout quickly, easily (and importantly in alignment). For example, many dashboard use a sidebar where you can select different filters. To create a sidebar, you create columns within your rows. The content of what you want to be in your sidebar is contained within ‘sidebar’.

Here I’ve set the width of the column containing the graph to be 9, which means the sidebar takes up 3/12. You can change this very quickly to see what it looks like if the sidebar is wider.

Not as good, I’ll change it back to 3/12.

Conclusion

By looking at the before and after images — we can see that with 15 minutes work — we can very quickly improve the look of Dash applications. You can find the code to generate this app on my github.