JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<div id="content">
  <div class="content_wrapper">
    <table>
      <tr><td>Active Learning</td><td>45</td></tr>
      <tr><td>Course Design Summer Institute</td><td>42</td></tr>
      <tr><td>eCampus Immersive Learning Institute</td><td>10</td></tr>
      <tr><td>Proven Course Redesign</td><td>11</td></tr>
      <tr><td>Promising Practices Course Redesign</td><td>5</td></tr>
      <tr><td>EOQA</td><td>45</td></tr>
      <tr><td>Technology Equipment</td><td>23</td></tr>
      <tr><td>Student Success Research</td><td>8</td></tr>
    </table>  
  </div>
</div>

JavaScript

(function() {
    const values = [];
    const target = document.querySelector("#content .content_wrapper table");
    target.querySelectorAll("tr").forEach(function(elem) {
    		values.push({label: elem.querySelector("td:nth-child(1)").innerHTML, 
        						 value: parseInt(elem.querySelector("td:nth-child(2)").innerHTML)})
    })
    let max = 0;
    values.forEach(function (value) { max = Math.max(max, value.value);})
    target.style.width = "100%";	    //	make table width: 100%
    target.style.borderSpacing = "6px";
		target.querySelectorAll("td:nth-child(1)").forEach(function(elem, index) {
	    	//	make td position relative    		
        elem.style.position = "relative";
        elem.style.width = "calc(100% - 20px)";
        elem.style.height = "24px";
        elem.innerHTML = '';
        
        
	    	// 	add div to first td in every row        
        const bar = document.createElement("DIV");
        const textnode = document.createTextNode(values[index].label);
				bar.appendChild(textnode)
				elem.appendChild(bar);

				//	make div width as per the value
        bar.style.width = Math.round(((values[index].value) * 100)/max)+"%";

	    	// 	set div styles
				bar.style.height = '24px';
        bar.style.backgroundColor = 'rgba(229,168,35, 0.9)';
        bar.style.position = "absolute";
        bar.style.top = "0px";
        bar.style.left = "0px";
        bar.style.verticalAlign = "middle";
        bar.style.lineHeight = "1.7em";
        bar.style.paddingLeft = "4px";
        bar.style.paddingRight = "4px";
        bar.style.whiteSpace = "nowrap";
        
    })
 		target.querySelectorAll("td:nth-child(2)").forEach(function(elem) {
    		elem.style.textAlign = "right";
        elem.style.width = "30px";
    });

})();