Michael Kurtz Michael Kurtz - 2 months ago 22
Javascript Question

angular-chart errors during factory initialization

I'm sure I've missed something because I can't get angular-chart to initialize properly. The factory method is erring out during the initialization of the global tooltips.mode value on line 30 of angular-chart.js v.1.0.3. Looking at the code, it seems that this error would be appropriate because the tooltips value is

undefined
at this point.

Chart.defaults.global.tooltips.mode = 'label';


However, there seems to be a lot of success so I'm sure it's me. Here is my basic setup.

index.html

<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="/lib/angular.min.js"></script>
<script src="/lib/Chart.js"></script>
<script src="/lib/angular-chart.js"></script>
<script src="/app/main.js"></script>
</head>

<body ng-controller="RootCtrl">
<!-- this is where content will be injected -->
<div>
<canvas id="averageDistance" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
</div>
</body>
</html>


** main.js **

'use strict';

//create main module
angular.module('App', ['chart.js'])
.controller('RootCtrl', ['$scope',
function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
}]);


The above configuration/$scope properties were taken from http://jtblin.github.io/angular-chart.js/

The page doesn't even load because the angular App gets an injector error when trying to create the chart.js module. I am using AngularJS v1.5.8, Chart.js v2.1.6, and angular-chart.js v1.0.3. What am I missing here?

Answer

Make sure you have refered these 3 libraries

(i)angular.js

(ii)Chart.js

(iii)angular-chart.js

    https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js 
    https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js
    https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.0-alpha8/angular-chart.js

Here is the working DEMO