Grafieken weergeven in pure HTML en CSS vergt véél denkwerk, horizontaal, vertikaal, kleuren en de naderhandse onderhoudbaarheid.
Dit een uiterst complexe uitwerking, meerder vertikale bar graphs naast elkaar.

HTML

<div id="vertgraph">
	<ul>
	<li class="critical" style="height: 150px;">22</li>
	<li class="high" style="height: 80px;">7</li>
	<li class="medium" style="height: 50px;">3</li>
	<li class="low" style="height: 90px;">8</li>
	<li class="info" style="height: 40px;">2</li>
	</ul>
</div>

CSS

#vertgraph {
width: 378px;
height: 207px;
position: relative;
border: 1px solid #ab977c;
background-color: #eee;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #ab977c;
background-color: #c2b39c;
text-align: center;
font-weight: bold;
color: #fff;
line-height: 2.5em;
}
#vertgraph li.critical {
left: 24px;
}
#vertgraph li.high {
left: 101px;
}
#vertgraph li.medium {
left: 176px;
}
#vertgraph li.low {
left: 251px;
}
#vertgraph li.info {
left: 327px;
}