Simple Bar Graph with HTML and CSS

BarGraphTutorial

Making a Simple Bar Graph with HTML and CSS

index.html

<div class="bar-graph-container">
  <figure class="bar-graph">
    <figcaption class="bar-graph-title">Bar Graph Values</figcaption>

    <div class="bar-graph-data">
      <div class="bar-graph-bar" aria-label="Bar 1: 33%" title="33%" style="--value: 33%;"></div>
      <div class="bar-graph-bar" aria-label="Bar 2: 77%" title="77%" style="--value: 77%;"></div>
      <div class="bar-graph-bar" aria-label="Bar 3: 46%" title="46%" style="--value: 46%;"></div>
      <div class="bar-graph-bar" aria-label="Bar 4: 17%" title="17%" style="--value: 17%;"></div>
      <div class="bar-graph-bar" aria-label="Bar 5: 82%" title="82%" style="--value: 83%;"></div>
    </div>

    <div aria-hidden class="bar-graph-legend">
      <div class="bar-graph-key">Bar 1</div>
      <div class="bar-graph-key">Bar 2</div>
      <div class="bar-graph-key">Bar 3</div>
      <div class="bar-graph-key">Bar 4</div>
      <div class="bar-graph-key">Bar 5</div>
    </div>
  </figure>
</div>

simple-bar-graph-with-html-and-css.markdown

Simple Bar Graph with HTML and CSS

A Pen by John Graham on CodePen.

License.

style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 32px;
  background: url(https://assets.codepen.io/3735/trees.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.bar-graph-container {
  width: 600px;
  padding: 40px;
  border: 2px solid #11131B;
  background: #353C59;
  color: #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 12px 1px rgba(0, 0, 0, .3);
}

.bar-graph {
  max-width: 100%;
  aspect-ratio: 2 / 1;
  margin: 0;
}

.bar-graph-title {
  font-size: 2rem;
  font-weight: 700;
}

.bar-graph-data {
  height: 100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  position: relative;
  margin-top: 2rem;
}

.bar-graph-data:before,
.bar-graph-data:after {
  content: '';
  position: absolute;
  top: 33.333%;
  width: 100%;
  border-top: 1px solid #ccc;
}

.bar-graph-data:after {
  top: 66.666%
}

.bar-graph-bar {
  width: 50px;
  border-radius: 10px 10px 0 0;
  height: var(--value, 1px);
  max-height: 100%;
  position: relative;
  z-index: 2;
  background-color: var(--bg);
  border: 2px solid var(--bg);
  border-bottom: none;
  box-shadow: inset 0 0 18px 2px rgba(255, 255, 255, .35);
  background-image: linear-gradient(
      45deg, 
      rgba(255,255,255,0.15) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255,255,255,0.15) 50%, 
      rgba(255,255,255, .15) 75%, 
      transparent 75%, 
      transparent
      );
   background-size: 12px 12px;
}

.bar-graph-bar:after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  display: block;
  width: 100%;
}

.bar-graph-legend {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 
    ;
  gap: 1rem;
  row-gap: 6px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.bar-graph-key {
  display: flex;
  align-items: center;
}

.bar-graph-key:before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 11px;
  background-color: var(--bg);
}

.bar-graph-bar,
.bar-graph-key:before
{
  --bg: #DBBB0F;
}

.bar-graph-bar:nth-child(2),
.bar-graph-key:nth-child(2):before
{
  --bg: #18C00E;
}

.bar-graph-bar:nth-child(3),
.bar-graph-key:nth-child(3):before
{
  --bg: #0FACDB;
}

.bar-graph-bar:nth-child(4),
.bar-graph-key:nth-child(4):before
{
  --bg: #A40FDB;
}

.bar-graph-bar:nth-child(5),
.bar-graph-key:nth-child(5):before
{
  --bg: #DB0F5A;
}

@media (max-width: 767px) {
  body {
    padding: 32px 16px;
  }
  .bar-graph-container {
    max-width: 100%;
    padding: 20px;
  }
  
  .bar-graph-bar {
    width: 25px;
    border-radius: 8px 8px 0 0;
  }
  
  .bar-graph-legend {
    grid-template-columns: 1fr 1fr 1fr;
  }
}