Flying Gambit Flying Gambit - 1 month ago 10
AngularJS Question

Why is chart.js not working with angular JS

I am trying to create a chart component in AngularJS (v1.5.8) but for some odd reason chart.js is not getting initialized. http://codepen.io/flyinggambit/pen/eBYezK



angular.module("dashboard", [])
.component("exceptionChart", {
template: "<canvas width='200' height='200' class='{{$ctrl.class}}'></canvas>",
bindings: {
class: '@'
},
controller: function($element) {
this.$postLink = function() {

// code for chart
var ctx = $element.find('canvas')[0];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});



}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<div ng-app="dashboard">
<exception-chart class=""></exception-chart>
</div>


<canvas id="myChart" width="200" height="200"></canvas>





However the code for the same works in vanilla JS. http://codepen.io/flyinggambit/pen/MbWOmG

What is the reason for this ? How can I fix this ?

Answer

You can't have the canvas as the root element and then try to access it in the way you're doing it.

Wrap it in another div to quickly solve your problem:

"<div><canvas width='200' height='200' class='{{$ctrl.class}}'></canvas></div>"