Presenting two alternatives for consideration, with the opportunity to provide additional specifics based on these options.
The first option may not align with your requirements as it establishes a defined gradient based on a specific height. Access the Codepen link provided for this option: https://codepen.io/jfirestorm44/pen/yLMNPPM?editors=1100
The second alternative seems more suitable for your needs. You can determine the gradient breaks for your linear-gradient based on the maximum height of the bar graph.
UPDATED:
HTML
<div id="container">
<div id="first" class="bar"></div>
<div id="second" class="bar"></div>
<div id="third" class="bar"></div>
<div id="fourth" class="bar"></div>
<div id="fifth" class="bar"></div>
</div>
SCSS
.bar {
@for $i from 1 through 5 {
$height: 20px * $i;
$light: 75% + $i * -5;
&:nth-child(#{$i}) {
position: absolute;
bottom: 50%;
left: 20% + ($i * 10%);
width: 20px;
height: $height;
font-size: 25px;
transform: translate(-80%, 0);
background: hsl(35, 100%, $light);
}
}
}
Updated Codepen: https://codepen.io/jfirestorm44/pen/jOBPopj?editors=1100
Introducing a JavaScript Option:
let inputNum = document.getElementById("number");
let button1 = document.getElementById("button1");
let border = document.getElementById("border");
let dropDown = document.getElementById("cars");
function color() {
if (inputNum.value > 0) {
let bar = document.createElement("div");
bar.classList.add("bar");
border.appendChild(bar);
let bars = document.getElementsByClassName("bar");
let carName = document.createElement("p");
carName.classList.add("carType");
carName.textContent = cars.options[cars.selectedIndex].text;
border.appendChild(carName);
let names = document.getElementsByClassName("carType");
let height = inputNum.value * 26;
for (let i = 0; i < bars.length; i++) {
names[names.length - 1].style.top = "275px";
names[names.length - 1].style.left = -5 + i * 30 + "px";
bars[bars.length - 1].style.height = height + "px";
bars[bars.length - 1].style.backgroundColor =
"hsl(35, 100%," + (75 - height / 5.2) + "%)";
bars[bars.length - 1].style.left = 10 + i * 30 + "px";
}
}
}
#container {
position: absolute;
top: 40px;
left: 0;
width: 400px;
height: 300px;
}
#border {
position: relative;
left: 100%;
top: 0;
width: 90%;
height: 90%;
border-left: 2px solid grey;
border-bottom: 2px solid grey;
transform: translate(-100%, 0);
}
#numberContainer {
position: relative;
left: -5%;
}
.num {
line-height: 10px;
}
.num:before {
content: "";
position: absolute;
left: 18px;
width: 100%;
height: 10px;
border-bottom: 1px lightgrey solid;
}
.bar {
position: absolute;
bottom: 0;
width: 20px;
}
#button1 {
position: relative;
top: 0;
width: 60px;
height: 20px;
}
.car {
position: absolute;
top: 10px;
}
.carType {
position: absolute;
bottom: -85px;
writing-mode: vertical-rl;
text-orientation: upright;
}
<div id="container">
<div id="border">
<div id="numberContainer">
<p class="num">10</p>
<p class="num">9</p>
<p class="num">8</p>
<p class="num">7</p>
<p class="num">6</p>
<p class="num">5</p>
<p class="num">4</p>
<p class="num">3</p>
<p class="num">2</p>
<p class="num">1</p>
<p class="num">0</p>
</div>
</div>
</div>
<input type="number" min="0" max="10" value="0" id="number"/>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button" onclick="color()" id="button1">Submit</button>