JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="cont">
   <div class="col bar" data-num="0"></div>
   <div class="col bar" data-num="1"></div>
   <div class="col bar" data-num="2"></div>
   <div class="col bar" data-num="3"></div>
   <div class="col bar" data-num="4"></div>
   <div class="col bar" data-num="5"></div>
   <div class="col bar" data-num="6"></div>
   <div class="col bar" data-num="7"></div>
   <div class="col bar" data-num="8"></div>
   <div class="col bar" data-num="9"></div>
</div>

<div>
   <div class="col num" data-num="0"></div>
   <div class="col num" data-num="1"></div>
   <div class="col num" data-num="2"></div>
   <div class="col num" data-num="3"></div>
   <div class="col num" data-num="4"></div>
   <div class="col num" data-num="5"></div>
   <div class="col num" data-num="6"></div>
   <div class="col num" data-num="7"></div>
   <div class="col num" data-num="8"></div>
   <div class="col num" data-num="9"></div>
</div>

CSS

.cont { height: 300px; }

.col {
  display: inline-block;
  width: 60px;
}

.col.bar { 
  height: 300px; 
  position: relative;
}

.col.bar div {
  background: red;
  width: 100%;
  position: absolute;
  bottom: 0px;
}

.col.num {
  text-align: center;
}

JavaScript

let counts = {
	0: 0,
  1: 0,
  2: 0,
  3: 0,
  4: 0,
  5: 0,
  6: 0,
  7: 0,
  8: 0,
  9: 0,
  total: 0
};

let loopjawn = setInterval(function(){
	let rng = Math.floor(Math.random() * 10);
  counts[rng]++;
  counts.total++;
  
  $.each(counts, function(i, v){
  	$('.col.bar[data-num="' + i + '"]').html('<div style="background: red; height:' + ((v / counts.total) * 100).toFixed(2) + '%"></div>');
  	$('.col.num[data-num="' + i + '"]').html('<span>#' + i + '</span><br /><span>' + v + '</span><br /><span>' + ((v / counts.total) * 100).toFixed(1) + '%</span>');
  })
}, 5);