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;
    }

    <div class="barchart-Wrapper">
     <div class="barchart-TimeCol">
      <div class="barchart-Time">
        <span class="barchart-TimeText">125</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">100</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">75</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">50</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">25</span>
      </div>
     </div>
        
     <div class="barChart-Container">
      <div class="barchart">
       <div class="barchart-Col">
        <div class="barchart-Bar html-bar" style="height: 75%;"></div>
          <div class="barchart-BarFooter">
            <h3>HTML</h3>
          </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar css-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>CSS</h3>
        </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar js-bar" style="height: 75%;"></div>
         <div class="barchart-BarFooter">
           <h3>JS</h3>
         </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar python-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>PYTHON</h3>
        </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar java-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>JAVA</h3>
        </div>
      </div>
     </div>
    </div>
   </div>

you can offset it from the width of that border you want to hide via .barchart-Bar {top:3px;} and then increase its height of the same offset size , so it covers what it is supposed to .barchart-Bar {padding-top:3px;/* or padding-bottom*/} jsfiddle.net/731vwdto — G-Cyrillus
– G-Cyrillus, Commented Sep 17, 2021 at 11:30
actually, the 0 line should be separate that's the issue i am facing. i have updated the image — hover_me
– hover_me, Commented Sep 17, 2021 at 11:45

Vinu Prasad · Accepted Answer · 2021-09-17 12:14:54Z

1

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;
}

<div class="barchart-Wrapper">
  <div class="barchart-TimeCol">
    <div class="barchart-Time">
      <span class="barchart-TimeText">125</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">100</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">75</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">50</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">25</span>
    </div>
  </div>

  <div class="barChart-Container">
    <div class="barchart">
      <div class="barchart-Col">
        <div class="barchart-Bar html-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
          <h3>HTML</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar css-bar" style="height: 50%;"></div>
        <div class="barchart-BarFooter">
          <h3>CSS</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar js-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
          <h3>JS</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar python-bar" style="height: 25%;"></div>
        <div class="barchart-BarFooter">
          <h3>PYTHON</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar java-bar" style="height: 100%;"></div>
        <div class="barchart-BarFooter">
          <h3>JAVA</h3>
        </div>
      </div>
    </div>
  </div>
</div>

edited Sep 17, 2021 at 12:14

answered Sep 17, 2021 at 12:07

Vinu Prasad

9687 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hover_me Over a year ago

Hi, it worked but when i am tried to increase the height of the bar into 50% on inline css and it's not correctly ending on 50%. Is there any to fix that

Vinu Prasad Over a year ago

Whatever we have now makes sense because 75% of 125 is 93.75 hence it is not touching the top. Unfortunately, normal mathematics won't work here it seems. let me figure out if there is a way out for this

hover_me Over a year ago

Actually, i have modified from this codepen --> codepen.io/ro6er/pen/mPWXZa?editors=1100 may be it can bring idea to you by seeing this codepen. This codepen is working properly. I got an issue when i deleted some extra % lines

Vinu Prasad Over a year ago

In the codepen the graph is mapped from 0 to 100 along the y-axis and hence it works well. But you want the graph to be mapped from 0 to 125 right? Unfortunately we can't do that unless you do some maths inside calc which wont be scalable either. 75% in a graph which span from 0 to 125px should be 93px only

hover_me Over a year ago

is there any way to fix this, i am trying this for long hours

|

Jelle Stekelenburg · Accepted Answer · 2021-09-17 11:59:21Z

0

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.

answered Sep 17, 2021 at 11:59

Jelle Stekelenburg

1431 silver badge11 bronze badges

1 Comment

hover_me Over a year ago

hi, that's not my issue. anyway thanks

Collectives™ on Stack Overflow

Vertical Bar Chart - HTML and CSS

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related