Question

0

210

Views

Make bar/progress chart with JS and CSS

If I have data like displayed on top of the image. Is it posible to make a diagran like this (picture), with pure JS, CSS and HTML? I dont know what a diagram/chart like this is called. Any help is greatly appreciated!

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T22:50:36.394Z

You don't need JavaScript.
Pass a CSS var() from HTML to CSS and use calc() to get the percentages

Using background linear gradient

.progress {
  background: green;
  height: 2em;
  background: linear-gradient(to right, green calc(var(--val) * 10%), red calc(var(--val) * 10%));
  background-size: 100%;
}

<div class="progress" style="--val:1"></div><br>
<div class="progress" style="--val:7"></div><br>

Using CSS pseudo element ::before

.progress {
  background: red;
  height: 2em;
}
.progress::before {
  content: "";
  display: block;
  height: inherit;
  background: green;
  width: calc(var(--val) * 10%);
}

<div class="progress" style="--val:1"></div><br>
<div class="progress" style="--val:7"></div><br>

Answer 2 · 2022-07-03T22:50:36.407Z

The most straightforward approach is to use an absolutely positioned child in a relatively positioned parent and set its width as the progress.

function setProgress(percent) {
  const range = document.querySelector('.range');
  const progress = range.querySelector('.progress');
  
  progress.style.width = `${percent}%`
}

setProgress(70);

.range {
  position: relative;
  height: 20px;
  background-color: #ed3a23;
  border: 2px solid #000;
  box-sizing: border-box;
  overflow: hidden;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #4db24c;
  border-right: 3px solid #000;
}

<div class="range">
  <div class="progress"></div>
</div>

Answer 3 · 2022-07-03T22:50:36.414Z

Here's pure HTML & CSS

.bar-wrap {
  display: flex
}
.col {
  display: block;
  text-align:center;
  width: var(--size)
}
.bar {
  height: 50px;
  width: 100%;
  border: 3px solid #000;
  background: var(--background)
}
.cgreen {
  color: green
}
.cred {
  color: red
}

<div class="bar-wrap">
  <div class="col cgreen" style="--size:70%;">
    <h3 class="heading">Correct</h3>
    <div class="bar" style="--background:green"></div>
    <p class="label">70%</p>
  </div>
  <div class="col cred" style="--size:30%;">
    <h3 class="heading">Wrong</h3>
    <div class="bar" style="--background:red"></div>
    <p class="label">30%</p>
  </div>
</div>

0

210

Make bar/progress chart with JS and CSS

3 answers

0

Using background linear gradient

Using CSS pseudo element ::before

0

0

Find remote jobs

Andres GPT