Question: HighStock + Highcharts Modules

[Newan]

Hello, is it possible to use HighStock and Highcharts Modules like Exporting?

thanks

[cebor]

This should help you with the exporting module: https://github.com/cebor/angular-highcharts#using-highcharts-modules

Highstocks is unfortunately not available yet.

[cebor]

I will release Highstocks and Highmaps support with the release of angular 4.

[Newan]

thanks!

[davidmontgom]

When will Highstocks be available for ang 4.0.x?

[Darshan-Kushalappa]

By when can we expect the support for Highstocks and Highmaps?

[cebor]

Hi all, im very busy atm, but i will inform you here when its done.

What you can do for now is, to extend the Highcharts module: https://github.com/cebor/angular-highcharts#using-highcharts-modules

import { Highcharts } from 'angular-highcharts';
require('highcharts/highstock')(Highcharts);

[velusgautam]

How to use Exporting in Anuglar4

[cebor]

@velusgautam

import { Highcharts } from 'angular-highcharts';
require('highcharts/modules/exporting')(Highcharts);

[velusgautam]

I seen that But Can I use it like this in Component.. Where I can add this in AngularCLI version

[cebor]

main.ts should work.

[ramden]

Trying the same here. I don't get it ... should this 2 lines:

import { Highcharts } from 'angular-highcharts';
require('highcharts/highstock')(Highcharts);

be somewhere in app.module.ts?

An example would be great where and how exactly to put those values and how to use them in the component

[cebor]

@ramden

Yes app.module.ts is a great place to put these lines.

But Highstocks is not fully supported jet.

[Hulva]

I'm doing it that way to use highchart, i've tried Highstocks, work for me! Before it is available for ang 4.0.x, hope that'll be help.

[cebor]

@Hulva Good Catch, i will do some tests, an update the readme accordingly.

[cebor]

Seems that @types/highcharts have no definitions for modules besides highcharts-more.

[cebor]

Using the src files directly should work without typings or declarations:

Example:

import { Highcharts } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
exporting(Highcharts)

[epot]

Just out of curiosity, is the Hightstocks availability is planned in the near future? I am anxious to play with it :).

[cebor]

Initial Highstock & Highmaps support landed in 5.1.0

https://github.com/cebor/angular-highcharts#highstock--highmaps-support

[moepkid-zz]

I currently get an error while trying to use highstock. The module is as follows:

import { NgModule } from '@angular/core';

 import { UiModule } from '../ui.module';
        import { SingleSensorChartHComponent } from './single-sensor-chart-H.component';
         import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
        import * as highStock from 'highcharts/highstock'; 

    @NgModule({
      imports: [
        UiModule,
        ChartModule,
      ],
      declarations: [
        SingleSensorChartHComponent
      ],
      providers: [
        {
          provide: HIGHCHARTS_MODULES,
          useFactory: highchartsModules
        },
      ],
      exports: [
        SingleSensorChartHComponent,

        ChartModule
      ]
    })
        export class MeteoChartsModule {
        }
       export function highchartsModules() {
         return [ highStock ];
        }

The console says:

TypeError: module is not a function at eval (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:248) at Array.forEach (<anonymous>) at ChartService.initModules (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:247) at new ChartModule (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:277) at _createClass (webpack-internal:///../../../core/esm5/core.js:10817) at _createProviderInstance$1 (webpack-internal:///../../../core/esm5/core.js:10791) at initNgModule (webpack-internal:///../../../core/esm5/core.js:10744) at new NgModuleRef_ (webpack-internal:///../../../core/esm5/core.js:11987) at createNgModuleRef (webpack-internal:///../../../core/esm5/core.js:11977) at Object.debugCreateNgModuleRef [as createNgModuleRef] (webpack-internal:///../../../core/esm5/core.js:14287)

[cebor]

@moepkid

import highstock from 'highcharts/modules/stock.src'

this should work.

[moepkid-zz]

@cebor Somehow it cant find the stock.src file. I instal;led highcharts trough npm.

[cebor]

highcharts version ?

[moepkid-zz]

@cebor nvm, I was stupid. Forgot the .src.js. Thanks man for your hard work! The library is easy enough to understand :D

[moepkid-zz]

@cebor somehow its still not working. The call new StockChart({}) initializes an object with only options in it. chart.ref returns undefined. Copying and pasting the single line demo fro m the website gives me an error about 'cannot call normalize from undefined'. This means that the chart object is somehow not properly initialized when new StockChat is called.

If I add the series attribute, it gets undefined somehow. before that, everything gets shown (white panel with greyed out options)

[moepkid-zz]

This is the module right now.

import { NgModule } from '@angular/core';
import { UiModule } from '../ui.module';
import { SingleSensorChartHComponent } from './single-sensor-chart-H.component';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

import exporting from 'highcharts/modules/exporting.src'
import highstock from 'highcharts/modules/stock.src'

@NgModule({
  imports: [
    UiModule,

    ChartModule,
  ],
  declarations: [
    SingleSensorChartHComponent
  ],
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: highchartsModules
    },
  ],
  exports: [
    SingleSensorChartHComponent,

    ChartModule
  ]
})

