Dashboard Creator

Create interactive HTML dashboards with KPI cards and charts.

When to Use

"Create dashboard for [metrics]"

"Show KPI visualization"

"Generate performance dashboard"

"Make analytics dashboard with charts"

Components

KPI Cards

metric name, value, change %, trend icon

Charts

bar/pie/line using SVG or CSS

Progress Bars

completion indicators

Data Tables

tabular data display HTML Structure <! DOCTYPE html

< html

< head

< title

[Project] Dashboard </ title

< style

body { font-family : system-ui ; background :

f7fafc

; } .kpi-card { background : white ; padding : 20 px ; border-radius : 8 px ; box-shadow : 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.1 ) ; } .kpi-value { font-size : 36 px ; font-weight : bold ; } .trend-up { color :

48bb78

; } .trend-down { color :

e53e3e

; } </ style

</ head

< body

< h1

[Dashboard Name] </ h1

< div class = " grid "

</ div

</ body

</ html

KPI Card Pattern < div class = " kpi-card "

< div class = " kpi-label "

Revenue </ div

< div class = " kpi-value "

$124K </ div

< div class = " trend-up "

↑ 12.5% </ div

</ div

Chart Pattern (SVG Bar Chart) < svg viewBox = " 0 0 400 300 "

< rect x = " 50 " y = " 100 " width = " 40 " height = " 150 " fill = "

4299e1

" /> < rect x = " 120 " y = " 80 " width = " 40 " height = " 170 " fill = "

48bb78

" />

</ svg

Workflow Extract metrics and data Create KPI cards grid Generate charts (bar/pie/line) as SVG Add progress indicators Write to [name]-dashboard.html Use semantic colors: green (positive), red (negative), blue (neutral).