C3: Resize chart height on parent div resize

Created on 29 Oct 2015 · 8Comments · Source: c3js/c3

When resizing the div where the chart is created, the chart automatically resizes horizontally, but not vertically because of this line:

Line 880

$$.selectChart.style('max-height', $$.currentHeight + "px");

Please consider changing this in order to support full resize

C-bug

Source

ghost

Most helpful comment

I'm still seeing this problem in 0.7.15

richardoptibrium on 20 Mar 2020

👍3 😕1

All 8 comments

Indeed. The chart can shrink, but once it's shrunk it won't expand again (because of max-height).
http://i.imgur.com/hbvDUkX.gifv

Once the chart has shrunk it doesn't work to call resize() or flush() either. Workaround:

var el = ...;
var $el = $(el);
c3.generate({
    ...,
    onresize: function () {
        $el.css("max-height", "none");
    }
});

pqvst on 12 Nov 2015

👍3

:+1:

ghost on 12 Nov 2015

That's timely, I have the same issue this very morning!

One extra quirk is that onresize only gets called when the browser window resizes, if it's just a parent div resizing you have to work your own listener/response in somehow

martingraham on 12 Nov 2015

Yes, that's an issue I've also run into now. My charts are contained by divs that may resize even if the browser window doesn't resize. Apparently DOM elements don't fire the resize event. So, the only way to work around that at the moment is to have your own listener. I haven't tested that yet, but I imagine .resize on the chart should work for that once you have your own listener.

pqvst on 12 Nov 2015

I commented out the line (now 881 in the latest version) and vertical expansion now works. However, I am unsure if there will be any hidden problems with this.

$$.selectChart.style('max-height', $$.currentHeight + "px");

PatMartin on 13 Jul 2016

Duplicate of https://github.com/c3js/c3/issues/1076 https://github.com/c3js/c3/issues/842

We worked around the issue by clearing the max-height style after calling resize in our own DOM element resized event handler:

handleElementResize () {
  chart.resize();
  chart.internal.selectChart.style('max-height', 'none');
}

Alternatively, you could clear max-height in the onresized event handler if you only need to resize on window resize. This event handler is not called as a result of a manual chart.resize.

onresized: function fixMaxHeight () {
  this.selectChart.style('max-height', 'none')
}

In #842 @masayuki0812 mentioned

I added max-height because the height of the chart will be wrong when <!DOCTYPE html> is used.

But I haven't noticed any issues yet with the above changes and <!DOCTYPE html>.

gnjack on 16 Aug 2017

👍1

I just forked and removed line 880 to get around this because the hack wouldn't help me. Who knows. Why doesn't someone fix this? There are several other issues opened around it. Or maybe I'm missing something… it's only a line!