Chart in div hidden

[anty]

Hi,

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 ?

Thanks.

(Sorry for my english)

[Sunil Urs]

Anty,

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

—
Sunil

[Niftee]

Hi Sunil,

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

Thanks for your work!

[syduck]

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",
			      title:{
			       fontSize: 30,
			       text: "Activity",       
			     },

[Sunil Urs]

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

[ebrewer]

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

[Adithya Menon]

@ebrewer,

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').on("shown.bs.tab",function(){
      ct1();
      $('#bs-tab2').off();//to remove the binded event after initial rendering
}); 

Here is the working code for the same.

—
Adithya Menon
Team CanvasJS