increasing the height of particular bar in vertical bar chart - html

Question

I am using a vertical bar chart from the site::
https://codepen.io/anythinggraphic/pen/xxKpBax
/* Bar Graph Vertical */
.bar-graph .year {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
}
.bar-graph-vertical {
margin-top: -109px;
max-width: 680px;
}
.bar-graph-vertical .bar-container {
float: left;
height: 150px;
margin-right: 8px;
position: relative;
text-align: center;
width: 40px;
}
.bar-graph-vertical .bar {
border-radius: 3px;
bottom: 40px;
position: absolute;
width: 40px;
}
.bar-graph-vertical .year {
bottom: 0;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar::after {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
color: #fff;
content: attr(data-percentage);
font-weight: 700;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: left;
top: 24px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar-one .bar {
background-color: #64b2d1;
-webkit-animation: show-bar-one-vertical 1.2s 0.1s forwards;
-moz-animation: show-bar-one-vertical 1.2s 0.1s forwards;
animation: show-bar-one-vertical 1.2s 0.1s forwards;
}
.bar-graph-two .bar-two .bar {
background-color: #5292ac;
-webkit-animation: show-bar-two-vertical 1.2s 0.2s forwards;
-moz-animation: show-bar-two-vertical 1.2s 0.2s forwards;
animation: show-bar-two-vertical 1.2s 0.2s forwards;
}
.bar-graph-two .bar-three .bar {
background-color: #407286;
-webkit-animation: show-bar-three-vertical 1.2s 0.3s forwards;
-moz-animation: show-bar-three-vertical 1.2s 0.3s forwards;
animation: show-bar-three-vertical 1.2s 0.3s forwards;
}
.bar-graph-two .bar-four .bar {
background-color: #2e515f;
-webkit-animation: show-bar-four-vertical 1.2s 0.4s forwards;
-moz-animation: show-bar-four-vertical 1.2s 0.4s forwards;
animation: show-bar-four-vertical 1.2s 0.4s forwards;
}
I have posted the CSS code block from the site but please refer to the site.
I have to increase the height of a particular bar labelled "2017". I am unable to do that. I tried with inspect element but can't do it. Please can any one help me with this. Thank You!!!

Answer 1

there are two ways:
1)inline css on line 109
100% {
height: 108%;
}
or
2)
<div class="bar" data-percentage="68%" style="height: 120% !important;"></div>

Answer 2

if you use and fill data-percentage on your server side, you could also fill a css var() value meanwhile and use that var to update size and label from CSS.
Writing-mode is also an option to rotate your text.
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--bar: clamp(220px, 40vh, 500px);/* whatever you need here */
min-height:100vh;/*demo purpose */
display:flex;/*demo purpose */
}
body{margin:auto;/*demo purpose */}
ul {
font-size:clamp(10px, 4vmin, 16px);/* whatever you need here */
height: var(--bar);
display: flex;
align-items: end;
padding-top:0.5em;
padding-bottom: 4em;
width:max-content;/*demo purpose */
margin:auto;/*demo purpose */
background:#bee;
border-radius:0.25em;
box-shadow:0 0 5px;/*demo purpose */
transition: 0.2s
}
ul:hover {transform:rotate(-90deg);/*demo purpose */}
li {
width:2em;
writing-mode: vertical-lr;
margin: 0 0.5em;
display: flex;
align-items: center;
animation: show-bar-vertical 1.2s 0.4s forwards;
}
b {
margin-bottom: -4em;
padding:0.5em;
background:#adf
}
span {
padding: 0 0.5em;
flex: 1 1;
border-radius: 0.25em;
margin-bottom: 0.25em;
overflow:hidden;
max-height:0;
box-shadow:1px 1px 2px white,-1px -1px 2px gray;
animation:delay 0.1s 0.25s forwards
}
span:before {
content: attr(data-percentage);
display: inline-block;
color: white;
text-indent: .5em;
height:0;
}
li:nth-child(odd) b {background:#aef;}
li:nth-child(1) span {
background-color: #64b2d1;
}
li:nth-child(2) span {
background-color: #5292ac;
}
li:nth-child(3) span {
background-color: #407286;
}
li:nth-child(4) span {
background-color: #2e515f;
}
li:nth-child(5) span {
background-color: #1e3d49;
}
#keyframes show-bar-vertical {
0% {
height: 0;
}
100% {
height: var(--data-percentage,auto);
}
}
#keyframes delay{
to {max-height:100%;}
}
<!-- example build from a list, structure can be anything else -->
<ul id="bargraph">
<li style="--data-percentage : 40% ">
<span data-percentage=" 40%" ></span>
<b>2020</b>
</li>
<li style="--data-percentage : 55% ">
<span data-percentage=" 55%" ></span>
<b>2019</b>
</li>
<li style="--data-percentage : 100% " >
<span data-percentage=" 100%" ></span>
<b>2018</b>
</li>
<li style="--data-percentage : 82% ">
<span data-percentage=" 82%" ></span>
<b>2017</b>
</li>
<li style="--data-percentage : 25% ">
<span data-percentage=" 25%" ></span>
<b>2016</b>
</li>
</ul>