JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" width="400" height="300"></canvas>
JavaScript
var sensors=[['LDR','hsla(120,100%,30%,.8)',[],2000],['kty','hsla(60,100%,30%,.8)',[],3000],['kty2','hsla(60,100%,30%,.8)',[],3100],['kty3','hsla(60,100%,30%,.8)',[],800,0,700]];
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var prev=0;
function x(){
//console.log(arr);
//arr.push(Math.random()*5000+.5|0);
ctx.clearRect(0,0,400,300);
for(var b=0;b<sensors.length;b++){
if(!sensors[b][4]){
arr=sensors[b][2];
arr.push(prev=sensors[b][3]+Math.random()*(sensors[b][5]||200)+.5|0);
arr.length<400||(prev=arr.shift());
var color='hsla('+((360/sensors.length*b+200)%360)+',100%,30%,.8)'
ctx.strokeStyle=color;
ctx.fillStyle=color;
ctx.lineWidth=".1px";
ctx.beginPath();
ctx.moveTo(0,300-prev*(300/5000)||0);
for(var a=0;a<arr.length;a++){
ctx.lineTo(a,300-arr[a]*(300/5000));// value*(height/range)
}
ctx.textAlign="left";
ctx.textBaseline="top";
ctx.font="12px Arial";
ctx.fillText(sensors[b][0]+': '+arr[a-1]+'mV',0,b*13);
ctx.stroke();
}
}
window.requestAnimationFrame(x);
//console.log(arr);
}
window.requestAnimationFrame(x);
//setInterval(x,17);