Composite Chart Not Rescaling Bar Width

[erikreedstrom]

I have been using the following to rescale bar widths when resizing a full-width chart, where width is assigned by the anchor set at 100% in CSS:

chart.on('preRender', function(){
    chart.rescale();
});

$("#some-chart").on("resize", function(){
    chart.render();
});

Which works perfectly if chart is a bar chart. However, if the bar chart is part of a composition, where chart is the composite chart, bar widths no longer rescale.

It seems that _chart.xAxisLength() in calculateBarWidth is not reflecting the new width.

[gordonwoodhull]

Thanks for filing this. I agree it's a bug and I'll take a look for 2.0, as I'm looking at a lot of related stuff.

In the meanwhile, you might have better luck asking for workarounds on the mailing list, as I know a lot of people are doing similar stuff.

[gordonwoodhull]

Indeed it looks like each of width, height, and margins needs to be propagated to children when it is set, and not just in compose.

[r4j4h]

+1 Ran into this today

[paloteb]

It's almost two years late but it can be fixed if you assign the xAxisLength of the composite chart to the xAxisLength of the child bar charts:

childBarChart.xAxisLength = compositeChart.xAxisLength;

[jesper998]

Also ran into this today. Anyone have a workaround?

[gordonwoodhull]

@jesper998, I take it @paloteb's workaround does not work for you? What about manually setting width and height (and margins, if needed) for the child charts? The problem is that they are only getting propagated when compose is first called.

Resizing was not part of the original design of dc.js, so there is a lot of troubleshooting to do.

[jesper998]

Thanks, got it working by setting height and width of children for events "preRender" and "preRedraw" on the composite chart!

[gordonwoodhull]

Awesome!

[dahlbyk]

Here's what I came up with for a more holistic patch for this. @gordonwoodhull thoughts? Would you be interested in a PR for this?

dc.override(dc, 'compositeChart', function (parent, chartGroup) {
    var _chart = dc._compositeChart(parent, chartGroup);

    dc.override(_chart, 'rescale', function () {
        _chart._rescale();

        var _children = _chart.children();
        _children.forEach(function (child) {
            child.rescale();
        });

        return _chart;
    });

    // properties originally passed through in compose()
    ['height', 'width', 'margins'].forEach(function (prop) {
        var _prop = '_' + prop;
        dc.override(_chart, prop, function (value) {
            if (!arguments.length) {
                return _chart[_prop]();
            }

            _chart[_prop](value);

            var _children = _chart.children();
            _children.forEach(function (child) {
                child[prop](value);
            });

            return _chart;
        });
    });

    return _chart;
});

[gordonwoodhull]

This makes a lot of sense and it should be much simpler as part of the library. If you have time, please do file a PR!

[gordonwoodhull]

Fixed by #1365 in 3.1.5