Variance Charts Example

Quarterly Sales, By Region

html

<link id="sales"
      rel="variance-data"
      href="//variancecharts.com/data/sales.csv">

<div id="bar-example">

  <h3>Quarterly Sales, By Region</h3>

  <chart data="#sales"
         map-length="sales"
         scale-y-linear="0 900">
    <guide-y></guide-y>
    <repeat>
      <bar></bar>
      <annotation class="bottom">
        {{quarter}}<br>{{region}}
      </annotation>
    </repeat>
  </chart>

</div>

css

#bar-example {
  width: 100%;
  padding: 60px 80px 80px 120px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
#bar-example h3 {
  text-align: center;
  margin: 0 0 28px 0;
}
#bar-example chart {
  width: 100%;
  height: 400px;
}
#bar-example bar {
  margin: 0 8px;
  border: none;
  background-color: #66a8d4;
}
#bar-example annotation {
  text-transform: capitalize;
  bottom: -8px;
  font-size: 12px;
}