Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resize chart height on parent div resize #1450

Open
ghost opened this issue Oct 29, 2015 · 9 comments
Open

Resize chart height on parent div resize #1450

ghost opened this issue Oct 29, 2015 · 9 comments
Labels
C-bug Category: This is a bug

Comments

@ghost
Copy link

ghost commented Oct 29, 2015

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
@pqvst
Copy link

pqvst commented Nov 12, 2015

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");
    }
});

@ghost
Copy link
Author

ghost commented Nov 12, 2015

👍

@martingraham
Copy link

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

@pqvst
Copy link

pqvst commented Nov 12, 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.

@PatMartin
Copy link

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");

@gnjack
Copy link

gnjack commented Aug 16, 2017

Duplicate of #1076 #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>.

@AlexEscalante
Copy link

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!

timograw pushed a commit to timograw/granite-c3 that referenced this issue Dec 6, 2017
Added property to fix automatic vertical resizing by inserting js fun…
f41ef7e 
…ction on chart resize.

See also c3js/c3#1450 (comment)
@timograw timograw mentioned this issue Dec 6, 2017
Merged
This was referenced Mar 31, 2018
Closed
Closed
@panthony panthony added the C-bug Category: This is a bug label Mar 31, 2018
@richardoptibrium
Copy link

I'm still seeing this problem in 0.7.15

@szb0151
Copy link

szb0151 commented Jun 3, 2021 

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

I'm having this same resize issue, but I'm not sure where you're getting the el value?
This is how my chart is being generated:

private static generateChart = (mountNode: HTMLElement, { chartConfig }: C3ChartProps) =>
    c3.generate({ bindto: mountNode, ...chartConfig });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C-bug Category: This is a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@panthony @AlexEscalante @PatMartin @martingraham @pqvst @gnjack @szb0151 @richardoptibrium