patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
45 lines (44 loc) • 1.54 kB
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>