.elasticX(true) doesn't work dc.js - dc.js

Question

I have a Composite Linechart
The .elasticX(true) does not work :/ Could Someone help me
var composite = dc.compositeChart("#durationline-chart");
composite.width(1500).height(350)
.group(Durations)
.brushOn(true)
.yAxisLabel("Duration")
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
.elasticY(true)
.elasticX(true)
.renderlet(function(chart) {
chart.selectAll("g.x text")
.attr('transform', "rotate(+20)");
})
.compose([
dc.lineChart(composite)
.group(Testcase_Time, "Time")
.colors('#1E90FF'),
dc.lineChart(composite)
.group(Testcase_Smartkey, "Smartkey")
.colors('red')]);
EDIT: Here is the jsfiddle: https://jsfiddle.net/gordonwoodhull/o9xx3fmm/

Answer 1

I think you mean the elastic is not kicking in when the chart is filtered.
This is because crossfilter still returns bins if they are empty - they just have value zero. So dc.js still detects the domain of all the bins, including the empty ones.
What you can do is use a fake group to remove the empty bins
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
var filtered_group = remove_empty_bins(group);
chart.dimension(dim)
.group(filtered_group)
...
Then dc.js will detect only the domain of non zero values. More details in the FAQ.
You have to apply this to all groups that make up the chart.