Haifeng Zhang Haifeng Zhang - 3 months ago 57
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

github link


// more modules here..

In my html file, i use below:

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

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>


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
, 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
// }



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


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

as explained in the git page.