raising the specific bar in a vertical bar graph

Check out the vertical bar chart I found on this 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 shared the CSS code snippet from the website, but please visit the site for full details. I am having difficulty increasing the height of a specific bar marked as "2017". Despite using inspect element, I couldn't make changes. Can anyone offer assistance? Thank you in advance!!!

htmlcss

Answer №1

Here are two possible solutions: 1)
Adding inline CSS on line 109

100% {
    height: 108%;
}

or 2)

<div class="bar" data-percentage="68%" style="height: 120% !important;"></div>

Answer №2

Using the data-percentage attribute on your server side allows you to fill a CSS variable at the same time. This CSS variable can then be used to dynamically update the size and label of an element in CSS.

If you want to rotate text, you can also consider using the writing-mode property.

Here is an 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hidden form in JavaScript does not submit upon clicking the text

My previous question was similar to this but with a smaller example. However, the issue with that code differs from my current code. (If you're curious, here's my previous question: JavaScript Text not submitting form) Currently working on my fi ...

javascriptphpjqueryhtmlforms

Adjust the dimensions of the label element

Even after utilizing the width property in the label tag, I am unable to adjust the size of the 'Categories' box within my dropdown menu created using slide. Snippet of HTML code `<div class="nav-1"> <label for="touch&qu ...

htmlcssbootstrap-5

Is -webkit-backface-visibility not working in Chrome today?

Today, I encountered a perplexing issue with my project. It was functioning perfectly yesterday, but today it seems to be malfunctioning. (Yes, I have checked previous versions on git.) The problem at hand is that some divs that were previously hidden usi ...

google-chromecsswebkittransform

How can I align rectangles with different heights to display side by side using Javascript?

Currently, I am designing a press page for a website where the headlines/articles are displayed in rectangles. To achieve this layout, I am using the following CSS: .press-blocks{ column-count: 4; column-gap: 2em; padding-left: 10%; padding ...

javascripthtmlcssformat

Is it possible for two different forms to invoke a single Javascript function?

I have a page with two separate formulas. Each formula has its own form with inputs, and both forms call the same Javascript function on key up. However, only the first formula seems to be working. I suspect that changing the structure of the JS file may ...

phpjavascriptjqueryhtml

Communicate through PHP and JavaScript chat to display HTML content in the chat window

I have been attempting to display HTML output in the chat window but instead, it is showing the HTML code. Here are the two files involved in the chat system: chat.js `function chatHeartbeat(){ var itemsfound = 0; if (windowFocus == false) { var ...

javascriptphpjqueryhtmlmysql

Prevent the sidebar from collapsing or disappearing when the viewport is less than 768px in Bootstrap

Utilizing the Bootstrap classes side-nav and nav-sidebar, I have created a side navigation bar. However, there is an issue - when the viewport is less than 768px, the side navigation bar disappears. Below is the snippet of my HTML code: <ul class="nav ...

htmlcsstwitter-bootstrap

Align the dynamic content in the center vertically

Despite my extensive search on the internet, I have not been able to resolve my issue. The typical solution for vertically centering dynamic content in a div does not seem to work for me. It appears that something in my code is different from the examples ...

htmlcssvertical-alignmentcentering

activate hover interactions across multiple layers of elements

On my webpage, I have a grid of hidden images that fade in when the mouse hovers over them. The code for this functionality is as follows: HTML <img class="Image" src="./img/foo.png"> CSS .Image { opacity: 0; } JS $(".CircleImage").hover( funct ...

javascriptjqueryhtmlcss

What is the reason that PHP is not functioning properly?

I have a website with two pages. On the first page, there are select boxes and a send button. When the user selects their options from the boxes and clicks send, they are taken to the second page where their choices are displayed. Date Selection Page < ...

phphtmlarraysselect

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4

Selenium navigating an unordered list without returning the expected text

I'm currently in the process of developing a search bot for Craigslist using Selenium. I've managed to successfully iterate through the unordered list of search results, but unfortunately, I'm not able to extract the specific link text that ...

pythonhtmlcssselenium

Table header sticking does not work when overflow is set to scroll or auto

After trying numerous solutions without success, I am reposting this question. My table has a horizontal scroll and I attempted to make the table header sticky using position:sticky, but it caused the scrolling functionality to stop working. Is there a wa ...

javascripthtmlcssangularbootstrap-4

Tips for effectively verifying checkbox data

I have been facing an issue with uploading checkbox values to my database. Although the upload process is functioning correctly, I am encountering a problem with validation. When I do not select any checkboxes, the form still submits the data from other fi ...

javascriptphphtml

Having trouble uploading images and css files to a JSP page in a Spring MVC project

The directory structure appears as follows - projectroot -- src --> main-->java-->com-->controllers etc -- src --> resources--> myresources --> css-->.css -- src --> resources--> myresources --> ima ...

cssjspspring-mvc

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...

html

When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If ...

javascriptjqueryhtmlcss

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...

javascriptjqueryhtmlcss

Modify the click function from <tr> to <td> tag

I want to create an HTML page that functions as a digital library for books. Users should be able to click on a rate button to save the selected book to local storage, allowing them to see their rating whenever they revisit the page. However, I'm enc ...

javascriptjqueryhtml

Ways to eliminate line breaks in CSS

I'm currently working on a project and I'm facing an issue with text auto-entering without using any breaks. I'm not sure what the exact problem is. I implemented a code snippet from Overstack to display a div on hover. Perhaps the positioni ...

c#htmlcssasp.net