d3.js - 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 had the same issue (charts on multiple tabs), and this is the only thing that I could get to work.

$(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});

I have a feeling, however, that all of the charts are being re-rendered, regardless of whether they are on the active tab (visible) or in the non-selected tabs (hidden).

Does anyone know how to ensure ONLY the active chart gets resized / redrawn?