diff --git a/package.json b/package.json
index deb093d28..3a3b07260 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dc",
-  "version": "3.0.4",
+  "version": "3.0.4-groupstack",
   "license": "Apache-2.0",
   "copyright": "2017",
   "description": "A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js ",
diff --git a/src/bar-chart.js b/src/bar-chart.js
index 03d1581d6..c2a4ed6f0 100644
--- a/src/bar-chart.js
+++ b/src/bar-chart.js
@@ -27,16 +27,21 @@
 dc.barChart = function (parent, chartGroup) {
     var MIN_BAR_WIDTH = 1;
     var DEFAULT_GAP_BETWEEN_BARS = 2;
+    var DEFAULT_GAP_BETWEEN_BAR_SERIES = 5;
     var LABEL_PADDING = 3;
+    var _type = 'dc.BAR_CHART';
 
     var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
 
     var _gap = DEFAULT_GAP_BETWEEN_BARS;
+    var _serieGap = DEFAULT_GAP_BETWEEN_BAR_SERIES;
     var _centerBar = false;
     var _alwaysUseRounding = false;
 
     var _barWidth;
 
+    _chart.type = _type;
+
     dc.override(_chart, 'rescale', function () {
         _chart._rescale();
         _barWidth = undefined;
@@ -46,7 +51,7 @@ dc.barChart = function (parent, chartGroup) {
     dc.override(_chart, 'render', function () {
         if (_chart.round() && _centerBar && !_alwaysUseRounding) {
             dc.logger.warn('By default, brush rounding is disabled if bars are centered. ' +
-                         'See dc.js bar chart API documentation for details.');
+                'See dc.js bar chart API documentation for details.');
         }
 
         return _chart._render();
@@ -86,6 +91,18 @@ dc.barChart = function (parent, chartGroup) {
         return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
     }
 
+    function getCharts () {
+        if (dc.instanceOfChart(parent) && typeof parent.children === 'function') {
+            var children = parent.children();
+            if (children instanceof Array) {
+                return children.filter(function (chart) {
+                    return chart.type === _type;
+                });
+            }
+        }
+        return [];
+    }
+
     function labelXPos (d) {
         var x = _chart.x()(d.x);
         if (!_centerBar) {
@@ -139,12 +156,47 @@ dc.barChart = function (parent, chartGroup) {
 
     function barXPos (d) {
         var x = _chart.x()(d.x);
-        if (_centerBar) {
-            x -= _barWidth / 2;
-        }
-        if (_chart.isOrdinal() && _gap !== undefined) {
-            x += _gap / 2;
+        var charts = getCharts();
+        var chartIndex = charts.indexOf(_chart);
+
+        // A grouped chart
+        if (charts.length > 1) {
+            var numberOfCharts = charts.length;
+            var numberOfBars = _chart.xUnitCount();
+            var barWidth;
+            var barPadding;
+
+            if (_chart.isOrdinal()) {
+                barWidth = (_chart.x().bandwidth() - _chart.serieGap()) / (numberOfCharts);
+            } else {
+                barWidth = ((_chart.xAxisLength() / numberOfBars) -  _chart.serieGap()) / numberOfCharts;
+            }
+
+            if (_gap === undefined) {
+                barPadding = barWidth * (_chart.barPadding());
+            } else {
+                barPadding = _gap;
+            }
+
+            x += chartIndex * (barWidth);
+            if (_chart.isOrdinal()) {
+                x += _chart.serieGap() / 2;
+                x += barPadding / 2;
+            } else if (!_chart.isOrdinal() && _centerBar) {
+                x -= barWidth * numberOfCharts / 2;
+                x += barPadding / 2;
+            }
+
+        // Not a grouped chart
+        } else {
+            if (_centerBar) {
+                x -= _barWidth / 2;
+            }
+            if (_chart.isOrdinal() && _gap !== undefined) {
+                x += _gap / 2;
+            }
         }
+
         return dc.utils.safeNumber(x);
     }
 
@@ -197,14 +249,37 @@ dc.barChart = function (parent, chartGroup) {
     function calculateBarWidth () {
         if (_barWidth === undefined) {
             var numberOfBars = _chart.xUnitCount();
+            var charts = getCharts();
+
+            // A grouped chart
+            if (charts.length > 1) {
+                var numberOfCharts = charts.length,
+                    barPadding,
+                    barWidth;
+
+                if (_chart.isOrdinal()) {
+                    barWidth = (_chart.x().bandwidth() - _chart.serieGap()) / (numberOfCharts);
+                } else {
+                    barWidth = ((_chart.xAxisLength() / numberOfBars) -  _chart.serieGap()) / numberOfCharts;
+                }
+
+                if (_gap === undefined) {
+                    barPadding = barWidth * (_chart.barPadding());
+                } else {
+                    barPadding = _gap;
+                }
+                _barWidth = Math.floor(barWidth - barPadding);
 
-            // please can't we always use rangeBands for bar charts?
-            if (_chart.isOrdinal() && _gap === undefined) {
-                _barWidth = Math.floor(_chart.x().bandwidth());
-            } else if (_gap) {
-                _barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
+            // Not a grouped chart
             } else {
-                _barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
+                // please can't we always use rangeBands for bar charts?
+                if (_chart.isOrdinal() && _gap === undefined) {
+                    _barWidth = Math.floor(_chart.x().bandwidth());
+                } else if (_gap) {
+                    _barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
+                } else {
+                    _barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
+                }
             }
 
             if (_barWidth === Infinity || isNaN(_barWidth) || _barWidth < MIN_BAR_WIDTH) {
@@ -214,30 +289,55 @@ dc.barChart = function (parent, chartGroup) {
     }
 
     _chart.fadeDeselectedArea = function (brushSelection) {
-        var bars = _chart.chartBodyG().selectAll('rect.bar');
-
-        if (_chart.isOrdinal()) {
-            if (_chart.hasFilter()) {
-                bars.classed(dc.constants.SELECTED_CLASS, function (d) {
-                    return _chart.hasFilter(d.x);
-                });
-                bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
-                    return !_chart.hasFilter(d.x);
-                });
-            } else {
-                bars.classed(dc.constants.SELECTED_CLASS, false);
-                bars.classed(dc.constants.DESELECTED_CLASS, false);
-            }
-        } else if (_chart.brushOn() || _chart.parentBrushOn()) {
-            if (!_chart.brushIsEmpty(brushSelection)) {
-                var start = brushSelection[0];
-                var end = brushSelection[1];
+        var charts = getCharts();
+        var bars;
+
+        // A grouped chart
+        if (charts.length > 1 && _chart.isOrdinal()) {
+            charts.forEach(function (chart, i) {
+                bars = chart.chartBodyG().selectAll('rect.bar');
+
+                if (chart.isOrdinal()) {
+                    if (chart.hasFilter()) {
+                        bars.classed(dc.constants.SELECTED_CLASS, function (d) {
+                            return chart.hasFilter(d.x);
+                        });
+                        bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
+                            return !chart.hasFilter(d.x);
+                        });
+                    } else {
+                        bars.classed(dc.constants.SELECTED_CLASS, false);
+                        bars.classed(dc.constants.DESELECTED_CLASS, false);
+                    }
+                }
+            });
 
-                bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
-                    return d.x < start || d.x >= end;
-                });
-            } else {
-                bars.classed(dc.constants.DESELECTED_CLASS, false);
+        // Not a grouped chart
+        } else {
+            bars = _chart.chartBodyG().selectAll('rect.bar');
+            if (_chart.isOrdinal()) {
+                if (_chart.hasFilter()) {
+                    bars.classed(dc.constants.SELECTED_CLASS, function (d) {
+                        return _chart.hasFilter(d.x);
+                    });
+                    bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
+                        return !_chart.hasFilter(d.x);
+                    });
+                } else {
+                    bars.classed(dc.constants.SELECTED_CLASS, false);
+                    bars.classed(dc.constants.DESELECTED_CLASS, false);
+                }
+            } else if (_chart.brushOn() || _chart.parentBrushOn()) {
+                if (!_chart.brushIsEmpty(brushSelection)) {
+                    var start = brushSelection[0];
+                    var end = brushSelection[1];
+
+                    bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
+                        return d.x < start || d.x >= end;
+                    });
+                } else {
+                    bars.classed(dc.constants.DESELECTED_CLASS, false);
+                }
             }
         }
     };
@@ -259,7 +359,18 @@ dc.barChart = function (parent, chartGroup) {
     };
 
     dc.override(_chart, 'onClick', function (d) {
-        _chart._onClick(d.data);
+        var charts = getCharts();
+        // A grouped chart
+        if (charts.length > 1) {
+            charts.forEach(function (chart, i) {
+                var filter = chart.keyAccessor()(d.data);
+                chart.filter(filter);
+            });
+            _chart.redrawGroup();
+        // Not a grouped chart
+        } else {
+            _chart._onClick(d.data);
+        }
     });
 
     /**
@@ -315,6 +426,24 @@ dc.barChart = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     * Manually set fixed gap (in px) between bar groups instead of relying on the default auto-generated
+     * gap.  Only applicable for grouped bar charts.
+     * @name serieGap
+     * @memberof dc.barChart
+     * @instance
+     * @param {Number} [serieGap=5]
+     * @return {Number}
+     * @return {dc.barChart}
+     */
+    _chart.serieGap = function (serieGap) {
+        if (!arguments.length) {
+            return _serieGap;
+        }
+        _serieGap = serieGap;
+        return _chart;
+    };
+
     _chart.extendBrush = function (brushSelection) {
         if (brushSelection && _chart.round() && (!_centerBar || _alwaysUseRounding)) {
             brushSelection[0] = _chart.round()(brushSelection[0]);
diff --git a/web/examples/bar-grouped-multi.html b/web/examples/bar-grouped-multi.html
new file mode 100644
index 000000000..a073b96b9
--- /dev/null
+++ b/web/examples/bar-grouped-multi.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Two Grouped Bar Chart Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
+
+<div id="chart1">
+    <strong>Ordinal chart</strong>
+    <div class="reset" style="visibility: hidden">selected: <span class="filter"></span>
+        <a href="javascript:chart1.filterAll();dc.redrawAll();">reset</a>
+    </div>
+</div>
+<div id="chart2">
+    <strong>Ordinal chart</strong>
+    <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
+        <a href="javascript:chart2.filterAll();dc.redrawAll();">reset</a>
+    </div>
+</div>
+<div id="chart3">
+    <strong>Non ordinal chart with centerbar and brush on</strong>
+    <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
+        <a href="javascript:chart3.filterAll();dc.redrawAll();">reset</a>
+    </div>
+</div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var chart1 = dc.compositeChart("#chart1");
+var chart2 = dc.compositeChart("#chart2");
+var chart3 = dc.compositeChart("#chart3");
+var subCharts1 = [];
+var subCharts2 = [];
+var subCharts3 = [];
+d3.csv("../crime/crime.csv").then(function(crime) {
+
+    var years = [];
+    var types = [];
+    var citys = [];
+
+    // Tweak the data a litle bit
+    crime = crime.filter(function onlyIncidentsAndLaterYears (value, index, self) {
+        return (value.sub_type === "Actual incidents" && parseInt(value.year) >= 2008);
+    }).map(function pivotData (value){
+        return {'year': value.year, 'city': value.city, 'type': value.type, 'incidents': parseInt(value.number)}
+    });
+
+    crime = crime.map(function evenOutBetweenTypes (value) {
+        if(value.type === "Total, all violations"){
+            value.incidents = Math.round(value.incidents/25);
+        } else if(value.type === "Total violent Criminal Code violations") {
+            value.incidents = Math.round(value.incidents/5);
+        } else if(value.type === "Homicide") {
+            value.incidents = Math.round(value.incidents*100);
+        }
+        return value;
+    });
+
+    // Get all unique years
+    years = crime.map(function getYears (value){
+        return value.year;
+    })
+    .filter(function onlyUnique (value, index, self) {
+        return self.indexOf(value) === index;
+    })
+
+    // Get all unique citys
+    citys = crime.map(function getYears (value){
+        return value.city;
+    })
+    .filter(function onlyUnique (value, index, self) {
+        return self.indexOf(value) === index;
+    })    
+
+    // Get all unique types
+    types = crime.map(function getYears (value){
+        return value.type;
+    })
+    .filter(function onlyUnique (value, index, self) {
+        return self.indexOf(value) === index;
+    })
+
+
+    var ndx  = crossfilter(crime);
+
+    function sel_stack (i) {
+        return function(d) {
+            return d.value[i];
+        };
+    }
+
+    // Setup chart1
+    var chart1Dim = ndx.dimension(function(d) {return d.city;})
+    var chart1Group = chart1Dim.group().reduce(
+        function add (p, v) {
+                p[v.type] += parseInt(v.incidents);
+                return p;
+            },
+            function remove (p, v) {
+                p[v.type] -= parseInt(v.incidents);
+                return p;
+            },
+            function init (p, v) {
+                var ret = {};
+                for(var i = 0; i < types.length; i++){
+                    ret[types[i]] = 0;
+                }
+                return ret;
+            }
+        );
+
+    for(var i = 0; i < types.length; i++){
+        var chart = dc.barChart(chart1);
+            chart
+                .dimension(chart1Dim)
+                .group(chart1Group, types[i])
+                .valueAccessor(sel_stack(types[i]))
+                .controlsUseVisibility(true);
+
+        subCharts1.push(chart);
+    }
+
+    chart1
+        .width(768)
+        .height(480)
+        .dimension(chart1Dim)
+        .group(chart1Group, 'Dummy group to make ordinal composite charts work')
+        .x(d3.scaleBand())
+        .xUnits(dc.units.ordinal)
+        // .brushOn(false)
+        .yAxisLabel("This is the Y Axis!")
+        .elasticY(true)
+        .legend(dc.legend().x(100).y(10).itemHeight(13).gap(5))
+        // .ordinalColors(d3.schemeDark2)
+        .shareColors(true)
+        .controlsUseVisibility(true)
+        .margins({ top: 10, right: 60, bottom: 100, left: 60 })
+        // .title(function(d, i) {
+        //     var measure = this.layer;
+        //     var val = d.value[measure];
+        //     return  this.layer + " - " + d.key + ": " + val;
+
+        // })
+        // or
+        .shareTitle(false)
+        .compose(subCharts1)
+
+    chart1.on('pretransition', function(chart){
+        // Rotate X-axis
+        chart.selectAll("g.axis.x text")
+        .style("text-anchor", "start")
+        .attr("dx", "0.5em")
+        .attr("dy", "-0.5em")
+        .attr("transform", "rotate(90)")
+    });
+
+    // Setup chart2
+    var chart2Dim = ndx.dimension(function(d) {return d.year;})
+    var chart2Group = chart2Dim.group().reduce(
+            function add (p, v) {
+                p[v.type] += parseInt(v.incidents);
+                return p;
+            },
+            function remove (p, v) {
+                p[v.type] -= parseInt(v.incidents);
+                return p;
+            },
+            function init (p, v) {
+                var ret = {};
+                for(var i = 0; i < types.length; i++){
+                    ret[types[i]] = 0;
+                }
+                return ret;
+            }
+        );
+
+    for(var i = 0; i < types.length; i++){
+        var chart = dc.barChart(chart2);
+            chart
+                .dimension(chart2Dim)
+                .group(chart2Group, types[i])
+                .valueAccessor(sel_stack(types[i]))
+                .controlsUseVisibility(true);
+
+        subCharts2.push(chart);
+    }
+
+    chart2
+        .width(768/2)
+        .height(480)
+        .dimension(chart2Dim)
+        .group(chart2Group, 'Dummy group to make ordinal composite charts work')
+        .x(d3.scaleBand())
+        .xUnits(dc.units.ordinal)
+        .yAxisLabel("This is the Y Axis!")
+        .elasticY(true)
+        // .ordinalColors(d3.schemeDark2)
+        .shareColors(true)
+        .controlsUseVisibility(true)
+        .title(function(d, i) {
+            var measure = this.layer;
+            var val = d.value[measure];
+            return  this.layer + " - " + d.key + ": " + val;
+
+        })
+        // or
+        // .shareTitle(false)
+        .compose(subCharts2)
+
+    // Setup chart3
+    var chart3Dim = ndx.dimension(function(d) {return d.year;})
+    var chart3Group = chart3Dim.group().reduce(
+            function add (p, v) {
+                p[v.type] += parseInt(v.incidents);
+                return p;
+            },
+            function remove (p, v) {
+                p[v.type] -= parseInt(v.incidents);
+                return p;
+            },
+            function init (p, v) {
+                var ret = {};
+                for(var i = 0; i < types.length; i++){
+                    ret[types[i]] = 0;
+                }
+                return ret;
+            }
+        );
+
+    for(var i = 0; i < types.length; i++){
+        var chart = dc.barChart(chart3);
+            chart
+                .dimension(chart3Dim)
+                .group(chart3Group, types[i])
+                .valueAccessor(sel_stack(types[i]))
+                .centerBar(true)
+                .serieGap(5)
+                .controlsUseVisibility(true);
+
+        subCharts3.push(chart);
+    }
+
+    chart3
+        .width(768/2)
+        .height(480)
+        .dimension(chart3Dim)
+        // .group(chart3Group, 'Dummy group to make ordinal composite charts work')
+        // .x(d3.scaleBand())
+        // .xUnits(dc.units.ordinal)
+        .x(d3.scaleLinear().domain([2007, 2012]))
+        .xUnits(function () {return 5;})
+        .yAxisLabel("This is the Y Axis!")
+        .legend(dc.legend().x(550).y(10).itemHeight(13).gap(5))
+        .elasticY(true)
+        // .ordinalColors(d3.schemeDark2)
+        .shareColors(true)
+        .controlsUseVisibility(true)
+        .title(function(d, i) {
+            var measure = this.layer;
+            var val = d.value[measure];
+            return  this.layer + " - " + d.key + ": " + val;
+
+        })
+        // or
+        // .shareTitle(false)
+        .compose(subCharts3)
+
+    chart3.xAxis().tickFormat(function(v) { return v;});
+    chart3.xAxis().tickValues([2008, 2009, 2010, 2011]);
+
+
+    chart1.render();
+    chart2.render();
+    chart3.render();
+});
+
+</script>
+
+</div>
+</body>
+</html>
diff --git a/web/examples/bar-grouped.html b/web/examples/bar-grouped.html
new file mode 100644
index 000000000..f283c1743
--- /dev/null
+++ b/web/examples/bar-grouped.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Grouped Bar Chart Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
+<div id="test"></div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var compositeChart = dc.compositeChart("#test");
+var subCharts = [];
+d3.csv("morley.csv").then(function(morley) {
+
+    var experiments = [];
+
+    // Filter out the first 9 runs
+    morley = morley.filter(function onlyFirst9Runs (value) {
+        return parseInt(value.Run) <= 9;
+    });
+
+    // Get all unique experiments and assign id, name and label
+    experiments = morley.map(function getExperiments (value){
+        return  value.Expt;
+    })
+    .filter(function onlyUnique (value, index, self) {
+        return self.indexOf(value) === index;
+    })
+    .map(function addLabelEtc (value){
+        return  {id: value, name: "Expt" + value, label: "Experiment " + value};
+    })
+
+    var ndx  = crossfilter(morley),
+        dim = ndx.dimension(function(d) {return "Run " + d.Run;}),
+        experimentsGroup = dim.group().reduce(
+            function add (p, v) {
+                p[v.Expt] += parseInt(v.Speed);
+                return p;
+            },
+            function remove (p, v) {
+                p[v.Expt] -= parseInt(v.Speed);
+                return p;
+            },
+            function init (p, v) {
+                var ret = {};
+                ret.count = 0;
+                for(var i = 0; i < experiments.length; i++){
+                    ret[experiments[i].id] = 0;
+                }
+                return ret;
+            }
+        );
+
+    function sel_stack (i) {
+        return function(d) {
+            return d.value[i];
+        };
+    }
+
+    for(var i = 0; i < experiments.length; i++){
+        var chart = dc.barChart(compositeChart);
+        chart
+            .dimension(dim)
+            .group(experimentsGroup, experiments[i].label)
+            // .barPadding(0.0)
+            // .serieGap(0)
+            .centerBar(true)
+            .valueAccessor(sel_stack(experiments[i].id));
+
+        subCharts.push(chart);
+    }
+
+    compositeChart
+        .width(768)
+        .height(480)
+        .x(d3.scaleBand())
+        .xUnits(dc.units.ordinal)
+        .brushOn(false)
+        .yAxisLabel("This is the Y Axis!")
+        .dimension(dim)
+        .group(experimentsGroup, 'Dummy group to make ordinal composite charts work')
+        .title(function(d, i) {
+            var measure = this.layer.replace("Experiment ", "");
+            var val = d.value[measure];
+            return  this.layer + " - " + d.key + ": " + val;
+
+        })
+        // or
+        // .shareTitle(false)
+        .compose(subCharts)
+
+    compositeChart.render();
+});
+
+</script>
+
+</div>
+</body>
+</html>