Chart.js charts wouldn't show or hide with Angular directives ng-show and ng-hide

by

👍:0

Short answer:

Wrapping chart creation in $timeout(with default timeout of 0 ms) works:

Long answer:

$timeout with delay set to 0 removes the necessity to call $apply, because $timeout will trigger another $digest cycle of its own, which in turn will do all the necessary updating.

$scope.output.showChart = true;
$timeout(function(){
    if($scope.lineChart){
       $scope.lineChart.destroy();
    }
    var ctx = document.getElementById("myChart").getContext("2d");
    $scope.lineChart = new Chart(ctx).Line(data, chartConfig);
});

Leave a comment