bar-charts.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>'
categories: [Charts]
layout: page
title: Bar Charts
resource: true
url-js-extra: ['https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js']
---
<h2>Vertical Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-vertical.html id="verticalBarChart" %}
  </div>
</div>
<h2>Grouped Vertical Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-vertical-group.html id="groupedVerticalBarChart" %}
  </div>
</div>
<h2>Stacked Vertical Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-vertical-stack.html id="stackedVerticalBarChart" %}
  </div>
</div>
<h2>Horizontal Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-horizontal.html id="horizontalBarChart" %}
  </div>
</div>
<h2>Grouped Horizontal Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-horizontal-group.html id="groupedHorizontalBarChart" %}
  </div>
</div>
<h2>Stacked Horizontal Bar Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    {% include widgets/charts/bar-horizontal-stack.html id="stackedHorizontalBarChart" %}
  </div>
</div>