Line chart gets right cut when using in jqueryui tabbed pannel

• August 22, 2014 at 1:44 pm #6914
  
  transcedentalia

  Hello,

  I’m using jqueryUI tabbed panel and I have to show a line chart in every tab. In all tabs but the first one, the chart gets truncated at right side. I noticed that when clicking the mouse right -> inspect element the chart is rendered properly. From my investigations jqueryui brokes the canvasjs layout, so is there a quick fix for this or do I have to drop jqueryui tabbed panel?

  I forked your jsfiddle and my code is here [0]

  [0] http://jsfiddle.net/transcedentalia/jk0Lac97/3/

  Many thanks,

  • This topic was modified 10 years, 3 months ago by transcedentalia. Reason: jsfiddle link did not appear so I decided not to use the editor link button
  August 28, 2014 at 9:07 pm #7002
  
  Anjali

  Hi,

  Issue was because when you initially render the chart, Tab 2 and Tab 3 will have zero width and height because of which canvasjs takes default width and height. So what we need to do is, call chart.render() whenever a tabs becomes active there by updating the chart’s size.

  Here is the working code http://jsfiddle.net/canvasjs/vzre7gwg/

  —
  Anjali

  August 29, 2014 at 12:21 am #7008
  
  transcedentalia

  Anjali, thank you very much for your response.

  I’ve already solved this issue by moving the content of each div into a dedicated html page. Now I understand why my new approach worked.