{"action":"created","issue":{"url":"https://api.github.com/repos/novus/nvd3/issues/1850","repository_url":"https://api.github.com/repos/novus/nvd3","labels_url":"https://api.github.com/repos/novus/nvd3/issues/1850/labels{/name}","comments_url":"https://api.github.com/repos/novus/nvd3/issues/1850/comments","events_url":"https://api.github.com/repos/novus/nvd3/issues/1850/events","html_url":"https://github.com/novus/nvd3/issues/1850","id":183666922,"number":1850,"title":"Cannot read property 'category20' of undefined","user":{"login":"aderbas","id":12519019,"avatar_url":"https://avatars.githubusercontent.com/u/12519019?v=3","gravatar_id":"","url":"https://api.github.com/users/aderbas","html_url":"https://github.com/aderbas","followers_url":"https://api.github.com/users/aderbas/followers","following_url":"https://api.github.com/users/aderbas/following{/other_user}","gists_url":"https://api.github.com/users/aderbas/gists{/gist_id}","starred_url":"https://api.github.com/users/aderbas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aderbas/subscriptions","organizations_url":"https://api.github.com/users/aderbas/orgs","repos_url":"https://api.github.com/users/aderbas/repos","events_url":"https://api.github.com/users/aderbas/events{/privacy}","received_events_url":"https://api.github.com/users/aderbas/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-10-18T12:02:50Z","updated_at":"2016-10-18T12:16:47Z","closed_at":null,"body":"I do not know if it's a problem of d3. I'm using Angular2 (angular-cli), installed types of d3, everything is right with project and depencencies. Try to make a simple chart using sample code.\r\n\r\n```\r\nimport { Component }  from '@angular/core';\r\nimport * as d3                from 'd3';\r\nimport { nvD3 }               from 'ng2-nvd3'\r\n\r\n@Component({ ...})\r\nexport class MyComponent {\r\n    constructor(){\r\n       this.fakeChart();\r\n    }\r\n\r\n  fakeChart(){\r\n    this.chartOptions = {\r\n      chart: {\r\n        type: 'lineChart',\r\n        height: 450,\r\n        margin : {\r\n          top: 20,\r\n          right: 20,\r\n          bottom: 40,\r\n          left: 55\r\n        },\r\n        x: function(d){ return d.x; },\r\n        y: function(d){ return d.y; },\r\n        useInteractiveGuideline: true,\r\n        xAxis: {\r\n          axisLabel: 'Time (ms)'\r\n        },\r\n        yAxis: {\r\n          axisLabel: 'Voltage (v)',\r\n          tickFormat: function(d){\r\n            return d3.format('.02f')(d);\r\n          },\r\n          axisLabelDistance: -10\r\n        }\r\n      }\r\n    };\r\n\r\n    let sin = [];\r\n\r\n    for (var i = 0; i < 100; i++) {\r\n      sin.push({x: i, y: Math.sin(i/10)});\r\n    }\r\n\r\n    this.dataChart = [\r\n      {\r\n        values: sin,\r\n        key: 'Sine Wave',\r\n        color: '#2ca02c'\r\n      }\r\n    ];\r\n  }\r\n}\r\n```\r\nHTML template:\r\n\r\n```\r\n<div>\r\n   <nvd3 [options]=\"chartOptions\" [data]=\"dataChart\"></nvd3>\r\n</div>\r\n```\r\n\r\nWhen I try to run:\r\n\r\n```\r\nmain.bundle.js:43641 EXCEPTION: Error in ./ReplayViewComponent class ReplayViewComponent - inline template:54:35 caused by: Cannot read property 'category20' of undefinedErrorHandler.handleError @ main.bundle.js:43641\r\nmain.bundle.js:43643 ORIGINAL EXCEPTION: Cannot read property 'category20' of undefinedErrorHandler.handleError @ main.bundle.js:43643\r\nmain.bundle.js:43646 ORIGINAL STACKTRACE:ErrorHandler.handleError @ main.bundle.js:43646\r\nmain.bundle.js:43647 TypeError: Cannot read property 'category20' of undefined\r\n    at Object.a.utils.defaultColor (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:3:11895)\r\n    at Object.a.models.scatter (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:9:10122)\r\n    at Object.a.models.line (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:6:8335)\r\n    at Object.a.models.lineChart (eval at <anonymous> (http://localhost:4200/scripts.bundle.js:111:8), <anonymous>:6:14834)\r\n    at nvD3.updateWithOptions (http://localhost:4200/main.bundle.js:74106:51)\r\n    at nvD3.ngOnChanges (http://localhost:4200/main.bundle.js:74099:14)\r\n    at DebugAppView._View_ReplayViewComponent0.detectChangesInternal (ReplayViewComponent.ngfactory.js:440:45)\r\n    at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:63626:14)\r\n    at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:63731:44)\r\n    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:63652:19)\r\n```"},"comment":{"url":"https://api.github.com/repos/novus/nvd3/issues/comments/254489862","html_url":"https://github.com/novus/nvd3/issues/1850#issuecomment-254489862","issue_url":"https://api.github.com/repos/novus/nvd3/issues/1850","id":254489862,"user":{"login":"aderbas","id":12519019,"avatar_url":"https://avatars.githubusercontent.com/u/12519019?v=3","gravatar_id":"","url":"https://api.github.com/users/aderbas","html_url":"https://github.com/aderbas","followers_url":"https://api.github.com/users/aderbas/followers","following_url":"https://api.github.com/users/aderbas/following{/other_user}","gists_url":"https://api.github.com/users/aderbas/gists{/gist_id}","starred_url":"https://api.github.com/users/aderbas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aderbas/subscriptions","organizations_url":"https://api.github.com/users/aderbas/orgs","repos_url":"https://api.github.com/users/aderbas/repos","events_url":"https://api.github.com/users/aderbas/events{/privacy}","received_events_url":"https://api.github.com/users/aderbas/received_events","type":"User","site_admin":false},"created_at":"2016-10-18T12:16:47Z","updated_at":"2016-10-18T12:16:47Z","body":"I'm using **D3 v4.2.7** and **ng2-nvd3 v1.1.3.**"}}
{"actor":{"display_login":"aderbas"}}