Home forums Using CanvasJS Line chart gets right cut when using in jqueryui tabbed pannel

This topic contains 2 replies, has 2 voices, and was last updated by  transcedentalia 2 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6914

    transcedentalia
    Participant

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

    Anjali
    Participant

    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

    #7008

    transcedentalia
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.