Vertical Graph - Utilizing HTML and Cascading Style Sheets

My goal is to create a vertical bar chart that looks like this:

However, the result I am currently getting is different:

At the bottom of my vertical bar chart, both lines are connected together and I am trying to figure out how to separate them.

I am attempting to lower the position of the 0 line without it being attached.

Additionally, if we apply a height: 25%; inline CSS rule, the bar height should increase by 25%.

    .barchart-Wrapper {
      display: table;
      position: relative;
      margin: 20px 0;
      height: 252px;
    }
    .barChart-Container {
      display: table-cell;
      width: 100%;
      height: 100%;
      padding-left: 15px;
    }
    .barchart {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
     border-bottom: 3px solid tomato;
    }
    /*...CSS code continues...*/
    <div class="barchart-Wrapper">
     <div class="barchart-TimeCol">
      <div class="barchart-Time">
        <span class="barchart-TimeText">125</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">100</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">75</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">50</span>
      </div>
      <div class="barchart-Time">
        <span class="barchart-TimeText">25</span>
      </div>
     </div>
        
     <div class="barChart-Container">
      <div class="barchart">
       <div class="barchart-Col">
        <div class="barchart-Bar html-bar" style="height: 75%;"></div>
          <div class="barchart-BarFooter">
            <h3>HTML</h3>
          </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar css-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>CSS</h3>
        </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar js-bar" style="height: 75%;"></div>
         <div class="barchart-BarFooter">
           <h3>JS</h3>
         </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar python-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>PYTHON</h3>
        </div>
      </div>
      <div class="barchart-Col">
       <div class="barchart-Bar java-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
         <h3>JAVA</h3>
        </div>
      </div>
     </div>
    </div>
   </div>

htmlcssbar-chart

Answer №1

I've made a slight adjustment to the barchart-Time height, setting it to 20% with 125 as 100%. I think this change makes sense.

.barchart-Wrapper {
  display: table;
  position: relative;
  margin: 20px 0;
  height: 252px;
}

.barChart-Container {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding-left: 15px;
}

.barchart {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid tomato;
}

.barchart-Col {
  position: relative;
  vertical-align: bottom;
  display: table-cell;
  height: 100%;
}

.barchart-Col+.barchart-Col {
  border-left: 4px solid transparent;
}

.barchart-Bar {
  position: relative;
  height: 0;
  transition: height 0.5s 2s;
  width: 66px;
  margin: auto;
}

.barchart-Bar:after {
  content: attr(attr-height);
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}

.barchart-BarFooter {
  position: absolute;
  text-align: center;
  height: 10%;
  width: 100%;
}

.barchart-BarFooter h3 {
  color: darkred;
}

