JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvasA" width="600" height="60"></canvas>
<canvas id="canvasB" width="600" height="60"></canvas>
<canvas id="canvasC" width="600" height="60"></canvas>
<p style="padding-top: 80px;">Hover over the canvas'</p>

CSS

canvas{
  position: absolute;
}

JavaScript

function drawCanvas(canvas, ctx, samples, color, cutoff){
		var x = 0;
		cutoff = (typeof(cutoff) === "undefined" ? 1 : cutoff);

		for(var i = 0; i < samples.length; i++){
			if(i <= Math.round(samples.length * cutoff)){
				ctx.fillStyle = color;
			  ctx.fillRect(x + (x * 2), 60 - (samples[i] * (60 / 140)), 2, samples[i] * (60 / 140));
			  ctx.fill();

			  x++;
			}	
		}
	}

	var canvasA = document.getElementById("canvasA"),
  	canvasB = document.getElementById("canvasB"),
    canvasC = document.getElementById("canvasC");
	var samples = [121,105,107,125,94,96,121,72,74,120,57,61,120,65,62,120];
	
	// main layer
	drawCanvas(canvasA, canvasA.getContext("2d"), samples, "#313131");
	// elapsed
	drawCanvas(canvasB, canvasB.getContext("2d"), samples, "blue", 0.72047311);
	// cursor point
	document.addEventListener("mousemove", function(e){
		var cvs = canvasC,
			cvsRect = cvs.getBoundingClientRect();

		var perc = ((-(cvsRect.left - e.clientX)) / cvs.width);
		if(perc >= 0 && perc <= 1){
			if(e.clientY >= cvsRect.top && e.clientY <= (cvsRect.top + cvsRect.height)){
				drawCanvas(cvs, cvs.getContext("2d"), samples, "red", perc);
			}
		}
	});