2 bar graph designs created using only HTML/CSS【Animation compatible】
There are times when you want to compare multiple numbers on your site and visualize it as a diagram. This time, we have put together a bar graph design that can be created using only HTML and CSS, which is recommended for such times. It supports various shapes such as vertical, horizontal, and stacked, and it is also possible to draw with animation.
Horizontal Chart
Standard
Adjust design
Copy HTML
<dl class="bar-chart-1">
<div>
<dt>項目1</dt>
<dd style="width: 60%">60%</dd>
</div>
<div>
<dt>項目2</dt>
<dd style="width: 70%">70%</dd>
</div>
<div>
<dt>項目3</dt>
<dd style="width: 80%">80%</dd>
</div>
</dl>
Copy CSS
.bar-chart-1 {
font-size: .9em;
}
.bar-chart-1 > div {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.bar-chart-1 dt {
width: 55px;
min-width: 55px;
}
.bar-chart-1 dd {
margin: 0;
padding-right: 15px;
border-radius: 3px;
background-color: #2589d0;
color: #fff;
font-weight: 600;
line-height: 45px;
text-align: right;
white-space: nowrap;
}
With background color
Adjust design
Copy HTML
<dl class="bar-chart-002">
<div>
<dt>項目1</dt>
<dd><span style="width: 60%">60%</span></dd>
</div>
<div>
<dt>項目2</dt>
<dd><span style="width: 70%">70%</span></dd>
</div>
<div>
<dt>項目3</dt>
<dd><span style="width: 80%">80%</span></dd>
</div>
</dl>
Copy CSS
.bar-chart-002 {
font-size: .9em;
}
.bar-chart-002 > div {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.bar-chart-002 dt {
width: 55px;
min-width: 55px;
}
.bar-chart-002 dd {
width: 100%;
margin: 0;
border-radius: 3px;
background-color: #f2f2f2;
}
.bar-chart-002 span {
display: inline-block;
padding-right: 15px;
border-radius: inherit;
background-color: #2589d0;
color: #fff;
font-weight: 600;
line-height: 45px;
text-align: right;
white-space: nowrap;
}