rendering nvd3-line-chart inside angular-ui tab

Question

I am trying to render a linechart using https://github.com/cmaurer/angularjs-nvd3-directives inside a angular-ui tab.

<tabset>
  <tab heading="tab1">
    <nvd3-line-chart data="exampleData"></nvd3-line-chart>
  </tab>
  <tab heading="tab2">
    <nvd3-line-chart data="exampleData2"></nvd3-line-chart>
  </tab>
</tabset>

The first tab renders the graph, however when I select the second tab, the graph is not rendered. As soon as I resize the window, the graph appears as it is re-rendered by the directive on window.resize.

How can I get the graph in tab B to render automatically?

(I already tried triggering a window resize event on tab change. It felt very dirty and didn't work)

Ivan Ivan · Accepted Answer · 2014-09-07T14:44:04

I solved issue by refreshing all charts:

<tab select="refreshCharts()">

and then

$scope.refreshCharts = function () {
        for (var i = 0; i < nv.graphs.length; i++) {
            nv.graphs[i].update();
        }
    };

Probably it's a good idea to pass charts to update as arguments to avoid unnecessary redraws.

rendering nvd3-line-chart inside angular-ui tab

2 Answers