NVD3 Charts not rendering correctly in hidden tab

Question

I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at.

The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered properly.

Presumably this is because the hidden field does not have dimensions until it is made visible. In fact if I resize the window the chart will correct it's proportions, and render so that it fills the available width.

I can fix this problem by explicitly defining the chart size via css, but this defeats the responsive aspect of the charts.

Can anyone tell me how to trigger the same NVD3 event which gets activated when the window resizes? That way I can bind it to the selection of a new tab, and hopefully remedy the rendering issue.

Answer 1

I figured out how to trigger the resize event I needed. In my case the tabs are driven by bootstrap. So I simply modified my bootstrap show tab event to trigger a page resize event as well. It's a little indirect, but it gets the job done:

jQuery('#myTab a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
    jQuery(window).trigger('resize'); // Added this line to force NVD3 to redraw the chart
})