Dark Charts

Line, area, bars, donut, sparkline, heatmap, ranked bars and stat tiles — as CSS and inline SVG. About 6 KB of JavaScript, no charting library, no build step. Every chart reads the same six colour tokens, so one palette swap recolours all of them.

Stat tiles

Line and area

Bars and donuts

Ranked bars

Sparklines in a table

Heatmap calendar

How you use it

<link rel="stylesheet" href="charts.css">
<script src="charts.js" defer></script>

<div class="chart">
  <div class="chart-title">Revenue</div>
  <div data-chart="line" data-values="12,19,17,26,24,35,33,46"></div>
</div>

Or call it directly: el.innerHTML = DarkCharts.line([12,19,17,26])