Resize c3.js chart after removing "display:none" form div

Question

So i have a function to pre load element and use "display:none" to hidden an chart

<div class="col-sm-9 topTenWebCus" ></div>

javscript:

$(document).ready(function() {
    window.setTimeout(function(){
        $(".topTenWebCus").css("display","none");
        },200);
});

And afterward i got another onclick function to remove the "display:none" css

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                    });

It works fine. but it wouldn't re-size itself even i have insert bootstrap into the website.

I am thinking about to use inner function to do .resize() but it's not working, is there better way to fix the resize issue?

Update 1:

The chart would resize itself if user change zoom rate.

I just figure out one important thing, the chart display correctly if the zoom rate is 100%, but if the user change the zoom rate the chart will not resize to a appropriate size.

Update2 I try to use .show() and .hide() but no luck

Sample solution

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                          chart.flush() // chart depends on your chart's name it could be anything like charrt112.flush()
                    });

Answer 1

Your problem doesn't seem to be with boorstrap. Check this jsFiddle, your exact code works fine for showing the correct column width after displaying back.

Without more information on what charting library you are using, my guess is like most charting libraries your's gets its size when it is first rendered. When the div size changes, you will have to manually call things like resize , redraw or referesh etc on your chart object depending on your chart library.

If you can point out your chart library, or even better update my jsFiddle example to show your chart, it will be easier to figure out how you can make the chart refit.

Update for c3.js

After you re-display your div try calling chart.flush(); and see if it resizes correctly.

$("#buttonFire").click(function(){
    $(".topTenWeb30d").css("display","none");
    $(".topTenWebCus").css("display","block");
    chart.flush(); // use reference to your chart object
});

If the chart.flush() does not work, as a last option you can set the width, height of the chart dynamically based on your div dimensions like so.

chart.resize({
  height: $(".topTenWebCus").innerHeight(),
  width: $(".topTenWebCus").innerWidth()
});

Answer 2

I think you require this if I am understanding you correctly:

$(window).resize(function(){
   $("#buttonFire").trigger('click');
});