Home Forums Chart Support Chart in div hidden

Chart in div hidden

Viewing 7 posts - 1 through 7 (of 7 total)
  • #5488


    I have a problem when I load canvasjs in div which is hidden.

    The default width no take 100% of my hidden tab, is only take the right width when the tab is open.

    Another method can be resize manually the chart on window resize event, but I don’t know if it is possible to do that ?


    (Sorry for my english)



    As discussed over chat, I’ll consider implementing this feature in the next version. Will update you on the same once it is implemented.



    Hi Sunil,

    Is there any update on when the next version with this fix will be released?

    Thanks for your work!


    you can specify the height and width of the graph in the code, that way when the graph renders in a hidden div it will have the proper height and width. You can only specify in pixels though and not percent.

    				  height: 550, //in pixels
    				  width: 600,
    			      zoomEnabled: true,      
    			      colorSet:  "colorSet",
    			       fontSize: 30,
    			       text: "Activity",       

    Since v1.4 you can also call render method once it becomes visible and chart updates its size according to its container element.

    Sunil Urs


    How do you get a reference to the already created chart in this case to call the render method?



    In the case of bootstrap tabs, since the second tab is not displayed initially, the second chart is rendered when the shown.bs.tab event is fired by bootstrap using the chart.render method as shown in the code-snippet below,

          $('#bs-tab2').off();//to remove the binded event after initial rendering

    Here is the working code for the same.

    chart within bootstrap tab

    Adithya Menon
    Team CanvasJS

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

You must be logged in to reply to this topic.