Vertical Bar Graph

By Kevin Ball

graph chart data vizualization dashboard admin app

How do I use This?

A responsive flexbox-based vertical bar graph using only HTML and SCSS.

HTML

<ul class="bar-graph">
  <li class="bar-graph-axis">
    <div class="bar-graph-label">100%</div>
    <div class="bar-graph-label">80%</div>
    <div class="bar-graph-label">60%</div>
    <div class="bar-graph-label">40%</div>
    <div class="bar-graph-label">20%</div>
    <div class="bar-graph-label">0%</div>
  </li>
  <li class="bar primary" style="height: 95%;" title="95">
    <div class="percent">95<span>%</span></div>
    <div class="description">Yetis</div>
  </li>
  <li class="bar secondary" style="height: 90%;" title="90">
    <div class="percent">90<span>%</span></div>
    <div class="description">ZURBians</div>
  </li>
  <li class="bar success" style="height: 80%;" title="80">
    <div class="percent">80<span>%</span></div>
    <div class="description">Cows</div>
  </li>
  <li class="bar warning" style="height: 75%;" title="75">
    <div class="percent">75<span>%</span></div>
    <div class="description">Cows that think they're Yetis</div>
  </li>
  <li class="bar alert" style="height: 40%;" title="40">
    <div class="percent">40<span>%</span></div>
    <div class="description">Who knows</div>
  </li>
</ul>

$bar-graph-height: 425px;

.bar-graph {
  padding: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  height: $bar-graph-height;
  margin: 0;

  li {
    display: block;
    padding: rem-calc(25) 0;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    border-radius: 4px 4px 0 0;
    max-width: 20%;
    height: 100%;
    margin: 0 1.8% 0 0;
    flex: 1 1 15%;
  }

  .bar-graph-axis {
    flex: 1 1 8%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .bar-graph-label {
    margin: 0;
    background-color: none;
    color: $dark-gray;
    position: relative;

    @include breakpoint(medium) {
      &:before,
      &:after {
        content: "";
        position: absolute;
        border-bottom: 1px dashed $dark-gray;
        top: 0;
        left: 0;
        height: 50%;
        width: 20%;

        @include breakpoint(large) {
          width: 30%;
        }
      }

      &:after {
        left: auto;
        right: 0;
      }
    }
  }

  .percent {
    letter-spacing: -3px;
    opacity: 0.4;
    width: 100%;
    font-size: rem-calc(30);
    position: absolute;

    @include breakpoint(medium) {
      font-size: rem-calc(62);
    }

    span {
      font-size: rem-calc(30);
    }
  }

  .description {
    font-weight: 800;
    opacity: 0.5;
    text-transform: uppercase;
    width: 100%;
    font-size: 14px;
    bottom: 20px;
    position: absolute;
    font-size: rem-calc(16);
    overflow: hidden;
  }

 .bar {
    @each $name, $color in $foundation-palette {
      &.#{$name} {
        border: 1px solid $color;
        background: linear-gradient(lighten($color, 10%), $color 70%);
      }
    }
  }
}

.bar-graph {
  padding: 0;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 425px;
  margin: 0;
}

.bar-graph li {
  display: block;
  padding: 1.5625rem 0;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  border-radius: 4px 4px 0 0;
  max-width: 20%;
  height: 100%;
  margin: 0 1.8% 0 0;
  -webkit-flex: 1 1 15%;
      -ms-flex: 1 1 15%;
          flex: 1 1 15%;
}

.bar-graph .bar-graph-axis {
  -webkit-flex: 1 1 8%;
      -ms-flex: 1 1 8%;
          flex: 1 1 8%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bar-graph .bar-graph-label {
  margin: 0;
  background-color: none;
  color: #8a8a8a;
  position: relative;
}

@media print, screen and (min-width: 40em) {
  .bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
    content: "";
    position: absolute;
    border-bottom: 1px dashed #8a8a8a;
    top: 0;
    left: 0;
    height: 50%;
    width: 20%;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 64em) {
  .bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
    width: 30%;
  }
}

@media print, screen and (min-width: 40em) {
  .bar-graph .bar-graph-label:after {
    left: auto;
    right: 0;
  }
}

.bar-graph .percent {
  letter-spacing: -3px;
  opacity: 0.4;
  width: 100%;
  font-size: 1.875rem;
  position: absolute;
}

@media print, screen and (min-width: 40em) {
  .bar-graph .percent {
    font-size: 3.875rem;
  }
}

.bar-graph .percent span {
  font-size: 1.875rem;
}

.bar-graph .description {
  font-weight: 800;
  opacity: 0.5;
  text-transform: uppercase;
  width: 100%;
  font-size: 14px;
  bottom: 20px;
  position: absolute;
  font-size: 1rem;
  overflow: hidden;
}

.bar-graph .bar.primary {
  border: 1px solid #1779ba;
  background: linear-gradient(#2196e3, #1779ba 70%);
}

.bar-graph .bar.secondary {
  border: 1px solid #767676;
  background: linear-gradient(#909090, #767676 70%);
}

.bar-graph .bar.success {
  border: 1px solid #3adb76;
  background: linear-gradient(#65e394, #3adb76 70%);
}

.bar-graph .bar.warning {
  border: 1px solid #ffae00;
  background: linear-gradient(#ffbe33, #ffae00 70%);
}

.bar-graph .bar.alert {
  border: 1px solid #cc4b37;
  background: linear-gradient(#d67060, #cc4b37 70%);
}

Vertical Bar Graph

By Kevin Ball

Button with Notification Badge

Mobile App Modal

Stats List

Vertical Bar Graph

By Kevin Ball

Similar Building Blocks

Button with Notification Badge

Mobile App Modal

Stats List