Charts & Data Visualization18Brandbook

Charts & Data Visualization

Chart, KPI and data visualization patterns used in the dashboard and analytics pages.

Chart Types

Bar Chart

Comparison between categories. Used in analytics and reports.

Donut Chart

Percentage distribution. Used in overview and KPIs.

Line Chart

Trends over time. Used in analytics.

--chart-1

var(--brand-primary)

--chart-2

#334155

--chart-3

#22c55e

--chart-4

#f59e0b

--chart-5

#ef4444

--chart-bg

#334155

--chart-1Primary series

--chart-2Secondary / inactive series

--chart-3Success / positive

--chart-4Warning / attention

--chart-5Error / negative

--chart-bgInactive / remaining

Revenue

$48.2K

+12.5%

Active Users

2,847

+8.2%

Churn Rate

2.1%

-0.4%

Avg. Response

1.8s

+0.3s