3 column bar chart

In this example below you will see how to do a 3 column bar chart with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MasParaSol, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MasParaSol ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3 column bar chart</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="barchart">
<li><span class="name">Calories</span>
<span class="count">50% DV</span>
<span class="count2">59% DV</span>
  <span class="count3">69% DV</span>
  <span class="food1" style="width: 42%">(42%)</span>

  <span class="food2" style="width: 62%">(62%)</span>
  <span class="food3" style="width: 32%">(32%)</span>
  </li>
      <li>
  <span class="name">Protein</span> 
        <span class="count">45% DV</span>
        <span class="food1" style="width: 28%">(28%)</span>
          <span class="food2" style="width: 62%">(42%)</span>
  <span class="food3" style="width: 32%">(42%)</span>
      </li>
      <li>
    <span class="name">Carbs</span>
        <span class="count">200% DV</span>
        <span class="food1" style="width: 100%">(20%)</span>
        <span class="count">100% DV</span>
        <span class="food2" style="width: 100%">(42%)</span>
  <span class="food3" style="width: 100%"></span>
      </li>
      <li>
  <span class="name">Fat</span> 
        <span class="count">100</span>
        <span class="food1" style="width: 10%">(10%)</span>
          <span class="food2" style="width: 62%">(42%)</span>
  <span class="food3" style="width: 32%">(42%)</span>
      </li>
  
  <li>
    <span class="name">Sugar</span> 
        <span class="count">100</span>
        <span class="food1" style="width: 10%">(10%)</span>
          <span class="food2" style="width: 62%">(42%)</span>
  <span class="food3" style="width: 32%">(42%)</span>
      </li>

    </ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MasParaSol/3-column-bar-chart-EXZORW */
/* CHART LISTS */
.barchart { 
 float: left; width: 500px;list-style-type: none;margin:0px;}
 
 .barchart li {position: relative;display: block;border-bottom: 3px solid #fff; 
 _zoom: 1;list-style-type: none;padding: .3em 4.5em 2.1em 0.5em; 
 z-index: 2;margin: 15px 0px;}

.name {z-index:10; color: #1D3755; font-weight: bold; 
display: block;padding: 0;position: relative; z-index: 2;animation: 1s anim-lightspeed-in ease forwards;z-index:1000;}


.barchart .index {display: block; position: absolute; 
top: 0; left: 0; height: 100%;
background: linear-gradient(to left, #BDD5F7, #B8E4F5);
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;}

.index{animation: 1s anim-lightspeed-in ease forwards;}

.barchart li:hover {background: #EFEFEF;z-index:6000;}

.food1 {display: block; position: absolute; 
top: 0; left: 0; height: 50%;
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;padding:0; margin:0;
background-color: #ACD1E9;}
.food2 {display: block; position: absolute; 
bottom:30%; left: 0; height: 30%;
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;padding:0; margin:0;
 background-color:#D55858;}
.food3 {
background-color: #31A2AC;
display: block; position: absolute; 
bottom:0; left: 0; height: 30%; opacity:0.3;
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;padding:0; margin:0;}


@keyframes anim-lightspeed-in {0% {transform: translateX(-200%);opacity: 1;}
100% {transform: translateX(0);opacity: 1;}}
   

.count {display: block; position: absolute; 
top: 0;right: 0; margin: 0 0.3em; 
text-align: right; color: #666; 
font-weight: bold; font-size: 0.875em; line-height: 2em;}

.count2 {display: block; position: absolute; 
top: 0;right: 0; margin: 15px 5px 0px 0px; 
text-align: right; color: #666; 
font-weight: bold; font-size: 0.875em; line-height: 2em;}

.count3 {display: block; position: absolute; 
top: 0;right: 0; margin: 30px 5px 0px 0px; 
text-align: right; color: #666; 
font-weight: bold; font-size: 0.875em; line-height: 2em;}

Comments