Creating a line graph using HTML and CSS can present some challenges, but generating a bar chart with these technologies is a more straightforward process.
See the Example Below:
.bar-chart {
display: table;
margin-top: 20px;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
width: 60px;
height: 44px;
border-right: 2px solid rgb(255, 255, 255);
}
.row .axis-y {
width: 96px;
border-right: 1px solid #000;
vertical-align: top;
}
.axis-x div {
border-top: 1px solid #000;
}
.axis-x .axis-y {
border: none;
}
.axis-x div, .axis-y {
text-align: center;
font-weight: bold;
}
.row1 div:nth-of-type(n+2) {
background-color: rgb(255, 0, 0);
}
.row2 div:nth-of-type(n+3) {
background-color: rgb(255, 0, 0);
}
.row3 div:nth-of-type(n+4) {
background-color: rgb(255, 0, 0);
}
.row4 div:nth-of-type(n+5) {
background-color: rgb(255, 0, 0);
}
<div class="bar-chart">
<div class="row row4">
<div class="axis-y">80 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row3">
<div class="axis-y">60 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row2">
<div class="axis-y">40 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row1">
<div class="axis-y">20 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row axis-x">
<div class="axis-y"></div>
<div>Week 1</div>
<div>Week 2</div>
<div>Week 3</div>
<div>Week 4</div>
</div>
</div>