.barchart-TimeCol {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.barchart-Time {
  height: 20%;
  vertical-align: middle;
  position: relative;
}

.barchart-Time:after {
  border-bottom: 3px solid black;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0em;
}

.barchart-TimeText {
  position: absolute;
  top: -8px;
  z-index: 1;
  background: white;
  padding-right: 5px;
  color: #4d4d4d;
  font-size: 15px;
  font-family: 'Avenir Medium';
}

.html-bar {
  background-color: deepskyblue;
}

.css-bar {
  background-color: greenyellow;
}

.js-bar {
  background-color: peachpuff;
}

.python-bar {
  background-color: darkolivegreen;
}

.java-bar {
  background-color: cornflowerblue;
}
<div class="barchart-Wrapper">
  <div class="barchart-TimeCol">
    <div class="barchart-Time">
      <span class="barchart-TimeText">125</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">100</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">75</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">50</span>
    </div>
    <div class="barchart-Time">
      <span class="barchart-TimeText">25</span>
    </div>
  </div>

  <div class="barChart-Container">
    <div class="barchart">
      <div class="barchart-Col">
        <div class="barchart-Bar html-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
          <h3>HTML</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar css-bar" style="height: 50%;"></div>
        <div class="barchart-BarFooter">
          <h3>CSS</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar js-bar" style="height: 75%;"></div>
        <div class="barchart-BarFooter">
          <h3>JS</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar python-bar" style="height: 25%;"></div>
        <div class="barchart-BarFooter">
          <h3>PYTHON</h3>
        </div>
      </div>
      <div class="barchart-Col">
        <div class="barchart-Bar java-bar" style="height: 100%;"></div>
        <div class="barchart-BarFooter">
          <h3>JAVA</h3>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Have you experimented with adjusting the padding or margin of the h3 element?

You can try this approach:

h3 {
    margin-top: 10px;
}

If the above suggestion doesn't yield desired results, consider an alternative method like the following:

h3 {
   position: relative;
   top: 10px
}

If none of these strategies prove successful, please leave a comment for further assistance.

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

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

htmlcsstwitter-bootstrap

Having difficulty designing a visualization of country data compared to GDP using ggplot2 in R

I have been utilizing the gapminder library for my project in the following way: library(gapminder) library(dplyr) db1 <-gapminder db1Asia<-db1 %>% filter(year==1962 | year==1967) %>% filter(country=="China" | country=="India&quo ...

rggplot2plotbar-chart

CSS for dynamic styling of anchor tags

On the example.com website, I have added the following HTML (Very important note). Now, I am attempting to add CSS to a selected link in order to highlight the chosen value. <a class="value" href="http://example.com?filter=value1">Value1 <a class ...

jquerycss

What's the reason behind the presence of the a tag before the button in this

While working with Bootstrap 4, I noticed that the a tag is being displayed before the button when using the following code. Can anyone explain why? <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar ...

csshtmltwitter-bootstrapbootstrap-4

Assigning event to the body element

Is there a way to bind an event to the entire page, specifically the html or body tag? I am trying to achieve the following: document.addEventListener('mousemove', function() { alert('a'); }); I want an alert to be triggered whenever ...

javascripthtml

Utilizing JavaScript to retrieve input names from arrays

This is the HTML form that I am currently working with: <form action="#" method="post"> <table> <tr> <td><label>Product:<label> <input type="text" /></td> <td><label>Price:<label> ...

javascriptjqueryhtmlformsdom

In Chrome, the height of 100% is not functioning properly within the <div> element

I've been struggling with a problem that I've searched the internet for solutions to, but haven't been able to resolve. The issue revolves around an iframe containing a page that loads specific CSS rules. html, body { position: relative; he ...

csswebkit

Invoking a JQuery function when clicked

While this question may appear similar to others on this platform, I am facing a unique situation and struggling to make it work. It may be a simple solution that I am overlooking. Here is the basic dialog function that I want to trigger onclick with an "a ...

jqueryhtmlonclick

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

javascripthtmlhtml-table

Arrange Raphael Objects in Their Relative Positions

I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object. My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. ...

javascripthtmlcsssvgraphael

creating a translucent jqm collapsible widget

Looking to make a jquery mobile collapsible element transparent. Attempted the following style, but it did not work: background-color: rgba(0, 0, 0, 0.6); Check out the Fiddle When I try this: background: #557700; filter: alpha(opacity=30); filter: pr ...

cssjquery-mobilestylesheet

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

Center align a row with the help of Bootstrap 4.0

Here is some code with Bootstrap 4 classes that I am working with: <div class="container"> <div class="row"> <div class="col-xl-4 col-md-6 col-lg-4"> <div class="footer_widget"> <h3 class ...

csstwitter-bootstrapbootstrap-4

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

javascripthtmlmp3html5-audio

Tips for replicating input boxes in a while loop

https://i.sstatic.net/iuNIl.png HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="coun ...

javascriptphpjqueryhtml

Can Python be used to determine if a website is responsive?

I am currently utilizing Python3 alongside BeautifulSoup. I am interested in determining whether a website is responsive or not. Initially, I considered checking the meta tags of a website to see if it contains something like this: content="width=device- ...

pythonhtmlcssweb-crawler

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Steps for creating a functional dropdown menu using list items and retrieving the selected values

I am looking to implement a feature with multiple drop-down menus using list items. The functionality I desire is that when the user clicks on a ul element, the list items should drop down. Then, upon clicking on a specific list item, the value of that ite ...

javascriptjqueryhtmlcss