You must be logged in to post your query.
Home › Forums › Report Bugs › Graph not responsive when loaded as hidden
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.
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
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!
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…
Hi, Call the chart.render() inside the callback function of toggle(). like:
$(this).next().toggle("slow", function() { chart.render(); });
— Anjali
will this also work with .animate() callback also?
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.
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.
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.
You must be logged in to reply to this topic. Login/Register