Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Jon Eyrick.
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.