KPI Cards with Sparklines in HTML, CSS and JavaScript

const days = [8620, 9140, 8890, 9760, 10210, 9980, 10640];
const total = days.reduce((a, b) => a + b, 0), before = 61200;
const change = (total - before) / before * 100;
const x = i => 20 + i * 36, lo = Math.min(...days), hi = Math.max(...days), y = v => 150 - (v - lo) / (hi - lo) * 40;

drawRect(10, 10, 240, 160, '#ffffff');
drawText(24, 40, 'Revenue');
drawText(24, 80, '$' + total.toLocaleString('en-US'));
drawText(24, 105, (change >= 0 ? '+' : '') + change.toFixed(1) + '% vs last week');
make('path', { d: 'M' + days.map((v, i) => x(i) + ',' + y(v)).join('L'), fill: 'none', stroke: '#3f7d4e', 'stroke-width': 2 });

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}