//- list of relative heights
- let values = [.2, .4, .7, .8, .4, .95, .6, 1, .6, 1.3, .8, 1.4, 1.2, .58, .1, .2, .55, .7, .4, .3, .47];
- let n = values.length;

.chart(style=`--n: ${n}`)
	- for(let i = 0; i < n; i++)
		.bar(style=`--fy: ${values[i]}` 
				 class=values[i] > 1 ? 'over' : null)
p Given the heights of the bars relative to the optimum, a hex value for the worst case and another one for the best case, CSS computes the bar backgrounds.
View Compiled
$w: .625rem;
$h: 12.5rem;
$p: 1.75*$w;
$line-w: 2px;
$c-worst: #ff2617;
$c-best: #76ff27;
$sh: 0 0 $w 0 rgba(#000, .1);

@function int-ch($name, $c0, $c1, $k) {
	$ch0: round(call($name, $c0));
	$ch1: round(call($name, $c1));
	
	@return calc(#{$ch0}*#{$k} + #{$ch1}*(1 - #{$k}))
}

@function int-col($c0, $c1, $k: .5) {
	@return hsl(int-ch(hue, $c0, $c1, $k), 
							int-ch(saturation, $c0, $c1, $k), 
							int-ch(lightness, $c0, $c1, $k))
}

body {
	display: grid;
	place-content: center;
	margin: 0;
	min-height: 100vh;
	background: #222;
	color: rgba(#eee, .2);
	font: 1em arial, sans-serif
}

.chart {
	display: grid;
	grid-template-columns: repeat(var(--n), $w);
	grid-gap: $w;
	justify-self: center;
	position: relative;
	border: solid $w currentcolor;
	padding: $p;
	border-radius: 1.5*$w;
	box-shadow: $sh, inset $sh;
	background: 
		linear-gradient(0deg, 
				transparent calc(#{$h} - #{$line-w}), currentcolor 0, 
				currentcolor calc(#{$h} + #{$line-w}), transparent 0) 
			content-box padding-box;
	
	&:after {
		position: absolute;
		bottom: calc(#{$h} + #{$p});
		left: calc(100% + #{$w} + .25em);
		transform: translatey(50%);
		font-size: .75em;
		font-weight: 800;
		letter-spacing: 1.5pt;
		text-transform: uppercase;
		content: 'optimum'
	}
}

.bar {
	align-self: end;
	height: calc(var(--fy)*#{$h});
	border-radius: $w;
	box-shadow: $sh;
	background: int-col($c-worst, $c-best, calc(var(--s, 1)*(1 - var(--fy))));
	
	&.over { --s: -1 }
}

p { max-width: 35em }
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js