Charts

Pure CSS and inline SVG chart components — no external libraries.

Bar Chart

Vertical bar chart with hover effect. Pure CSS divs.

1007550250
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Horizontal Bar Chart

Browser market share with horizontal percentage bars.

Chrome
65%
Firefox
18%
Safari
10%
Edge
5%
Other
2%

Line Chart (SVG)

Dual-dataset line chart with grid lines and legend.

Revenue
Expenses
0255075100JanFebMarAprMayJun

Pie Chart (SVG)

Circle-based pie chart using stroke-dasharray and stroke-dashoffset.

Desktop45%
Mobile30%
Tablet15%
Other10%

Donut Chart (SVG)

Ring chart with center total value.

2,847Total
Active60%
Inactive25%
New15%

Area Chart (SVG)

Gradient-filled area chart showing 12-month growth.

JanFebMarAprMayJunJulAugSepOctNovDec

Sparkline Charts

Compact inline mini-charts for KPI cards.

Sales
$8.4k+12.5%
Revenue
$24.3k+8.2%
Visitors
1.2k-6.1%
Bounce Rate
42%+0.3%

Stacked Bar Chart

Grouped bars with 3 segments per month.

Product A
Product B
Product C
Jan
Feb
Mar
Apr
May

Gauge Chart (SVG)

Semi-circle gauge showing performance score.

0%50%100%72%Performance Score

Mixed Stats

KPI cards combining a stat number with a mini bar chart.

Revenue
$12.5k+14%
Users
847+7.2%
Sessions
3.2k-3.1%
Conversion
4.2%+0.1%