Trying to create StockChart

[jencat420]

I have Angular 5. In my component i import

import {Chart, StockChart, HIGHCHARTS_MODULES} from "angular-highcharts"; then i init chart like this

this.chart = new StockChart({
            // chart: {
            //     type: 'spline'
            // },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    year: '%b'
                },
                title: {
                    text: 'Date'
                }
            },
            yAxis: {
                title: {
                    text: 'USD'
                },
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '${point.y:.2f}/ETH'
            },
            plotOptions: {
                spline: {
                    marker: {
                        enabled: true
                    }
                }
            },

            title: {
                text: 'Ethereum price history'
            },
            credits: {
                enabled: false
            },
            series: this.data
        });

And after compile , in browser console i see error: TypeError: __WEBPACK_IMPORTED_MODULE_0_highcharts__.stockChart is not a function

What am I doing wrong?

[k1ng440]

any update on this please?

[iturn]

Seems like you missed a part in the documentation. You must import the additional modules like stock in app.module.ts. Then in the module of your component that has the chart, for example shared.module.ts, import Chartmodule.

//app.module.ts import { HIGHCHARTS_MODULES } from 'angular-highcharts'; import highstock from 'highcharts/modules/stock.src'; export function highchartsModules() { return [ highstock ]; }

@NgModule({ providers: [ { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } ] }) export class AppModule { }`

// line-chart.component.ts import { Component, OnInit, Input } from '@angular/core'; import { StockChart } from 'angular-highcharts'; import { IndividualSeriesOptions, TitleOptions } from 'highcharts';

@Component({ selector: 'line-chart', template: <div [chart]="chart"></div> }) export class LineChartComponent implements OnInit{ public chart: StockChart @Input() title: TitleOptions; @Input() series: IndividualSeriesOptions[]

ngOnInit() {
    this.chart = new StockChart({
        title: this.title,
        series: this.series,
        rangeSelector: {
            selected: 1
        },
        credits: {
            enabled: false
        },
    });
}

}

[cebor]

What is missing in the docs https://github.com/cebor/angular-highcharts#highstock--highmaps-support?

I will add it.

[iturn]

It doesnt seem like documentation is missing, i meant to say that Guben missed reading a part of it. Its all well documented, thanks @cebor for that 👍

[cebor]

Oh, i cant read ^^

[yash27]

@gubenkovalik To use Stock Chart, you need to downgrade your CLI version to 1.6.1 if you are using higher version. Stock chart will not work in CLI version 1.6.2+ .

[iturn]

Confirmed working on 1.6.1

[nadeem-shaikh]

@iturn @yash27

can you guys do ng -v and paste the output here.

I am not able to get it working with below config. Angular CLI: 1.6.7 Node: 8.10.0 OS: win32 x64 Angular: 5.1.2 ... common, compiler, core, platform-browser ... platform-browser-dynamic

angular/animations: 5.2.9 angular/cli: 1.6.7 angular/compiler-cli: 5.2.9 angular/forms: 5.2.9 angular/http: 5.2.9 angular/language-service: 5.2.9 angular/router: 5.2.9 angular-devkit/build-optimizer: 0.0.42 angular-devkit/core: 0.0.29 angular-devkit/schematics: 0.0.52 ngtools/json-schema: 1.1.0 ngtools/webpack: 1.9.7 schematics/angular: 0.1.17 typescript: 2.4.2 webpack: 3.10.0

[iturn]

@nadeem-shaikh Angular CLI: 1.6.1 Node: 8.0.0 OS: darwin x64 Angular: 5.1.1 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

angular/cli: 1.6.1 angular-devkit/build-optimizer: 0.0.36 angular-devkit/core: 0.0.22 angular-devkit/schematics: 0.0.42 ngtools/json-schema: 1.1.0 ngtools/webpack: 1.9.1 schematics/angular: 0.1.11 schematics/schematics: 0.0.11 typescript: 2.4.2 webpack: 3.10.0

and more package.json detail "dependencies": { "angular/animations": "^5.1.1", "angular/common": "5.1.1", "angular/compiler": "5.1.1", "angular/core": "5.1.1", "angular/forms": "5.1.1", "angular/http": "5.1.1", "angular/platform-browser": "5.1.1", "angular/platform-browser-dynamic": "5.1.1", "angular/router": "5.1.1", "auth0/angular-jwt": "^1.0.0-beta.9", "ng-select/ng-select": "^0.28.0", "ngx-translate/core": "8.0.0", "ngx-translate/http-loader": "2.0.0", "angular-highcharts": "^5.2.10", "angular2-datatable": "^0.6.0", "angular2-grid": "^2.1.0", "angular2-moment": "^1.7.0", "angular2-spinner": "^1.0.10", "bootstrap": "3.3.7", "classlist.js": "1.1.20150312", "core-js": "2.4.1", "enhanced-resolve": "3.3.0", "font-awesome": "4.7.0", "highcharts": "^6.0.7", "intl": "1.2.5", "jquery": "3.2.1", "jquery-slimscroll": "1.3.8", "jquery.browser": "0.1.0", "lodash": "4.17.4", "modernizr": "3.5.0", "moment": "2.19.1", "mydatepicker": "^2.0.32", "ng2-charts": "1.6.0", "ng2-table": "1.3.2", "ng2-validation": "4.2.0", "ngx-bootstrap": "2.0.0-beta.8", "ngx-chips": "1.5.9", "ngx-color-picker": "5.0.1", "ngx-infinite-scroll": "0.6.1", "ngx-toastr": "6.5.*", "node-sass": "4.5.3", "rxjs": "5.5.2", "screenfull": "3.3.2", "simple-line-icons": "2.4.1", "spinkit": "1.2.5", "sweetalert": "1.1.3", "ts-helpers": "1.1.1", "web-animations-js": "2.2.1", "zone.js": "0.8.14" }, "devDependencies": { "angular/cli": "1.6.1", "angular/compiler-cli": "5.1.1", "angular/language-service": "5.1.1", "types/highcharts": "^5.0.19", "types/jasmine": "2.5.53", "types/jasminewd2": "2.0.2", "types/lodash": "4.14.71", "types/node": "6.0.60", "codelyzer": "4.0.1", "jasmine-core": "2.6.2", "jasmine-spec-reporter": "4.1.0", "karma": "1.7.0", "karma-chrome-launcher": "2.1.1", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.2.1", "karma-jasmine": "1.1.0", "karma-jasmine-html-reporter": "0.2.2", "karma-read-json": "1.1.0", "loaders.css": "0.1.2", "protractor": "5.1.2", "ts-node": "3.2.0", "tslint": "5.7.0", "typescript": "2.4.2", "webdriver-manager": "10.2.5" }

[amandainnis]

my group is using the cli in 1.7.4, i can't change cli versions to get this to work. can you help for stockchart in this version?

[cebor]

@amandainnis for angular5 install angular-highcharts@5

npm i angular-highcharts@5

[amandainnis]

//app module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'; import { StockchartComponent } from './stockchart/stockchart.component'; import * as highstock from 'highcharts/modules/stock.src';

export function highchartsModules() { return [ highstock ]; }

@NgModule({ declarations: [ AppComponent, StockchartComponent, ChartModule ], imports: [ BrowserModule ], providers: [{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules }], bootstrap: [AppComponent] }) export class AppModule { }

//my-component.component.ts import { Component, OnInit } from '@angular/core'; import * as Highcharts from 'highcharts'; import { StockChart } from 'angular-highcharts';

@Component({ selector: 'app-stockchart', templateUrl: './stockchart.component.html', styleUrls: ['./stockchart.component.scss'] }) export class StockchartComponent implements OnInit { chart = new StockChart({ chart: { type: 'line' }, title: { text: 'Linechart' }, credits: { enabled: false }, series: [ { name: 'Line 1', data: [1, 2, 3] } ] }); constructor() { } ngOnInit() {
} }

//component.html <div [chart]="chart">

[cebor]

@amandainnis please create a stackblitz to reproduce this issue.

And keep in mind to set dependency versions correctly

Example: https://stackblitz.com/edit/angular-9nkrgd

[amandainnis]

I figured out that the ChartModule needed to be an import in the AppModule, not a declaration.

[amandainnis]

the reason i switched to your version instead of angular2-highcharts is that i'm trying to access the static properties of highcharts and utilize the "setOptions" feature. if you have any pointers on that, I would really appreciate it

[cebor]

@amandainnis

import { Highcharts } from 'angular-highcharts';

Highcharts.setOptions()

[amandainnis]

this still did not work

[cebor]

Do you have some errors or examples for me to reproduce this issue?

[amandainnis]

Highcharts.setOptions({ lang: { rangeSelectorZoom: '' } }); this is intended to remove the text 'zoom' from highstock range buttons. It works on jsfiddle with regular javascript.

When this script is placed above the @component, what is inside the setOptions produces errors saying it is not part of the object literal

Highcharts error #16

[yash27]

@amandainnis many of the features/properties of highcharts are not present inside the object literal. That is loaded after the angular completely loads all the view components.