JSFiddle - React, Tailwind, and code Playground

by kentaromiura

CSS

html, body {width: 100%,
padding:0; margin:0;}

div{ 
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    padding: 1em 0;
    height: 5em;
}

JavaScript

var poll = [{
   id: 1,
   n_votes: 10,
   label: 'Choice 1'
 },
 {
   id: 2,
   n_votes: 30,
   label: 'Choice 2'
 },
 {
   id: 3,
   n_votes: 5,
   label: 'Choice 3'
 },
 {
   id: 4,
   n_votes: 50,
   label: 'Choice 4'
 },
 {
   id: 5,
   n_votes: 1,
   label: 'Choice 5'
 }]
 
 poll.sort(function(a, b){
     return a.n_votes > b.n_votes ? -1 : 1
 })
 var total = poll.reduce(function(total, item){
     return total + item.n_votes
 }, 0)
 
 poll.forEach(function(item){
     var div = document.createElement('div'),
         weight = (100 * item.n_votes / total);
     div.innerHTML = item.label
     div.setAttribute('title', item.n_votes)
     div.style.width = weight + '%';
     div.style.backgroundColor = ['rgba(255, 0, 0, ', weight/100, ')'].join('')
     document.body.appendChild(div)
 })