.elasticX(true) doesn't work 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.