d3.js - nvd3 chart error when display:none -
i using nvd3 charting in application. have problem in if div hidden via display:none
before charts rendered, charts throw error, , upon "un-hiding" div, have click on charts them render correctly. there way pre-render charts if div hidden? have tried setting width , height of parent svg before calling chart, 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; });
i figured out how make hidden chart render without needing statically define dimensions of chart area:
nvd3 charts not rendering correctly in hidden tab
this solution depends on using js display hidden content , @ same time trigger resize event forces nvd3 resize visible chart fill parent. in case didn't care seo used display:none; visibility:hidden; work too.
Comments
Post a Comment