TinyChan

function plotGraph(array){
  let canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),dpr=devicePixelRatio,width=950,height=600,m=50;
  canvas.width=width;canvas.height=height;
  ctx.fillStyle="#fff";ctx.fillRect(0,0,width,height);
  let min=Math.min(...array),max=Math.max(...array),range=max-min;
  let rawStep=range/5,exponent=Math.floor(Math.log10(rawStep)),factor=rawStep/Math.pow(10,exponent);
  factor=factor>=5?5:factor>=2?2:factor>=1?1:0.5;
  let yStep=Math.pow(10,exponent)*factor;
  min=Math.floor(min/yStep)*yStep;max=Math.ceil(max/yStep)*yStep;
  range=max-min;
  let yTicks=Array.from({length:Math.ceil(range/yStep)+1},(_,i)=>min+i*yStep),
      xStep=Math.max(1,Math.ceil(array.length/10)),xTicks=Array.from({length:Math.ceil(array.length/xStep)+1},(_,i)=>i*xStep);
  ctx.translate(m,height-m);ctx.scale(1,-1);
  ctx.strokeStyle="#eee";ctx.lineWidth=1;
  yTicks.forEach(y=>{ctx.beginPath();ctx.moveTo(0,(y-min)/range*(height-2*m));ctx.lineTo(width-2*m,(y-min)/range*(height-2*m));ctx.stroke();});
  xTicks.forEach(i=>{if(i>=array.length)i=array.length-1;let x=i*(width-2*m)/(array.length-1);ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,height-2*m);ctx.stroke();});
  ctx.strokeStyle="#444";ctx.lineWidth=2;
  ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(width-2*m,0);ctx.moveTo(0,0);ctx.lineTo(0,height-2*m);ctx.stroke();
  ctx.beginPath();array.forEach((v,i)=>{let x=i*(width-2*m)/(array.length-1),y=(v-min)/range*(height-2*m);i?ctx.lineTo(x,y):ctx.moveTo(x,y);});ctx.stroke();
  ctx.setTransform(1,0,0,1,0,0);
  ctx.fillStyle="#333";ctx.font="12px Arial";ctx.textAlign="right";
  yTicks.forEach(y=>{let ty=height-m-((y-min)/range*(height-2*m));ctx.fillText(+y.toFixed(yStep<1?(yStep<.5?2:1):0),m-8,ty+3);});
  ctx.textAlign="center";ctx.textBaseline="top";
  xTicks.forEach(i=>{if(i>=array.length)return;let tx=m+i*(width-2*m)/(array.length-1);ctx.fillText(i,tx,height-m+8);});
  let dataUrl=canvas.toDataURL();
  console.log("%c ",`display: inline-block;width:${width/dpr}px;height:${height/dpr}px;background:url(${dataUrl}) no-repeat;background-size:${width/dpr}px ${height/dpr}px;border:1px solid #eee;line-height:0;`);
}
plotGraph(new Array(100).fill().map(()=>Math.random()*100-50));
plotGraph(new Array(200).fill().map((_,i)=>{let x=(i/8)-10;return x===0?1:Math.sin(Math.PI*x)/(x*Math.PI);}));