https://i.sstatic.net/afnkp.png
It is important to note that the color red should be labeled "2 Issues," the yellow box should say "4 Issues," and so on. I have encountered difficulties in applying CSS to achieve this effect.
In the code below, I attempted to add labels but faced issues with getting them to display inside the boxes; I am unsure which attribute should be used for this purpose:
content += "<tr rowspan = \"3\"><td><div class=\"project-name\">"+args.chart.chartWidth[i].project+"</td>";
content += "<td colspan = \"5\"><div class=\"box-container"+i+"\"><div class=\"box"+i+" red" +i+ "\"></div><div class=\"box"+i+" yellow" +i+ "\"></div><div class=\"box"+i+" green" +i+ "\"></div></div></td></br></tr>";
content += "<style type=\"text/css\"> ";
content +=".box-container"+i+"{ padding: 10px;display: table-cell;text-align: center;vertical-align: middle; }";
content +=".box"+i+"{float: left; box-shadow:3px 3px 2px #666767; height:30px;}";
content += ".red" +i+" { width: " + redWid + "px; background-color:#ff0000; **label:"2Issues"** }";
content += ".yellow"+i+" { width: " + yellowWid + "px; background-color:#ffff00; **label:"3Issues"** }";
content += ".green"+i+" { width: " + greenWid + "px; background-color:#00ff00; **label:"4Issues"** }";