{"action":"created","issue":{"url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/101","repository_url":"https://api.github.com/repos/gevgeny/angular2-highcharts","labels_url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/101/labels{/name}","comments_url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/101/comments","events_url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/101/events","html_url":"https://github.com/gevgeny/angular2-highcharts/issues/101","id":186264018,"number":101,"title":"Highstock on angular cli","user":{"login":"koralu","id":13848098,"avatar_url":"https://avatars.githubusercontent.com/u/13848098?v=3","gravatar_id":"","url":"https://api.github.com/users/koralu","html_url":"https://github.com/koralu","followers_url":"https://api.github.com/users/koralu/followers","following_url":"https://api.github.com/users/koralu/following{/other_user}","gists_url":"https://api.github.com/users/koralu/gists{/gist_id}","starred_url":"https://api.github.com/users/koralu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/koralu/subscriptions","organizations_url":"https://api.github.com/users/koralu/orgs","repos_url":"https://api.github.com/users/koralu/repos","events_url":"https://api.github.com/users/koralu/events{/privacy}","received_events_url":"https://api.github.com/users/koralu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-10-31T11:43:51Z","updated_at":"2016-11-08T11:58:22Z","closed_at":"2016-11-01T17:33:23Z","body":"I try to implement highstock in angular cli but it seems it doesn't work. The simple charts works fine but with highstock I get the error-  \"StockChart is unknown chart type\"\r\n\r\n**app.commponent.ts**\r\n`import { Component } from '@angular/core';\r\nimport {Jsonp} from '@angular/http';\r\n\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n    styles: [`\r\n      chart {\r\n        display: block;\r\n      }\r\n    `],\r\n    template: `<chart type=\"StockChart\" [options]=\"options\"></chart>`\r\n})\r\nexport class AppComponent {\r\n    constructor(jsonp : Jsonp) {\r\n        jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {\r\n            this.options = {\r\n                title : { text : 'AAPL Stock Price' },\r\n                series : [{\r\n                    name : 'AAPL',\r\n                    data : res.json(),\r\n                    tooltip: {\r\n                        valueDecimals: 2\r\n                    }\r\n                }]\r\n            };\r\n        });\r\n    }\r\n    options: Object;\r\n}`\r\n\r\n**app.module.ts**\r\n`import { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { HttpModule,Jsonp,JsonpModule } from '@angular/http';\r\nimport { ChartModule } from 'angular2-highcharts';\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    ChartModule,\r\n    JsonpModule,\r\n    HttpModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }`"},"comment":{"url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/comments/259118525","html_url":"https://github.com/gevgeny/angular2-highcharts/issues/101#issuecomment-259118525","issue_url":"https://api.github.com/repos/gevgeny/angular2-highcharts/issues/101","id":259118525,"user":{"login":"zawars","id":23258535,"avatar_url":"https://avatars.githubusercontent.com/u/23258535?v=3","gravatar_id":"","url":"https://api.github.com/users/zawars","html_url":"https://github.com/zawars","followers_url":"https://api.github.com/users/zawars/followers","following_url":"https://api.github.com/users/zawars/following{/other_user}","gists_url":"https://api.github.com/users/zawars/gists{/gist_id}","starred_url":"https://api.github.com/users/zawars/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zawars/subscriptions","organizations_url":"https://api.github.com/users/zawars/orgs","repos_url":"https://api.github.com/users/zawars/repos","events_url":"https://api.github.com/users/zawars/events{/privacy}","received_events_url":"https://api.github.com/users/zawars/received_events","type":"User","site_admin":false},"created_at":"2016-11-08T11:58:22Z","updated_at":"2016-11-08T11:58:22Z","body":"--------------------------------------------------------------------\r\nSolution for Angular CLI \r\n--------------------------------------------------------------------\r\n\r\n--------------------------------------------------------------------\r\nchart.component.ts\r\n--------------------------------------------------------------------\r\n\r\n```\r\nimport {Component, OnInit} from '@angular/core';\r\nimport {ChartModule} from \"angular2-highcharts\"\r\n\r\n@Component({\r\n  selector: 'app-chart',\r\n  templateUrl: './chart.component.html',\r\n  styleUrls: ['./chart.component.css']\r\n})\r\nexport class ChartComponent implements OnInit {\r\n  options: Object;\r\n  constructor() {\r\n    this.options = {\r\n      chart: {\r\n        zoomType: 'x',\r\n        type: \"spline\"\r\n      },\r\n      title: {\r\n        text: \"Sample Chart\"\r\n      },\r\n      subtitle: {\r\n        text: \"Trends\"\r\n      },\r\n      xAxis: {\r\n        title: {\r\n          text: \"Time Series\"\r\n        }\r\n      },\r\n      series: [{\r\n        name: \"Data Stream\",\r\n        data: [29.9, 71.5, 106.4, 129, 15, 6, 61, 5, 4, 16, 4, 1, 5, 48, 51, 5,\r\n          13, 1, 1, 168, 15, 16, 1, 15, 18, 1, 51, 6, 10, 165, 61, 84, 94, 94,\r\n          8, 98, 40, 15, 18, 46, 44, 65, 46, 6, 94, 64, 64, 86, 6, 40, 44, 56],\r\n      }],\r\n      exporting: {\r\n        enabled: true\r\n      },\r\n      legend: {\r\n        align: \"right\",\r\n        verticalAlign: \"middle\",\r\n        layout: \"vertical\",\r\n        borderWidths: 10\r\n      },\r\n      tooltip: {\r\n        split: \"true\"\r\n      },\r\n      plotOptions: {\r\n        series: {\r\n          compare: 'percent',\r\n          showInNavigator: true\r\n        }\r\n      },\r\n      rangeSelector: {\r\n        enabled: true,\r\n        allButtonsEnabled: true,\r\n        buttons: [{\r\n          type: 'hour',\r\n          count: 1,\r\n          text: '1h'\r\n        }, {\r\n          type: 'day',\r\n          count: 1,\r\n          text: '1d'\r\n        }, {\r\n          type: 'month',\r\n          count: 1,\r\n          text: '1m'\r\n        }, {\r\n          type: 'year',\r\n          count: 1,\r\n          text: '1y'\r\n        }, {\r\n          type: 'all',\r\n          text: 'All'\r\n        }],\r\n        inputEnabled: true, // it supports only days\r\n        //selected: 4 // all\r\n      },\r\n      navigator: {\r\n        enabled: \"true\"\r\n      },\r\n    };\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n```\r\n\r\n------------------------------------------------------------\r\nchart.component.html\r\n------------------------------------------------------------\r\n\r\n```\r\n<chart  [options]=\"options\" id=\"chart\"></chart>\r\n```"}}
{"actor":{"display_login":"zawars"}}