<div class="canvas-container">
  <canvas></canvas>
</div>

html, body {
  margin: 0;
}

html {
  padding: 0;
}

body {
  padding: 50px;
}

.canvas-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}

canvas {
  width: 100%;
  height: 100%;
}

const dataSets = [
  {
    color: "#00f",
    data: [25,100,150,50,75]
  },
  {
    color: "#f00",
    data: [50,125,25,0,150]
  }
];

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const drawData = dataSets => {
  let yLow = Number.MAX_VALUE;
  let yHigh = Number.MIN_VALUE;
  for (const dataSet of dataSets) {
    for (const datum of dataSet.data) {
      if (datum < yLow) yLow = datum;
      if (datum > yHigh) yHigh = datum;
    }
  }
  
  for (const dataSet of dataSets) {
    let x = 0;
    const xStep = canvas.width / (dataSet.data.length - 1);
    
    let yPercentage = (dataSet.data[0] - yLow) / (yHigh - yLow) * 100;
    let y = canvas.height - canvas.height / 100 * yPercentage;
    
    context.strokeStyle = dataSet.color;
    context.beginPath();
    
    for (let i = 1; i < dataSet.data.length; i++) {
      context.moveTo(x, y);
      x += xStep;
      
      yPercentage = (dataSet.data[i] - yLow) / (yHigh - yLow) * 100;
      y = canvas.height - canvas.height / 100 * yPercentage;
      
      context.lineTo(x, y);
      context.stroke();
    }
  }
}

const resizeCanvas = () => {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  
  drawData(dataSets);
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();
drawData(dataSets);