How to create 100% stacked chart using vanilla JavaScript [closed]

I have created a 100% stacked chart using amCharts library but because the rendering takes long I rather to create a simple one myself but I have no idea how to do it:

Here is what I want :

enter image description here

I give the data to a function and it renders the chart with different color and shows the viewer how many percent each color takes.

the above image is showing this object:

{
   white: 10,
   red: 5,
   orange: 3,
   green: 5,
   blue: 2,
},

Any suggestions would be greatly appreciated.

Answer

Maybe you haven’t thought of the simplest solution (at least, I think this is the simplest 🙂 ):

const stacked = {
  white: 10,
  red: 5,
  orange: 3,
  green: 5,
  blue: 2,
};

const container = document.getElementById("container");

const addElement = (color) => {
  return `<div class="chart-element" style="background-color: ${color}"></div>`
}

(function(data, container) {
  html = ''
  for (let key in data) {
    html += addElement(key)
  }
  // using fr units ensures that they are stacked to 100%
  container.style.gridTemplateColumns = Object.values(data).map(val => `${val}fr`).join(" ")
  container.innerHTML = html
})(stacked, container);
.chart-element {
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 20px;
}

#container {
  display: grid;
}
<div id="container"></div>

I used simple divs & CSS grid with a dynamic number of columns and fr units.