Vertical Bar Chart - HTML and CSS

Question

I am trying to do a vertical bar chart like this

But I am getting like this

My vertical bar chart

At bottom of my vertical bar chart, both lines are attached together, I am trying to fix that.

I am trying to set that 0 line down but it's attached

And for example, bar height should get increase 25% if we give height: 25%; on inline CSS.

    .barchart-Wrapper {
      display: table;
      position: relative;
      margin: 20px 0;
      height: 252px;
    }
    .barChart-Container {
      display: table-cell;
      width: 100%;
      height: 100%;
      padding-left: 15px;
    }
    .barchart {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
     border-bottom: 3px solid tomato;
    }
    .barchart-Col {
      position: relative;
      vertical-align: bottom;
      display: table-cell;
      height: 100%;
    }
    .barchart-Col + .barchart-Col {
      border-left: 4px solid transparent;
    }
    .barchart-Bar {
      position: relative;
      height: 0;
      transition: height 0.5s 2s;
      width: 66px;
      margin: auto;
    }
    .barchart-Bar:after {
      content: attr(attr-height);
      color: white;
      position: absolute;
      text-align: center;
      width: 100%;
    }
    .barchart-BarFooter {
      position: absolute;
      text-align: center;
      height: 10%;
      width: 100%;
    }
    .barchart-BarFooter h3 {
      color: darkred;
    }
    .barchart-TimeCol {
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
    }
    .barchart-Time {
      height: 25%;
      vertical-align: middle;
      position: relative;
    }
    .barchart-Time:after {
      border-bottom: 3px solid black;
      content: "";
      position: absolute;
      width: 100%;
      left: 0;
      top: 0em;
    }
    .barchart-TimeText {
      position: absolute;
      top: -8px;
      z-index: 1;
      background: white;
      padding-right: 5px;
      color: #4d4d4d;
      font-size: 15px;
      font-family: 'Avenir Medium';
    }
    .html-bar {
      background-color: deepskyblue;
    }
    .css-bar {
      background-color: greenyellow;
    }
    .js-bar {
      background-color: peachpuff;
    }
    .python-bar {
      background-color: darkolivegreen;
    }
    .java-bar {
      background-color: cornflowerblue;
    }

user_14267060 · Answer

I guess doing a small change will help. Updated barchart-Time height to be 20%. Given 100% as 125. I believe this makes sense

.barchart-Wrapper {
  display: table;
  position: relative;
  margin: 20px 0;
  height: 252px;
}

.barChart-Container {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding-left: 15px;
}

.barchart {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid tomato;
}

.barchart-Col {
  position: relative;
  vertical-align: bottom;
  display: table-cell;
  height: 100%;
}

.barchart-Col+.barchart-Col {
  border-left: 4px solid transparent;
}

.barchart-Bar {
  position: relative;
  height: 0;
  transition: height 0.5s 2s;
  width: 66px;
  margin: auto;
}

.barchart-Bar:after {
  content: attr(attr-height);
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}

.barchart-BarFooter {
  position: absolute;
  text-align: center;
  height: 10%;
  width: 100%;
}

.barchart-BarFooter h3 {
  color: darkred;
}

.barchart-TimeCol {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.barchart-Time {
  height: 20%;
  vertical-align: middle;
  position: relative;
}

.barchart-Time:after {
  border-bottom: 3px solid black;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0em;
}

.barchart-TimeText {
  position: absolute;
  top: -8px;
  z-index: 1;
  background: white;
  padding-right: 5px;
  color: #4d4d4d;
  font-size: 15px;
  font-family: 'Avenir Medium';
}

.html-bar {
  background-color: deepskyblue;
}

.css-bar {
  background-color: greenyellow;
}

.js-bar {
  background-color: peachpuff;
}

.python-bar {
  background-color: darkolivegreen;
}

.java-bar {
  background-color: cornflowerblue;
}

user_14117691 · Answer

Have you tried padding/ margin on the h3 element?

Try this:

h3 {
    margin-top: 10px;
}

If this doesn't work there wil be a run around like this:

h3 {
   position: relative;
   top: 10px
}

If neither of these solutions work, feel free to command below.

Vertical Bar Chart - HTML and CSS

2 Answers