Line chart gets right cut when using in jqueryui tabbed pannel

[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, 4 months ago by transcedentalia. Reason: jsfiddle link did not appear so I decided not to use the editor link button

[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

[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.