JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="limits"></div>

CSS

#limits {
  border: 1px solid black;
  width: 300px;
  margin: 20px auto;
  height: 500px;
  color: #fff;
  text-align: center;  
}

#limits div {
  min-height: 20px;
}

JavaScript

var values = [45, 3000, 1000, 6000, 2000];
var minHeight = 20;
var heights = 500 - (values.length * minHeight); // 20 is min width, 500 is height
var colors = ['#e2bace', '#3297ac', '#2b6944', '#85266c', '#126e87', '#ffb582', '#6967ab', '#f8e572', '#e5446d', '#e0c9ad'];

var sum = values.reduce(function(total, val) { return total + val });
var limits = document.getElementById('limits');

values = values.sort(function(a, b) { return a -b; })

var blocks = values.map(function(value, index) { 	
	var blockHeight = value / sum;
  var heightsVariable = blockHeight * heights;
  
	return {
  	value: value,
    height: heightsVariable + minHeight + 'px'
  };
});

blocks.forEach(function(block, index) {
	limits.innerHTML += '<div style="background-color:' + colors[index] + '; height:' + block.height + '">' + block.value + '</div>';
});