Bati um pouco a cabeça mas foi..

Demorei um pouco mas foi..

<meta charset="UTF-8">

<canvas width="800" height="600"></canvas>


<script>

function desenhaRetangulo (x, y, largura, altura, cor) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, largura, altura);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, largura, altura);
}

function desenhaTexto (x, y, texto) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

    pincel.font = '15px Georgia';
    pincel.fillStyle = 'black';
    pincel.fillText(texto, x, y);
}

var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var percentualNome = ['50% Chrome', '25% Firefox', '20% Safari', '5% Outros (Opera, IE, etc)']
var serie = [serie2015, serie2016];
var serieLength = serie2015.length;
var cores = ['blue', 'green', 'yellow', 'red'];
var tamanhoBarra = 50;

function desenhaBarra(x, y, serie, cores, texto) {
    desenhaTexto(x, y - 25, texto);

    for (i = 0; i < serieLength; i++) {
        desenhaRetangulo(x, y, tamanhoBarra, serie[i], cores[i])
        desenhaTexto(x + 70, y + 10, percentualNome[i]);
        y = y + serie[i];
    }
}

desenhaRetangulo(0, 0, 800, 600, 'lightgrey');
desenhaBarra(50, 300, serie2015, cores, '2015');
desenhaBarra(520, 300, serie2016, cores, '2016');

</script>