[Chartjs]-Chart.js in AngularJS tabset does not render

by

2👍

✅

As @Martin pointed it out, it is an issue of Chart.js not showing the chart when initiliazed in a hidden DOM element (its height and width remain at 0px even after showing the hidden element).

This issue is tracked here.

I share you my home made solution if you are blocked by components like tabs initialized hidden. I have created a directive in which I compile the canvas element. In order to be able to refresh the element when needed (eg when the tab is opened), I watch an attribute I will manually change on tab change in my controller.

Here is 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
};
}]);

Dirty as hell, but this is a working solution you can use waiting for Chart.js update. Hope it can help someone.

0👍

added some functionally to @bviale answer. 

app.directive('graphCanvasRefresh', function ($compile, $timeout) {
    return {
        scope:{
            labels: "=",
            data: "=",
            type: "=",
            refresh: "="
        },
        link: function (scope, elem, attrs) {

            function refreshDOM() {
                var markup = '<canvas class="chart chart-' + scope.type + '" id="' + scope.type + scope.$id + '" chart-labels="' + scope.labels + '" ' +
                                                'chart-legend="false"  chart-data="' + scope.data +'" ></canvas>';
                var newEl = $compile(markup)(scope.$parent.$new());
                elem.html(newEl);
                scope.refresh = false;
            };

            // Refresh the DOM when the attribute value is changed
            scope.$watch('refresh', function (value) {
                $timeout(
                refreshDOM(), 100);
            });

            // Clean the DOM on destroy
            scope.$on('$destroy', function () {
                elem.html('');
            });
        }
    };

});

Leave a comment