Bar Chart Using Pure CSS


Dec 25, 2018

Simple way to create bar chart using HTML and CSS Only. I want to figure out all the ways to make bar chart with CSS. I think it's interesting that there are a million different ways to style charts and data on the web. it's great for learning about new and unfamiliar technologies. In this case: CSS Grid! Since Grid can be confusing and weird at first glance, let's focus on making a really hacky prototype to begin with. To get started we need to write the markup for our chart:

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>


Copyright 2018. All rights are reserved