Simple sparklines with HTML5 canvas

createSparkline.js

function createSparkline(values, width=200, height=80, color='rgb(120,120,120)', maxValue) {
  maxValue = maxValue || Math.max(...values);
  values = values.map(v => (v/maxValue)); //normalise
  let canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.moveTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  for(let i = 0; i < values.length; i++) {
    ctx.lineTo(canvas.width*i/(values.length-1), (1-values[i])*canvas.height); // 1-values because y axis is flipped
  }
  
  // `+1`s here are needed to prevent intersection with existing path which messes with filling:
  ctx.lineTo(canvas.width, canvas.height+1);
  ctx.lineTo(0, canvas.height+1);

  ctx.closePath();
  ctx.fill();
  return canvas;
}

// usage:
// let spark = createSparkline([1,2,3,5,4,5,6,4,5,7,4,3,3])
// document.body.appendChild(spark);