Rendering messed up when chart is loaded hidden

[gregoff]

Hi,

If i have a chart in a div which is hidden with css when the page loads, the rendering is totally messed up if I decide to toggle the div.

All i do is to have this:

<style>
.myChart { display: none }
</style>

Then .myChart is added to the actual div containing the chart. If i then have a jQuery function running:

$(‘myChart’).toggle();

The whole render of the chart is very strange. Maybe there’s a workaround?

[Bivek Singh]

@gregoff

Since the Container is not displayed initially, chart takes the default values for width and height.
To show the chart with given height and width of the container, just re-render the chart once the chart container is displayed. Here is a JSFiddle for same.

You can also take a look at following examples if you’re working on Bootstrap:
Example 1,
Example 2
Example 3

——
Bivek Singh
Team CanvasJS

[gregoff]

True, it all makes sense that width/height calculation are incorrect when not shown.

Thanks for your jsFiddle examples! Very helpful!