"plotoptions > series > grouping" is undefined

[instakarlo]

Hi so I need to create a stacked chart with an inner bar chart

Based on the code here: http://jsfiddle.net/zs6juetp/2/, I need to add "grouping = false" in plotoptions > series but it shows

Object literal may only specify known properties, and 'grouping' does not exist in type 'SeriesChart'

I checked SeriesData in node_modules\highcharts\index.ts but it does not have the "grouping" object am I doing anything wrong? or do I need to import anything?

I am using angular 4 and the following highcharts versions:

highcharts@6.0.3 angular-highcharts@4.0.7 @types/highcharts@5.0.12

Thanks!

[cebor]

have you loaded the extra modules?

[instakarlo]

Hi @cebor thank you for the reply.

I have only loaded exporting which you highlighted here: https://github.com/cebor/angular-highcharts#using-highcharts-modules

Do I have to import another one? I was looking at the node_modules\highcharts\modules and there is no "plotOptions" file

[instakarlo]

So I tried doing this:

import exporting from 'highcharts/modules/exporting.src';
import more from 'highcharts/highcharts-more.src';

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

@NgModule({
  imports: [
    ChartModule,
    CommonModule
  ],
  exports: [DonutChartComponent],
  declarations: [DonutChartComponent],
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
  ]
})
export class DonutChartModule { }

but when I run the code and open on browser, it is showing this error: core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: module is not a function TypeError: module is not a function at eval (angular-highcharts.es5.js:172) at Array.forEach (<anonymous>) at ChartService.initModules (angular-highcharts.es5.js:171) at new ChartModule (angular-highcharts.es5.js:201) at _createClass (core.es5.js:9529) at _createProviderInstance$1 (core.es5.js:9503) at initNgModule (core.es5.js:9456) at new NgModuleRef_ (core.es5.js:10553) at createNgModuleRef (core.es5.js:10537) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822) at eval (angular-highcharts.es5.js:172) at Array.forEach (<anonymous>) at ChartService.initModules (angular-highcharts.es5.js:171) at new ChartModule (angular-highcharts.es5.js:201) at _createClass (core.es5.js:9529) at _createProviderInstance$1 (core.es5.js:9503) at initNgModule (core.es5.js:9456) at new NgModuleRef_ (core.es5.js:10553) at createNgModuleRef (core.es5.js:10537) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822) at resolvePromise (zone.js:824) at resolvePromise (zone.js:795) at eval (zone.js:873) at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

When I add it in app.module.ts, I do not see the error but the export does not work.. :<

I am using angular 4 by the way, so I followed the steps here: https://github.com/cebor/angular-highcharts/blob/4/README.md

Also tried the suggestion from here: https://github.com/cebor/angular-highcharts/issues/99

But still does not work, any suggestions? Thanks!!

[cebor]

@h0ujun Ok, is it possible for you to test your code with angular 5 and angular-highcharts 5. So we can figure out, if angular-highcharts 4 has a problem.

You can use: https://stackblitz.com/edit/angular-9nkrgd as a starting point.

[instakarlo]

Tried a simple code that uses the same pattern in my code and it works

https://angular-vzs5te.stackblitz.io

So it's angular 4 problem I guess.

[cebor]

@h0ujun i will push a new ng4 build tomorrow, maybe this fix you issues.

[instakarlo]

cool thanks @cebor will wait for the update!! :>

[cebor]

just released new version

[instakarlo]

@cebor sorry I was out for holiday...

so tried the new versions:

"angular-highcharts": "^4.1.0",
"highcharts": "^6.0.4",
"@types/highcharts": "^5.0.13",

no build errors but when I open on browser, logs is showing this error:

ERROR Error: Uncaught (in promise): TypeError: chartModule is not a function
TypeError: chartModule is not a function
    at eval (angular-highcharts.es5.js:214)
    at Array.forEach (<anonymous>)
    at ChartService.initModules (angular-highcharts.es5.js:213)
    at new ChartModule (angular-highcharts.es5.js:243)
    at _createClass (core.es5.js:9529)
    at _createProviderInstance$1 (core.es5.js:9503)
    at initNgModule (core.es5.js:9456)
    at new NgModuleRef_ (core.es5.js:10553)
    at createNgModuleRef (core.es5.js:10537)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
    at eval (angular-highcharts.es5.js:214)
    at Array.forEach (<anonymous>)
    at ChartService.initModules (angular-highcharts.es5.js:213)
    at new ChartModule (angular-highcharts.es5.js:243)
    at _createClass (core.es5.js:9529)
    at _createProviderInstance$1 (core.es5.js:9503)
    at initNgModule (core.es5.js:9456)
    at new NgModuleRef_ (core.es5.js:10553)
    at createNgModuleRef (core.es5.js:10537)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
    at resolvePromise (zone.js:821)
    at resolvePromise (zone.js:785)
    at eval (zone.js:870)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)
    at <anonymous>

When I comment out

  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
  ]

it's OK

Is it really supposed to use "angular-highcharts.es5.js"? Thanks!

[cebor]

Definitely related to: https://github.com/cebor/angular-highcharts/issues/112