Pessoal quero dicas e conselhos. Acabei por fazer sozinho mas não tenho certeza se poderia melhorar em alguma coisa.

Por favor façam suas criticas para eu poder visualizar outras opções de construção de código!

<meta charset="utf-8">

<canvas width="1600" height="400"></canvas>

<script>

//Variaveis referente às funcionalidades de <canvas>.
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

//Função para desenhar texto em <canvas>.
    function drawString(x , y, string) {

        pincel.font='bold 11px Arial';
        pincel.fillStyle='black';
        pincel.fillText(string, x, y);  
    }

//    Função para desenhar retângulos em <canvas>.
    function drawRect(x, y, w, h, color) {

        pincel.fillStyle=color; 
        pincel.fillRect(x, y, w, h);
        pincel.strokeStyle='black'; 
        pincel.strokeRect(x, y, w, h);
    }

//Define o valor inicial de x e y no canvas. À partir do qual vão ser calculada a posições x e y dos retangulos.
    var y = 150;
    var x = 50;
//Função com laço de repetição para desenhar os devidos retangulos a serem representados como um grafico.
    function drawGraph(serie, string) {

        drawString(x-10, y-25, string);//posições da escrita pré definida por x-10 e y-25.

        for(var i = 0; i <= serie.length; i++) {


//valor fixo para a largura dos retangulos (width = 45)
//x e y foram pré-definidos em variaveis fora dessa função.
            drawRect(x, y, 45, serie[i], cores[i]);


//y aqui, será incrementado do valor do valor da variavel serie em sua devida posição, definida por i. (ex: y = 150 + 50) >>> serie2015[0] = 50. 
//Como essa operação esta em um for() o y será incrementado sempre que o valor de i mudar, assim sendo, o valor de y no final do laço de repetição terá todos os valores de series somados à y.
            y = y + serie[i];    
        }

        y = 150; //Retorna o valor inicial de y.
        x = x + 65; //Soma 65 à x para criação de novas barras à seguir.

    }

//Variaveis referente aos valores dos itens dos graficos, e no caso, os respectivos tamanhos dos retangulos a serem desenhados.

    var cores = ["blue", "yellow", "pink", "grey", "green", "red", "orange", "purple", "lightgrey", "lightblue"]; //diversas cores caso haja mais valres para serie.
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

    drawGraph(serie2015, "Série 2015");
    drawGraph(serie2016, "Série 2016");

</script>