Bar Chart Using Pure CSS

Each of those bar- classes will make up one whole bar in our chart and, as yucky as this might seem, for now we won't worry too much about semantics or labelling the grid or the data. That'll come later – let's focus on the CSS so we can learn more about Grid.

Okay so with that we can now get styling! We need multiple bars in our chart with a 15px gap between them so we can set our parent class .chart with the relevant CSS Grid properties:

At this point our chart will still be empty because we haven't told our child elements to take up any space in the grid. So let's fix that! We're going to select every class that contains bar and use the grid-row-start and grid-row-end properties to make them fill up the vertical space in our grid and so eventually we'll end up changing one of these properties to define the custom height of each bar:

CSS Code

.chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(100, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 3px;
  height: 400px;
  width: 100%;
  background: #fff;
  padding: 45px 10px 0px 10px;
}

[class*="bar"] {
  border-radius: 0;
  transition: all .6s ease;
  background-color: #EAF6FD;
  border-top:1px solid #3DA5EC;
  border-right:1px solid #3DA5EC;
  border-left:1px solid #3DA5EC;
  grid-row-start: 1;
  box-sizing: border-box;
  grid-row-end: 101;
  text-align: center;

  margin-top: auto;
  }
[class*="bar"] span{
  position: relative;
  top: -20px;
  color: #3DA5EC;
  font-size: 12px;
  font-weight: bold;
}
[class*="bar"] label{
  position: absolute;
  width: auto;
  bottom: -23px;
  color: #3DA5EC;
  font-size: 12px;
  font-weight: bold;
  margin: auto;

  left: 0;
  right: 0;
}

.lable{
  background-color: #fff;
  text-align: center
}
.lable span{
  background-color: #EAF6FD;
  border:1px solid #3DA5EC;
  padding: 0px 20px;
  margin-right: 10px;
}
.bar-9{
  position: relative;
  height:31.034482758621%
}
.bar-9{
  position: relative;
  height:31.034482758621%
}
.bar-5{
  position: relative;
  height:17.241379310345%
}
.bar-19{
  position: relative;
  height:65.51724137931%
}
.bar-29{
  position: relative;
  height:100%
}
.bar-2{
  position: relative;
  height:6.8965517241379%
}
.bar-3{
  position: relative;
  height:10.344827586207%
}       

HTML Code

  <div >
    <div class="lable"><span></span> No of appointment</div>
        <div class="chart">

            <div class="bar-9"><span>9</span><label>User1</label></div>
            <div class="bar-9"><span>9</span><label>User2</label></div>
            <div class="bar-5"><span>5</span><label>User3</label></div>
            <div class="bar-19"><span>19</span><label>User4</label></div>
            <div class="bar-29"><span>29</span><label>User5</label></div>
            <div class="bar-2"><span>2</span><label>User6</label></div>
            <div class="bar-3"><span>3</span><label>User7</label></div>
                            
        </div>

     </div>