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 = {
    columnWidth: 50,
    cor: '#000',
    gap: 5,
    dataProvider:null,
    barras:function(valor){
        ctx = dashboard.getContext('2d');
        var posicaoVertical = ctx.canvas.clientHeight-valor;
        ctx.beginPath();
        // posicionar no bottom
        ctx.rect(_x,posicaoVertical,this.columnWidth,valor);
        ctx.fillStyle=this.cor;
        ctx.fill();
        // adicionar valor superior
        ctx.font = '12pt Calibri';
        ctx.fillStyle="#000";
        ctx.fillText(valor,_x+ this.columnWidth*0.2,posicaoVertical-5);
        ctx.closePath();
        if(_x > dashboard.width)
        {
            _x = -columnWidth;
            ctx.clearRect(0,0,dashboard.width,dashboard.height);
            ctx.translate(0,0);
            ctx.save();
        }
    },
    init: function(){
            for(var i=0;i<this.dataProvider.length;i++)
            {
                this.barras(this.dataProvider[i],this.cor);
                 _x+=this.columnWidth+ this.gap;// incremento a posicao horizontal
            }
    }
}
// usando um provedor de dados para preencher

grafico.dataProvider = [10,90,30,60,20,40,80,50,30,90,70,20,10];
grafico.columnWidth = 20; // seta largura da coluna
grafico.init(); // inicializa
canvas {
    background:#f3f3f3;
    overflow:scroll !important;
    transform: translate3d(0,0,0);
}
<canvas width="100" height="100" id="grafico_barras"></canvas>