Home › forums › Using CanvasJS › Line chart gets right cut when using in jqueryui tabbed pannel
Tagged: chart broken jqueryui tabbed panel
This topic contains 2 replies, has 2 voices, and was last updated by transcedentalia 4 years, 9 months ago.
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 
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, 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.
You must be logged in to reply to this topic.