Edit in JSFiddle

//Configuracoes
var dashboard = document.getElementById('grafico_barras');
var _x = 0;
var docHeight = document.documentElement.clientHeight- 20; // - 20 jsFiddle hack
var docWidth = document.documentElement.clientWidth - 20;
dashboard.height = docHeight;
dashboard.width = docWidth;
var ctx;
// objeto para ser preenchido do tipo Grafico Barras
var grafico = {
    gap: 5,
    cor:'#A089BC',
    barras:function(valor){
        ctx = dashboard.getContext('2d');
        var posicaoVertical = ctx.canvas.clientHeight-valor;
        ctx.beginPath();
        // posicionar no bottom
        ctx.rect(_x,posicaoVertical,50,valor);
        ctx.fillStyle=this.cor;
        ctx.fill();
        // adicionar valor superior
        ctx.font = '12pt Calibri';
        ctx.fillStyle="#000";
        ctx.fillText(valor,_x+ 50*0.2,posicaoVertical-5);
        ctx.closePath();
        if(_x > dashboard.width)
        {
            console.log("x "+_x);
            console.log("palco "+dashboard.width);
            ctx.translate(0,0);
        }
    }
}
// timer para popular o grafico

var fps = 1;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

function animateChart()
{
    
     requestAnimationFrame(animateChart);
     
    now = Date.now();
    delta = now - then;
     
    if (delta > interval) {
        
         then = now - (delta % interval);
               
        
         var valoresAleatorios = Math.floor((Math.random()*200)+1);
   grafico.barras(valoresAleatorios,'#EF8327');
    _x+=50+ grafico.gap;// incremento a posicao horizontal
    }
    
}
animateChart();

canvas {
    background:#f3f3f3;
    overflow:scroll !important;
    transform: translate3d(0,0,0);
}

<canvas width="100" height="100" id="grafico_barras"></canvas>