Chartjs-How to draw pile/stacked bar chart?

by

0👍

If you can figure out the percentage of the total bar that each section should take up, you can use those values to draw appropriately scaled rectangles. Here’s a very simple example of this concept showing how you would do this for one bar: 

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var percents = [0.3, 0.5, 0.2];
var colors = ['red', 'purple', 'green']; 
var barHeight = 300; 
var barWidth = 100; 

var currY = 0;
for (i = 0; i < percents.length; i++) {
  ctx.beginPath();
  ctx.rect(0, currY, barWidth, percents[i]*barHeight);
  ctx.fillStyle = colors[i];
  ctx.fill();
  currY += percents[i]*barHeight;
}
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

Leave a comment