Haifeng Zhang Haifeng Zhang - 1 month ago 14
AngularJS Question

How to solve "TypeError: Cannot read property 'Chart' of undefined"?

I am working on an Angular(1.5.8) project and use bower installed

highcharts-ng
github link

Added
highcharts-ng
as:

angular.module('myapp',
['highcharts-ng',
// more modules here..
])


In my html file, i use below:

<div class="row">
<highchart id="chart1" config="chartConfig"></highchart>
</div>


In my controller file:
DashboardController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];

function DashboardController ($scope, Principal, LoginService, $state) {
$scope.chartConfig ={
....// configuration details
};
}();


I put the
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

into
index.html


Unfortunately, I got such error:

angular.js:13920 TypeError: Cannot read property 'Chart' of undefined
at initChart (highcharts-ng.js:334)
at linkWithHighcharts (highcharts-ng.js:349)
at highchartsCb (highcharts-ng.js:463)
at processQueue (angular.js:16383)
at angular.js:16399
at Scope.$eval (angular.js:17682)
at Scope.$digest (angular.js:17495)
at Scope.$apply (angular.js:17790)
at done (angular.js:11831)
at completeRequest (angular.js:12033)


Can anyone shed some light on this please?

Details of
chartConfig
, it is a copy from https://github.com/pablojim/highcharts-ng which I use it for testing highcharts works or not :

function DashboardController ($scope) {
//This is not a highcharts object. It just looks a little like one!
$scope.chartConfig = {

options: {
//This is the Main Highcharts chart config. Any Highchart options are valid here.
//will be overriden by values specified below.
chart: {
type: 'bar'
},
tooltip: {
style: {
padding: 10,
fontWeight: 'bold'
}
}
},
//The below properties are watched separately for changes.

//Series object (optional) - a list of series using normal Highcharts series options.
series: [{
data: [10, 15, 12, 8, 7]
}],
//Title configuration (optional)
title: {
text: 'Hello'
},
//Boolean to control showing loading status on chart (optional)
//Could be a string if you want to show specific loading text.
loading: false,
//Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled.
//properties currentMin and currentMax provided 2-way binding to the chart's maximum and minimum
xAxis: {
currentMin: 0,
currentMax: 20,
title: {text: 'values'}
},
//Whether to use Highstocks instead of Highcharts (optional). Defaults to false.
useHighStocks: false,
//size (optional) if left out the chart will default to size of the div or something sensible.
size: {
width: 400,
height: 300
},
//function (optional)
// func: function (chart) {
// //setup some logic for the chart
// }
};
}

Answer

Include,

<script src="http://code.highcharts.com/stock/highstock.src.js"></script> 

or

<script src="http://code.highcharts.com/highcharts.src.js"></script>

as explained in the git page.

Comments