HTML - Bar Chart

About

Data Visualization - Bar Chart in HTML and CSS.

The generation of the HTML element can be automated with d3. See D3 - Bar Chart

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>

Documentation / Reference







Share this page:
Follow us:
Task Runner