As mentioned by @Martin, there is an issue with Chart.js where the chart is not displayed when initialized in a hidden DOM element (its height and width remain at 0px even after the element is shown).
You can find more information on this issue here.
If you are facing challenges with components like tabs that are initialized as hidden, I have come up with a homemade solution. I created a directive that compiles the canvas element so that it can be refreshed when needed (e.g., when the tab is opened). In my controller, I manually change an attribute on tab change to trigger the refresh.
Below is the code for my directive:
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
};
}]);
This solution may not be elegant, but it works well until Chart.js is updated. Hopefully, it can assist someone experiencing similar issues.