A Pen by CarterTsai.

chart-example.markdown

chart example

A Pen by CarterTsai on CodePen.

License.

index.html

<div class="chart_outside">
  <div id="left" class="axisX axisFont"> X Axis </div>
  <div id="right">
    <div class="chart">
      <div class="title">Chart Title</div>
      <div class="bar val20"><lable>1</lable><span>20</span></div>
      <div class="bar val10"><lable>2</lable><span>10</span></div>
      <div class="bar val30"><lable>3</lable><span>30</span></div>
      <div class="bar val40"><lable>4</lable><span>40</span></div>
      <div class="bar val50"><lable>5</lable><span>50</span></div>
      <div class="bar val100"><lable>6</lable><span>100</span></div>
      <div class="bar val60"><lable>7</lable><span>60</span></div>
      <div class="bar val40"><lable>8</lable><span>40</span></div>
      <div class="bar val70"><lable>9</lable><span>70</span></div>
    </div> 
    <div class="axisY axisFont"> Y Axis</div>
  </div>
</div>

style.scss

@import "compass";
body{
  background-color: #c4806e;
}

.chart_outside {
   width: auto;
   height: 500px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -220px;
   margin-left: -380px;
}

.chart {
  width: auto;
  height: 450px;
  background-color: #bfc974;
  padding: 10px;
  margin:0;
} 

$width: 40px;

.chart > .title {
  text-align: center;
  width:100%;
  color: white;
  font-size: 35px;
  font-family: 'PT Sans Caption', sans-serif;
}

#left, #right {
  float: left;
}

.axisFont {
  color: white;
  font-size: 30px;
  font-family: 'PT Sans Caption', sans-serif;
  text-align: center;
}

.axisX {
  width: 100px;
  height: 450px;
  padding-right: 5px;
  line-height: 450px;
}

.axisY {
  width: 100%;
  height: 50px;
  margin-top: 5px;
}

.bar {
  position: relative;
  width: $width;
  background-color: #3879b3;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.bar:hover {
   background-color: #9f3569; 
}

.bar > span {
  display: none;
  position: absolute;
  width: $width;
  top: -30px;
  font-size: 25px;
  color: white;
  font-family: 'PT Sans Caption', sans-serif;
  text-align: center;
}

.bar:hover > span {
   display: block;
   transition: 0.5s;
   font-size: 50px;
   left: -10px;
   top: -60px;
}

.bar:active {
  background-color: #1f3569;
}

.bar > lable {
  position: relative;
  width: $width;
  top: 100%;
  font-size: 25px;
  color: white;
  font-family: 'PT Sans Caption', sans-serif;
  text-align: center;
  float: left;
}

$base: 350px;

.val0 {
  height: 0px;
  top: 360px;
}

.val10 {
  height: 20px;
  top: 340px;
}

.val20 {
  height: 40px;
  top: 320px;
}

.val30 {
  height: 60px;
  top: 300px;
}

.val40 {
  height: 80px;
  top: 280px;
}

.val50 {
  height: 100px;
  top: 260px;
}

.val60 {
  height: 120px;
  top: 240px;
}

.val70 {
  height: 140px;
  top: 220px;
}

.val80 {
  height: 160px;
  top: 200px;
}

.val90 {
  height: 180px;
  top: 180px;
}

.val100 {
  height: 200px;
  top: 160px;
}