KPI Card with Dash Bootstrap Components

1 minute read

Dash Bootstrap Components has a fantastic library of plug and play components that make it easy to get started.

Plotly’s documentation is focused on making tables, charts, and graphs, but for executives I find myself relying on KPI cards like this:

You can find better styled examples of these all over the place if you google ‘HTML/CSS dashboard examples.’

The magic of using Dash is that you can style these to your heart’s content with CSS and all of the values can be generated with Python, and the whole thing can be reproducible and components can be shared across projects. And the flexbox system is just fine rather than fiddling with positioning in PowerBI.

Here’s the sketch of the starter KPI dashboard:

Python Code for your app.py file:

import dash  # (version 1.12.0) pip install dash

import dash_bootstrap_components as dbc
import dash_html_components as html

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

header = html.Div([
    dbc.Row(dbc.Col(html.H1("H1 Text"))),
])

card = dbc.Card(
    [
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P(
                    "$10.5 M",
                    className="card-value",
                ),
                html.P(
                    "Target: $10.0 M",
                    className="card-target",
                ),
                html.Span(
                    "Up ",
                    className="card-diff-up",
                ),
                html.Span(
                    "5.5% vs Last Year",
                    className="card-diff-up",
                ),

            ]
        ),
    ],
)

row = html.Div(
    [
        dbc.CardDeck(
            [
                card,
                card,
                card,
            ]
        ),
    ], style={'padding': '25px'}
)

app.layout = html.Div([
    header,
    row,
    row
])

if __name__ == "__main__":
    app.run_server(port=8888, debug=True)

Instead of dbc.CardDeck you can also make a dbc.Row() and each card would be a dbc.Col() within that row.

And some basic CSS styling:

.card {
    text-align: center;
}
.card .card-title {
    text-align: left;
    font-weight: lighter;
}

.card .card-value {
    font-size: 2rem;
}

.card .card-target {
    font-size: 1rem;
    font-weight: lighter;
}

.card .card-diff-down {
    color: red
}

.card .card-diff-up {
    color: green
}