Graph not responsive when loaded as hidden

[NynjA]

Hello,

I have a bug that I’ve not been able to fix yet.

I put the chartContainer div in a “toggle” div that is hidden on load of the page.
When I show this div, the graph is not displaying as it should be : only 500px wide.
It only displays as it should when I resize the browser window.

I hope you understand my case.
How can I fix this?

Thank you in advance for your help.

• This topic was modified 10 years, 9 months ago by NynjA.

[Sunil Urs]

Once you toggle you can call chart.render() again and it’ll update its size. Please use the latest beta which contains this fix.

—
Sunil Urs

[NynjA]

Thanks for the quick answer. I’m still a beginner in js though…
So how should I call the chart.render() from another js? Like this:?

// Toggle box
//##########################################
$(document).ready(function(){
$(‘.toggle-trigger’).click(function() {
$(this).next().toggle(‘slow’);
$(this).toggleClass(“active”);
return false;
chart.render();
}).next().hide();
});

Cause it doesn’t seem to work… Even with the latest beta replaced.
Thank you in advance!

• This reply was modified 10 years, 9 months ago by NynjA.

[warria98]

Hi NYnjA did you manage to solve this issue? I am having the exact same problem and I cannot fix it, I have the latest version also…

[Anjali]

Hi,
Call the chart.render() inside the callback function of toggle(). like:

$(this).next().toggle("slow", function() {
    chart.render();
});

—
Anjali

• This reply was modified 10 years, 3 months ago by Anjali.
• This reply was modified 10 years, 3 months ago by Anjali.

[warria98]

will this also work with .animate() callback also?

[Sunil Urs]

Warria,

It should. In case you face any problem with this please create a JSFiddle which reproduces the issue so that we can have a look.

—
Sunil Urs

[warria98]

Thanks Sunil, I got this working I was defining chart inside a function so it didn’t have global scope, oops.

Other than that this fixes it but it seems to “flick” into the correct size, not the prettiest. Do you think you will have a built in fix for this at some point? Thanks for the great work though, canvasjs is a great tool.

[Anjali]

Hi,

You avoid that flicker by setting width and height of chart to it’s container’s dimensions. By doing so you won’t have to use animation callback function. Here is an example.

—
Anjali