Graph not responsive when loaded as hidden

• March 13, 2014 at 7:16 pm #6093
  
  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, 8 months ago by NynjA.
  March 13, 2014 at 9:11 pm #6095
  
  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

  March 13, 2014 at 11:45 pm #6098
  
  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, 8 months ago by NynjA.
  September 7, 2014 at 3:29 pm #7040
  
  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…

  September 8, 2014 at 5:23 pm #7066
  
  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, 2 months ago by Anjali.
  • This reply was modified 10 years, 2 months ago by Anjali.
  September 9, 2014 at 3:52 am #7078
  
  warria98

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

  September 9, 2014 at 1:58 pm #7080
  
  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

  September 9, 2014 at 5:34 pm #7083
  
  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.

  September 10, 2014 at 6:49 pm #7091
  
  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