Reputation: 2866
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;
});
Upvotes: 4
Views: 2043
Reputation: 1432
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.
Upvotes: 0
Reputation: 1971
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.
Upvotes: 2
Reputation: 16197
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.
Upvotes: -1