README.md

---
title: KPI Dashboard
emoji: 📊
colorFrom: blue
colorTo: blue
sdk: docker
pinned: false
license: apache-2.0
short_description: Example of a Key Performance Indicator (KPI) dashboard
---

# KPI Dashboard

This dashboard provides an example of a Key Performance Indicator (KPI) dashboard, designed to help users get started
and extend further. It uses fictional budget data to demonstrate the capabilities of Vizro using real world applications.

**Created by:** [Huong Li Nguyen](https://github.com/huong-li-nguyen)

---

### 🗓️ Data

Special thanks to the [#RWFD Real World Fake Data initiative](https://data.world/markbradbourne/rwfd-real-world-fake-data), a community project that
provides high-quality fake data for creating realistic dashboard examples for real-world applications.

**Note:** The data has been additionally edited for the purpose of this example.

### 📊 Plotly resources

- [Bar charts](https://plotly.com/python/bar-charts/)
- [Pie charts](https://plotly.com/python/pie-charts/)
- [Choropleth maps](https://plotly.com/python/choropleth-maps/)
- [Unstacked area charts](https://plotly.com/python/filled-area-plots/)

### 🚀 Vizro features applied

- [Vizro tutorial on pages, layouts and dashboards](https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components/)
- [Custom components](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-components/)
- [Custom charts](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-charts/)
- [Custom CSS](https://vizro.readthedocs.io/en/stable/pages/user-guides/assets/)

### 🖥️ App demo

<img src="./images/kpi-dashboard.gif" alt="Gif to KPI dashboard" width="600">

---

## How to run the example locally

1. Run the `app.py` file with your environment activated where `vizro` is installed.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.