How could we rewrite a minor bit of the JS Math to compute a chart bar row that has nothing [0] and show a result of no color on the bar chart.
The 55, 510a, 510d, 511d have 0 items, so we want the math to compute and result in no color on that horizontal bar. If you look close there is a tiny tiny bit of color still showing at the far left edge.
By nothing we need that bar to be empty, none, blank, null etc.
var horizontal = [
["54", 20],
["55", null ], //** null data point
["56", 20],
["57", 40],
["58", 100],
["59", 20],
["510a", -0],
["510b", 40],
["510c", 20],
["510d", -1],
["511a", 40],
["511b", 20],
["511c", 20],
["511d", 0],
["512a", 80],
["512b", 80],
["512c", 20],
["512d", 40]
];
/*-- Random Color Generator - light color spectrum --*/
// SOURCE: https://gist.github.com/Chak10/dc24c61c9bf2f651cb6d290eeef864c1
function generateLightColorHex() {
let color = "#";
for (let i = 0; i < 3; i++)
color += ("0" + Math.floor(((1 + Math.random()) * Math.pow(16, 2)) / 2).toString(16)).slice(-2);
return color;
}
/*-- Animation --*/
function animate () {
var bars = document.getElementById("bar-horzontal").getElementsByTagName("div");
var i = 0;
for (var bar of bars) {
bar.style.width = horizontal[i][1] + "%";
i++;
}
}
/*-- Draw the bars on page load --*/
window.addEventListener("load", function(){
// Draw the horizontal bars
var container = document.getElementById("bar-horzontal");
for (var hor of horizontal) {
var bar = document.createElement("div");
bar.innerHTML = hor[0];
bar.style = "background: " + generateLightColorHex() + "; width: 0;";
container.appendChild(bar);
}
// Animate the bars
setTimeout(animate, 75);
});/*-- horizontal bar chart --*/
#bar-horzontal {
max-width: 500px;
border: 1px solid #000;
background: repeating-linear-gradient(
to right,
#111,
#efe 2px,
#efe 20%);
}
#bar-horzontal div {
color: #000;
font-weight: 600;
padding: 5px;
box-sizing: border-box;
transition: width 0.5s;
}<h6>5 bar chart</h6>
<div id="bar-horzontal"></div>Here is a live test.
https://codepen.io/crux1/pen/KKQZMzN
Source:
https://codepen.io/ontox/pen/NVmKWL