[Chartjs]-Load ChartJS via VueJS – ChartJS empty and 0px dimension

by

1👍

✅

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

Leave a comment