Add a Horizontal Bar Chart

What does this code do?

This code snippet will allow you to visually compare scores using a horizontal bar graph. This is a static chart could be used to show metrics, progress, a leaderboard, or a tally.

Video Tutorial

Code Snippets

Copy and paste this code into a code block on your Squarespace page. You can copy and paste it as many times you like until you have enough progress bars.

<div class="barchart-row">
  <div class="barchart-title">
    <p>Forests</p>
  </div>
  <div class="barchart-content">
    <div class="barchart-bar-wrapper">
      <div class="barchart-bar" style="width:80%;"></div>
    </div>
    <div class="barchart-tally">80%</div>
  </div>
</div>

Edit the title and tally. Then change the width of the barchart-bar to match how much of the bar you want filled up.

Then copy and paste this code into Custom CSS.

/* Horizontal Bar Chart */
.barchart-title {
  margin-bottom: 0.5vw; //space between title and bar
}
.barchart-content {
  display: flex;
}
.barchart-bar-wrapper {
  border: 1px solid grey; //border around bar
  width: 80%; // total width of bar section
  height: 24px; //height of bar section
}
.barchart-bar {
  height: 100%;
  background: grey; //background color of bar
}
.barchart-tally {
  text-align: right; //alignment of tally
  width: 20%; //width of tally section 
}

Then edit the size and color of the bars. Note that the width of the bar section and tally section should add up to 100%.

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the title and tally.

3. Change the width of each barchart-bar to match how much of the bar you want filled up.