export class MeteoChartsModule {

}

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

[cebor]

@moepkid In which livecycle do you access chart.ref?

Cause its only available after ngAfterViewInit().

See: https://angular.io/guide/lifecycle-hooks

[moepkid-zz]

@cebor I Think i found it. Maybe it is worth noting that the factory function and provider needs to be in the app.module and not a submodule. I now put that in app.module and the rest in the MeteoModule and it works!

Also, Sorry if i screw up the formatting of the comments and code. Somehow the comment box can't translate my code to github code.

[epot]

Is there a working example with Highstock? Somehow I am getting similar issues than here, I must be missing something.

[moepkid-zz]

@epot Just follow the instructions in the readme, but notice the following:

• Make sure the factory function and service call is in the main app.module.ts.

• In the return array of the factory function, the structure is (if for example you want to use highstock) return [exporting, highstock]

importing 'exporting' and the other modules is done by import <module_name> from 'highcharts/modules/<module_name>.src.js'

• notice that you may need to use '.js' after source.

Then lastly, you have to import ChartModule in the module where you want to use the charts (and selected modules).

my app.module.ts:

import { HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import highstock from 'highcharts/modules/stock.src.js';

...

providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: highchartsModules
    },
  ],

...

<beneath module declaration>
export function highchartsModules() {
  return [exporting, highstock];
}

[epot]

Oh I did not see the .js in the readme, that must be the problem! And I was putting the highchartsModule before the module declaration. Thanks!

Unfortunately, it still does not work. Here's my app-module.ts:

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import highstock from 'highcharts/modules/stock.src.js';

...

@NgModule({
    imports: [
        ...
        ChartModule,
    ],
    declarations: [
        ...
    ],
    providers: [
        ...
        { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules }, // add as factory to your providers,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

export function highchartsModules() {
    // apply Highstock Modules to this array
    return [ exporting, highstock ];
}

And I am getting this:

zone.js:654 Unhandled Promise rejection: module is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: module is not a function
    at angular-highcharts.es5.js:237
    at Array.forEach (<anonymous>)
    at ChartService.initModules (angular-highcharts.es5.js:236)
    at new ChartModule (angular-highcharts.es5.js:266)
    at _createClass (core.js:10622)
    at _createProviderInstance$1 (core.js:10596)
    at initNgModule (core.js:10549)
    at new NgModuleRef_ (core.js:11792)
    at createNgModuleRef (core.js:11782)

[moepkid-zz]

@epot which versions are you using for angular and the other librarieS?

[epot]

Angular 5.0.2, types/highcharts 5.0.12 and angular-highcharts 5.1.1.

[moepkid-zz]

@epot I think this is something specific for your project. Can you perhaps make a new empty project with only these libraries?

[cebor]

Working Example: https://stackblitz.com/edit/angular-uzdc1r

[epot]

Excellent, thank you both for your help!

[epot]

It seems to be related to webpack. I tried the following:

git clone https://github.com/preboot/angular-webpack.git my-app

Tune the my-app/package.json to update angular 5 and add highcharts 6.0.2 and angular-highchart 5.1.1. Remove the my-app/app/ content and put instead the code from the working example above. And I get the same error as in my app:

(unknown) Unhandled Promise rejection: module is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: module is not a function
  at eval (eval at 85 (app.js:63), <anonymous>:249:13)
  at Array.forEach (<anonymous>)
  at ChartService.initModules (eval at 85 (app.js:63), <anonymous>:248:22)

[cebor]

@epot angular-cli also uses webpack, an this works fine for me.

https://github.com/cebor/angular-highcharts-demo

[cebor]

@epot i think i got it. I accidently used module as a variable which is a keyword in nodejs.

Can you try version 5.1.2?

[epot]

It looks like I got a different error now:

zone.js?fad3:690 Unhandled Promise rejection: element is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: element is not a function
  at eval (eval at 85 (app.js:63),

Is element a nodejs keyword as well? I suggest switching to "gnagna" ;-).

[cebor]

nope it isn't

[epot]

Weird, any idea why it is still failing then? I can put a small repro on github if that helps.

[cebor]

@epot In this case element should be the reference to the Highcharts Module you are loading.

Maybe the import is incorrect or the angular starter you are using is incompatible with this library.

[epot]

I am really not sure what is wrong, but I tested both with my complex project and a start project (https://github.com/preboot/angular-webpack.git) and I am getting the same error unfortunately :-/. And both were working fine before the update.