You are concerned by this issue. Your graph does not render because, as you pointed out, the graph has a height and width of 0. I had this problem while working with tabsets, and I solved it by redrawing the graph with a directive like this :

app.directive('graphCanvasRefresh', ['$compile', function($compile) { function link(scope, elem, attrs) { function refreshDOM() { var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>'; var el = angular.element(markup); compiled = $compile(el); elem.html(''); elem.append(el); compiled(scope); }; // Refresh the DOM when the attribute value is changed scope.$watch(attrs.graphCanvasRefresh, function(value) { refreshDOM(); }); // Clean the DOM on destroy scope.$on('$destroy', function() { elem.html(''); }); }; return { link: link }; }]); 

Hope this can help you

You are concerned by this issue. Your graph does not render because, as you pointed out, the graph has a height and width of 0. I had this problem while working with tabsets, and I solved it by redrawing the graph with a directive like this :

app.directive('graphCanvasRefresh', ['$compile', function($compile) { function link(scope, elem, attrs) { function refreshDOM() { var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>'; var el = angular.element(markup); compiled = $compile(el); elem.html(''); elem.append(el); compiled(scope); }; // Refresh the DOM when the attribute value is changed scope.$watch(attrs.graphCanvasRefresh, function(value) { refreshDOM(); }); // Clean the DOM on destroy scope.$on('$destroy', function() { elem.html(''); }); }; return { link: link }; }]); 

Hope this can help you