<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
pincel.fillStroke = 'black';
pincel.font='20px Georgia';
let anos = [2015, 2016];
let SerieAno = [[50, 25, 20, 5], [65, 20, 13, 2]];
let coresSeries = ["blue", "green", "yellow", "red"];
let x = 50;
for (let contAnos = 0; contAnos < anos.length; contAnos++) {
let y = 50;
var valoresSerie = SerieAno[contAnos];
pincel.fillStyle='black';
pincel.fillText(anos[contAnos], x, y-10);
for (let contPerc = 0; contPerc < valoresSerie.length; contPerc++) {
var perc = valoresSerie[contPerc];
pincel.fillStyle = coresSeries[contPerc];
pincel.fillRect(x, y, 50, perc);
pincel.strokeRect(x, y, 50, perc);
y = y + perc;
}
x = x + 100;
}
</script>