nvd3 chart error when display:none

Question

I am currently using nvd3 for charting in my application. I have a problem in that if the div is hidden via display:none before the charts are rendered, the charts will throw an error, and upon "un-hiding" the div, I have to click on the charts to get them to render correctly. Is there any way to pre-render the charts even if the div is hidden? I have tried setting the width and height of the parent svg before calling the chart, but to no avail.

nv.addGraph(function () {
    //chart setup code

    d3.select("#chart svg").attr("width", 300).attr("height", 500);
    d3.select("#chart svg").datum(data).transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

Answer 1

I figured out how to make a previously hidden chart render properly without needing to statically define the dimensions of the chart area:

NVD3 Charts not rendering correctly in hidden tab

This solution also depends on using JS to display the hidden content and at the same time trigger a resize event which forces NVD3 to resize the now visible chart to fill parent. In my case I didn't care about SEO so I used display:none; but visibility:hidden; would work too.

Answer 2

Just add this JavaScript:

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

hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.

Answer 3

You can hide a chart – but still render the graph – using a class like this:

.out-of-sight-and-space{
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
}

You should apply this to the parent of the svg, in your case #chart. When you want to show the chart, remove the class.