user1234 user1234 - 2 months ago 6
CSS Question

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: http://codepen.io/tsensuous/pen/jrPBxB and 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!

Answer

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

Comments