angular-charts not working with requirejs

Question

i am trying to use angular-chart but i couldn't figure how to add dependencies correctly. i am getting following error Uncaught TypeError: Cannot read property 'defaults' of undefined in the angular-chart.js

(function (factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
      define(['angular', 'chart.js'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
      module.exports = factory(require('angular'), require('chart.js'));
  } else {
    // Browser globals
    factory(angular, Chart);
  }
}(function (angular, Chart) {
  'use strict';

  Chart.defaults.global.responsive = true;
  ....

because both angular and chart are undefined.

my require config is

'use strict';
require.config({
    baseUrl: '/',
    paths: {
		'angular': '/scripts/angular',
		'angular-route': '/scripts/angular-route',
		'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min',
		'angular-animate': '/scripts/angular-animate.min',

		'chart': '/scripts/chart',
		'angular-chart': '/scripts/angular-chart',
		
		'data-utils': '/common/data-utils',
		'string-utils': '/common/string-utils',

        'app': '/config/app',
        'routes': '/config/routes'
    },
	shim: {
		'app': {
		    deps: ['angular', 'angular-route', 'ui-bootstrap', 'data-utils', 'string-utils', 'angular-chart']
		},
		
		'angular-route': {
			deps: ['angular']
		},
		'ui-bootstrap': {
		    deps: ['angular', 'angular-animate']
		},
		'angular-animate': {
		    deps: ['angular']
		},
		'angular-chart': {
		    deps: ['angular', 'chart']
		}
	}
});

require
(
    ['app'],
    function(app)
    {
        angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'app']);
    }
);

my controller is

define(['app'], function(app)
{
	app.controller('homeController',
    [
        '$scope',
        function($scope)
        {
            $scope.page =
            {
                title: 'Welcome to Easy Stitch'
            };

            $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];

            $scope.data = [
              [65, 59, 80, 81, 56, 55, 40],
              [28, 48, 40, 19, 86, 27, 90]
            ];
        }
    ]);
});

every other dependency is working fine except for this one. please if anyone can help.

mzain · Accepted Answer · 2015-06-08 05:40:42Z

2

I figure that I have to correct the dependency in my require config file and after that it is working fine.

require
(
    ['app'],
    function(app)
    {
        angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'chart.js', 'app']);
    }
);

edited Jun 8, 2015 at 5:40

answered May 29, 2015 at 7:49

mzain

3832 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wangd933 · Accepted Answer · 2016-04-21 07:32:33Z

2

you can modify the angular-chart.js:

chart.js => chart,

(function (factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module
    define(['angular', 'chart'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory(require('angular'), require('chart'));
  } else {
    // Browser globals
    factory(angular, Chart);
  }

edited Apr 21, 2016 at 7:32

answered Jun 2, 2015 at 2:15

wangd933

335 bronze badges

1 Comment

VBMali Over a year ago

Try to look over this question: stackoverflow.com/questions/31288001/… I am having the same issue as like yours. But not going to sucseed! Any idea?

Nikos Paraskevopoulos · Accepted Answer · 2015-05-25 07:52:14Z

0

It seems angular-chart expects the Chart.js module to be called "chart.js":

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['angular', 'chart.js'], factory);
} ...

Chart.js itself uses anonymous define (ref), so it is up to you to name it. You are naming it "chart":

require.config({
    paths: {
        ...
        'chart': '/scripts/chart', 
        ...

So, just call it 'chart.js' in the paths configuration!

answered May 25, 2015 at 7:52

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

1 Comment

VBMali Over a year ago

Try to look over this question: stackoverflow.com/questions/31288001/… I am having the same issue as like yours. But not going to sucseed! Any idea?

henkieee · Accepted Answer · 2016-06-17 08:44:48Z

0

After installing angular-chart with bower, I had to change

define(['angular', 'chart'], factory);

into

define(['angular', 'Chart'], factory)

because Charts.js will export Chart and not chart.

edited Jun 17, 2016 at 8:44

answered Jun 1, 2016 at 9:46

henkieee

1,1231 gold badge8 silver badges10 bronze badges

Collectives™ on Stack Overflow

angular-charts not working with requirejs

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related