spec/html/bar-charts.html in patternfly-sass-3.17.0 vs spec/html/bar-charts.html in patternfly-sass-3.20.0

@@ -136,10 +136,64 @@
   var groupedVerticalBarChart = c3.generate(groupedVerticalBarChartConfig);
 </script>
 
   </div>
 </div>
+<h2>Stacked Vertical Bar Chart</h2>
+<div class="row">
+  <div class="col-lg-4 col-sm-6 col-xs-12">
+    <div id="stackedVerticalBarChart"></div>
+<script>
+  var c3ChartDefaults = $().c3ChartDefaults();
+
+  var chartUrls = [
+    'https://www.google.com',
+    'https://www.yahoo.com',
+    'https://www.bing.com/',
+    'https://duckduckgo.com/'
+  ];
+  var stackedColumnsData = [
+    ['Q1', 400, 250, 375],
+    ['Q2', 355, 305, 300],
+    ['Q3', 315, 340, 276],
+    ['Q4', 180, 390, 190]
+  ];
+  var stackedGroups = [['Q1', 'Q2', 'Q3', 'Q4']];
+  var stackedCategories = ['2013', '2014', '2015'];
+  var stackedColors = {
+    pattern: [
+      $.pfPaletteColors.red,
+      $.pfPaletteColors.blue,
+      $.pfPaletteColors.orange,
+      $.pfPaletteColors.green
+    ]
+  };
+
+  var stackedVerticalBarChartConfig = c3ChartDefaults.getDefaultStackedBarConfig();
+  stackedVerticalBarChartConfig.axis = {
+    x: {
+      categories: stackedCategories,
+      type: 'category'
+    }
+  };
+  stackedVerticalBarChartConfig.bindto = '#stackedVerticalBarChart';
+  stackedVerticalBarChartConfig.color = stackedColors;
+  stackedVerticalBarChartConfig.data = {
+    columns: stackedColumnsData,
+    groups: stackedGroups,
+    type: 'bar',
+    // optional drilldown behavior
+    onclick: function (d, element) {
+      window.location = chartUrls[d.index];
+    },
+    order: null
+  };
+  var stackedVerticalBarChart = c3.generate(stackedVerticalBarChartConfig);
+</script>
+
+  </div>
+</div>
 <h2>Horizontal Bar Chart</h2>
 <div class="row">
   <div class="col-lg-4 col-sm-6 col-xs-12">
     <div id="horizontalBarChart"></div>
 <script>
@@ -229,9 +283,64 @@
       window.location = chartUrls[d.index];
     }
   };
   groupedHorizontalBarChartConfig.color = groupedColors;
   var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
+</script>
+
+  </div>
+</div>
+<h2>Stacked Horizontal Bar Chart</h2>
+<div class="row">
+  <div class="col-lg-4 col-sm-6 col-xs-12">
+    <div id="stackedHorizontalBarChart"></div>
+<script>
+  var c3ChartDefaults = $().c3ChartDefaults();
+
+  var chartUrls = [
+    'https://www.google.com',
+    'https://www.yahoo.com',
+    'https://www.bing.com/',
+    'https://duckduckgo.com/'
+  ];
+  var stackedColumnsData = [
+    ['Q1', 400, 250, 375],
+    ['Q2', 355, 305, 300],
+    ['Q3', 315, 340, 276],
+    ['Q4', 180, 390, 190]
+  ];
+  var stackedGroups = [['Q1', 'Q2', 'Q3', 'Q4']];
+  var stackedCategories = ['2013', '2014', '2015'];
+  var stackedColors = {
+    pattern: [
+      $.pfPaletteColors.red,
+      $.pfPaletteColors.blue,
+      $.pfPaletteColors.orange,
+      $.pfPaletteColors.green
+    ]
+  };
+
+  var stackedHorizontalBarChartConfig = c3ChartDefaults.getDefaultStackedBarConfig();
+  stackedHorizontalBarChartConfig.axis = {
+    rotated: true,
+    x: {
+      categories: stackedCategories,
+      type: 'category'
+    }
+  };
+  stackedHorizontalBarChartConfig.bindto = '#stackedHorizontalBarChart';
+  stackedHorizontalBarChartConfig.color = stackedColors;
+  stackedHorizontalBarChartConfig.data = {
+    columns: stackedColumnsData,
+    groups: stackedGroups,
+    type: 'bar',
+    // optional drilldown behavior
+    onclick: function (d, element) {
+      window.location = chartUrls[d.index];
+    },
+    order: null
+  };
+  var stackedVerticalBarChart = c3.generate(stackedHorizontalBarChartConfig);
 </script>
 
   </div>
 </div>