Difference between hiding a div initially and hiding it dynamically


I have a div that contains a pie chart, which shows the distribution of a particular statistic among cities. That was a bit unnecessary.

I want to show that pie only when Location is selected in my drop-down menu. But when I initially hide it and load it again, it doesn't fit to the div and overflows.

Here is the jsfiddle

$("#pie").hide(); // this line will be removed in second example

But when I initially show it and then hide and show again, there is no problem.

second fiddle

It is very annoying and I don't have any idea about this.

hide #pie after .highcharts



You need to give #pie a specific width, because highcharts is designed to fill the space it has.

#pie {
    width: 300px;


By : watson

This video can help you solving your question :)
By: admin