Edit in JSFiddle

//Configuracoes
var dashboard = document.getElementById('grafico_colunas');
var docHeight = document.documentElement.clientHeight- 20; // - 20 jsFiddle hack
var docWidth = document.documentElement.clientWidth - 20;
dashboard.height = docHeight;
dashboard.width = docWidth;
var ctx;
var _y = docHeight-20;// jsfiddle hack
// objeto para ser preenchido do tipo Grafico Barras
var grafico = {
    columnHeight: 50,
    cor: '#000',
    gap: 5,
    dataProvider:null,
    colunas:function(valor){
        ctx = dashboard.getContext('2d');
        ctx.beginPath();
        // posicionar no bottom
        ctx.rect(0,_y,valor,this.columnHeight);
        ctx.fillStyle=this.cor;
        ctx.fill();
        // adicionar valor superior
        ctx.font = '12pt Calibri';
        ctx.fillStyle="#000";
        ctx.fillText(valor,valor+this.gap,_y+ this.columnHeight*0.6);
        ctx.closePath();
        if(_y > dashboard.height)
        {
            _y = -columnHeight;
            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.colunas(this.dataProvider[i],this.cor);
                 _y-=(this.columnHeight+ this.gap);// incremento a posicao vertical
            }
    }
}
// usando um provedor de dados para preencher
grafico.cor = "#75bc48";
grafico.dataProvider = [11,18,29,7,10,90,30,60,20,40,80,44,50,30,90,70,20,10,99];
grafico.columnHeight = 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_colunas"></canvas>