Charts
Interactive Charts
See the Charts.js page interactive charts.
Bar Chart
See the Progress page for color classes.
As the width of the page changes, the width of the bars become smaller/larger in relation to the overall width of the chart.
<div class="c-bar-chart">
<div class="c-bar-chart__grid">
<div class="c-grid__line"></div>
<div class="c-grid__line"></div>
<div class="c-grid__line"></div>
<div class="c-grid__line"></div>
</div>
<div class="c-bar-chart__bars">
<div class="progress">
<div class="progress-bar" style="height: 0;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 1%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 77%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 70%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 40%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 12%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 51%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 22%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 69%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 11%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 30%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 17%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 77%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 70%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 40%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 12%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 51%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 22%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 69%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 11%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 30%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 17%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 77%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 70%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 40%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 12%;"></div>
</div>
<div class="progress">
<div class="progress-bar medium" style="height: 51%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 22%;"></div>
</div>
<div class="progress">
<div class="progress-bar large" style="height: 69%;"></div>
</div>
<div class="progress">
<div class="progress-bar small" style="height: 11%;"></div>
</div>
</div>
</div>