CODEWITHSUNDEEP
htmlcss
user1234
user1234

Reputation: 3159

How to add a value in the y-axis at the bottom of a bar chart-css

I'm using this as my exercise code work: CodePen

I want to add $0 at the bottom of the bar chart in the y-axis. i/e instead of starting from $10,0000 I want to start from $0. Is there any way to do that in CSS?

HTML for y-axis:

<div id="ticks">
<div class="tick" style="height: 59px;"><p>$50,000</p></div>
<div class="tick" style="height: 59px;"><p>$40,000</p></div>
<div class="tick" style="height: 59px;"><p>$30,000</p></div>
<div class="tick" style="height: 59px;"><p>$20,000</p></div>
<div class="tick" style="height: 59px;"><p>$10,000</p></div>
</div>

Thanks!

Upvotes: 1

Views: 576

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

Add another .tick with the $0 value, and assign the border to the top instead of the bottom. Then, give your #ticks a bottom border.

CSS

#ticks .tick {
  border-top: 1px solid #C4C4C4; */ Change to top /*
}

#ticks {
  border-bottom: 1px solid #C4C4C4; */ Add bottom border /*
}

HTML

<div id="ticks">
  <div class="tick" style="height: 59px;"><p>$50,000</p></div>
  <div class="tick" style="height: 59px;"><p>$40,000</p></div>
  <div class="tick" style="height: 59px;"><p>$30,000</p></div>
  <div class="tick" style="height: 59px;"><p>$20,000</p></div>
  <div class="tick" style="height: 59px;"><p>$10,000</p></div>
  <div class="tick" style="height: 59px;"><p>$0</p></div>
</div>

CodePen

EDIT CSS Only

If you do not have access to the HTML and would like to achieve this in CSS only, you can use something like :before.

CSS

#ticks .tick:last-child:before {
  content: '$0';
  position: absolute;
  left: -5em; 
  bottom: -5px;
  margin: 0 0 0 0.5em;
}

CodePen

Result

enter image description here

Upvotes: 2

Rob Frank
Rob Frank

Reputation: 377

Since you asked how to do this in CSS rather than adding another html element, here is a way to do it using the CSS3 pseudo :after element. You may want to adjust the right and top properties as you see fit.

#q1:after {
   content:"$0";
   position:relative;
   color:#000;
   right:85px;
   top:285px;
 }

Upvotes: 1

Related Questions