GRAFICO DE BARRAS, código comentado

<meta charset="UTF - 8">
<canvas width="600" height="400"></canvas>

<script>
// essa função cria os retangulos que representara os dados
    function retanguloPorcentagem(x, y, x1, y1, cor){
        var tela = document.querySelector("canvas");//trazendo o canva para o javascript
        var pincel = tela.getContext("2d");//criando um pincel

        pincel.fillStyle = cor; //dando cor ao pincel
        pincel.fillRect(x, y, x1, y1); //criando um retangulo
        pincel.strokeStyle = "black"; //dando cor a borda
        pincel.strokeRect(x, y, x1, y1); //criando uma borda


    }
//criando uma função para criar uma texto com o ano dos dados
    function desenhaTexto(x, y, texto){
        var tela = document.querySelector("canvas");//trazendo o canva para o javascript
        var pincel = tela.getContext("2d");//criando um pincel


        pincel.font = '15px Georgia'; // dando uma fonte para o que sera escrito 
        pincel.fillStyle = "black"; //cor do que será escrito
        pincel.fillText(texto, x, y); //passando as coordenadas e o texto
    }

    function desenhaBarra(x, y, x1, y1, cor, texto, legenda) {
        var cont = 0; //crie dentro da função e antes do laço, pois se for usado novamente o valor de cont sera 4.
        while(cont < 4){ //com esse laço percorro as posições dos vetores e acrescento um novo valor a y
            retanguloPorcentagem(x, y, x1, y1[cont], cor[cont]);
            y = y + y1[cont]; // falo onde y deve começar
        cont++; //acrescentando
        }

        desenhaTexto(x, y+20, texto);//desenhando o texto, acrescento 20 a y para no ficar colado ao fim da coluna
    }

//vetores a serem usados
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var cores = ['blue', 'green', 'yellow', 'red'];

//chamando a função
    desenhaBarra(50, 50, 50, serie2015, cores, "2015");
    desenhaBarra(150, 50, 50, serie2016, cores, "2016");

</script>