A Pen by Jon Eyrick.

Grouped-Bar-Example.markdown

Grouped Bar Example

Forked from Variance Charts's Pen Grouped Bar Example.

A Pen by Jon Eyrick on CodePen.

License.

index.html

<script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-bbae39c.min.js" charset="UTF-8"></script>

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

<div id="bar-grouped">

  <h3>Regional Sales, By Quarter</h3>

  <chart class="bar"
         data="#sales"
         map-length="sales"
         scale-x-linear="0 900">
    <guide-x></guide-x>
    <groups by="quarter">
      <annotation class="quarter left">{{quarter}}</annotation>
      <repeat>
        <bar></bar>
        <annotation class="region left">{{region}}</annotation>
      </repeat>
    </groups>
  </chart>

</div>

style.css

#bar-grouped {
  width: 80%;
  padding: 60px 80px 80px 120px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
#bar-grouped h3 {
  text-align: center;
  margin: 0 0 28px 0;
}
#bar-grouped chart {
  width: 100%;
  height: 400px;
}
#bar-grouped bar {
  margin: 4px 0;
  border: none;
  background-color: #66a8d4;
}
#bar-grouped datum:nth-child(1) bar {
  background-color: #7dac9f;
}
#bar-grouped datum:nth-child(2) bar {
  background-color: #dc7062;
}
#bar-grouped datum:nth-child(3) bar {
  background-color: #66a8d4;
}
#bar-grouped datum:nth-child(4) bar {
  background-color: #e5b060;
}
#bar-grouped annotation {
  text-transform: capitalize;
}
#bar-grouped annotation.region {
  left: -6px;
  font-size: 12px;
}
#bar-grouped annotation.quarter {
  left: -60px;
}