About
Data Visualization - Bar Chart in HTML and CSS.
The generation of the HTML element can be automated with d3. See D3 - Bar Chart
Articles Related
Example
Having a element chart container lets you position and style the chart without affecting the rest of the page.
Horizontal
.chart div{
font: 10px sans-serif;
background: steelblue;
padding: 3px;
color: white;
vertical-align: bottom;
display: inline-block;
}
<div class="chart" >
<div style="height:10px;">10</div>
<div style="height:20px;">20</div>
<div style="height:30px;">30</div>
<div style="height:40px;">40</div>
<div style="height:50px;">50</div>
<div style="height:60px;">60</div>
<div style="height:70px;">70</div>
<div style="height:80px;">80</div>
</div>
Vertical
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>