Edit in JSFiddle

//Configuracoes
var dashboard = document.getElementById('grafico_area');
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 de area
var grafico = {
    espessura: 20,
    cor: '#B1B980',
    dotsColor:'#50545B',
    areaCor:'#FF5B64',
    gap: 5,
    dataProvider: [],
    init: function () {
        var max = this.dataProvider.length;
        ctx = dashboard.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(posicaoX(0), posicaoY(this.dataProvider[0]));
        for (var i = 1; i < max; i++) {
          ctx.lineTo(posicaoX(i), posicaoY(this.dataProvider[i]));            
        }
        // para o chart de area
         ctx.lineTo(posicaoX(max-1),posicaoX(max));
         ctx.lineTo(0,docHeight);
         ctx.strokeStyle = this.cor;
         ctx.lineWidth = this.espessura*0.3;
         ctx.fillStyle=this.areaCor;
         ctx.fill();
         ctx.stroke(); 
         ctx.closePath();
        
        for (var i = 0; i < max; i++)
        {
            ctx.beginPath();
            ctx.arc(posicaoX(i), posicaoY(this.dataProvider[i]), this.espessura * 0.5, 0, Math.PI * 2, false);
            ctx.fillStyle= this.dotsColor;
            ctx.fill();
            ctx.closePath();
        }       
    }
}

function pegarValorMaximo() {
    var max = 0;
    for (var i = 0; i < grafico.dataProvider.length; i++) {
         if (grafico.dataProvider[i] > max) {
             max = grafico.dataProvider[i];
         }
    }
    max += 10 - max % 10;
    return max;
}

function posicaoY(val) {
   return docHeight - ((docHeight-20) / pegarValorMaximo()) * val;
}
function posicaoX(val) {
    return (docWidth / grafico.dataProvider.length) * val;
}
// usando um provedor de dados para preencher
grafico.cor = "#75bc48";
grafico.dataProvider = [21, 11, 18, 29, 7, 10, 90, 35, 60, 20, 40, 80, 44, 50, 30, 90, 70, 20, 10, 99, 33];
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_area"></canvas>