<canvas width="600" heigth="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ["blue", "green", "yellow", "red"];
function desenhaBarra(x, y, serie, cores, texto) {
pincel.font = "20px Georgia";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y - 20);
for (var i = 0; i < serie.length; i++) {
pincel.fillStyle = cores[i];
pincel.fillRect(x, y, 50, serie[i]);
pincel.fillStroke = "black";
pincel.strokeRect(x, y, 50, serie[i]);
y = y + serie[i];
}
}
desenhaBarra(50, 50, serie2015, cores, "2015");
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>