Hey everyone,
As highlighted in our latest Vizro update, we’re thrilled to introduce the new KPI (Key Performance Indicator) cards in Vizro based on Dash Bootstrap Components! 
To start using them, just pip install vizro>=0.1.20 and import the KPI cards as from vizro.figures.library import kpi_card, kpi_card_reference
Here is a simplified example:
import dash_bootstrap_components as dbc
import pandas as pd
from dash import Dash
from vizro.figures.library import kpi_card_reference
df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500]})
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Col(
kpi_card_reference(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
icon="payment",
title="Sales",
value_format="{value}€",
reference_format="{delta_relative:+.1%} vs. last year ({reference}€)",
),
width=3,
style={"padding": "12px"},
)
app.run(debug=True)
Result:
These KPI cards come with a range of user-friendly features:
- Read values directly from a data frame and select your preferred data aggregation method.
- Insert any Google Material icon by simply providing a string.
- Compare your KPI value against a reference value and format them to your liking.
- Colour code the KPI card automatically based on a positive/negative delta.
- Apply any Dash Bootstrap theme.
Take a look at the API reference for the KPI card functions for more details.
How to use the KPI cards in Dash:
Here is a more sophisticated example with different configurations of the KPI card using dbc.themes.BOOTSTRAP.
How to use the KPI cards in Vizro:
If you already use Vizro, you can easily integrate the KPI cards into your Vizro app. They come with additional styling and are available in both dark and light modes. For more details, see our user guide on KPI cards.
Example with vizro_dark
Example with vizro_light
Enjoy the KPI cards and happy coding!
If you have any questions or feedback, just reach out to me or @antony.milne 