Forked from Variance Charts's Pen Grouped Bar Example.
A Pen by Jon Eyrick on CodePen.
Forked from Variance Charts's Pen Grouped Bar Example.
A Pen by Jon Eyrick on CodePen.
<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> |
#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; | |
} |