dc.js row chart with negative values doesn't show full rows - d3.js

Question

I created a row chart to show some negative values. I'd like to place the chart right next to another row chart with positive values since stacking isn't supported for the row chart.
The problem is, that the rows aren't shown completely. elasticX seems to be the problem. The x-axis scale range is limited from the lowest value to the highest.
I've created an snippet to demonstrate the bahaviour.
In the example the range is from -2000 to -800 which is the lowes value. But I obviously need it to be -2000 to 0.
I didn't get a solution. So any help would be much appreciated!
var data = [{
"name": "A",
"out": 1000
}, {
"name": "B",
"out": 1200
}, {
"name": "C",
"out": 1500
}, {
"name": "D",
"out": 800
}, {
"name": "E",
"out": 2000
}];
var rowChart = dc.rowChart("#rowChart");
var ndx = crossfilter(data),
nameDimension = ndx.dimension(function(d) {
return d.name;
}),
outGroup = nameDimension.group().reduceSum(function(d) {
return -d.out;
});
rowChart.width(300)
.height(500)
.margins({top: 10, right: 10, bottom: 30, left: 50})
.dimension(nameDimension)
.group(outGroup)
.elasticX(true)
.xAxis().ticks(2);
dc.renderAll();
<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.5/crossfilter.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css"/>
<div id="rowChart"> </div>

Answer 1

This bug was reported as #879 and was fixed in 2.0 beta 32.
Problem is, that the 2.1.0-dev version is quite old, can't be updated, and can't be deprecated due to an apparent bug in npm.
A development tag makes absolutely no sense! So the develop branch can't be distributed via a real CDN. If you want to use the development version of dc.js, you need to specify the dependency in your package.json using github url syntax:
"dc": "dc-js/dc.js#develop"
Or if you're not using npm, and a fake CDN is acceptable, you can use:
https://cdn.rawgit.com/dc-js/dc.js/develop/dc.js
Snippet corrected by using 2.0 beta 33 below.
Hopefully we'll push a real version 2.1 soon and 2.1.0-dev will get buried.
var data = [{
"name": "A",
"out": 1000
}, {
"name": "B",
"out": 1200
}, {
"name": "C",
"out": 1500
}, {
"name": "D",
"out": 800
}, {
"name": "E",
"out": 2000
}];
var rowChart = dc.rowChart("#rowChart");
var ndx = crossfilter(data),
nameDimension = ndx.dimension(function(d) {
return d.name;
}),
outGroup = nameDimension.group().reduceSum(function(d) {
return -d.out;
});
rowChart.width(300)
.height(500)
.margins({top: 10, right: 10, bottom: 30, left: 50})
.dimension(nameDimension)
.group(outGroup)
.elasticX(true)
.xAxis().ticks(2);
dc.renderAll();
<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.5/crossfilter.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.33/dc.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.33/dc.css"/>
<div id="rowChart"> </div>

Answer 2

I notice that the external scripts are in the wrong order - crossfilter.js relies on d3.js and therefore it should come after but before dc.js; perhaps that is why the chart isn't rendering correctly.