angular-highcharts

angular-highcharts copied to clipboard

I am using the stock module to introduce charts in different models and will always report errors. I hope you have some demos to refer to; My mistake is as follows:

ComparePage.html:11 ERROR TypeError: Cannot read property 'options' of undefined at a.Chart.redraw (highcharts.js:247) at a.Chart. (stock.src.js:8540) at a.Chart.a.(:8100/anonymous function) (http://localhost:8100/build/0.js:1170:80) at a.Chart. (stock.src.js:8540) at a.Chart.a.(:8100/anonymous function) [as redraw] (http://localhost:8100/build/0.js:1170:80) at e.update (highcharts.js:341) at eachBaseSeries (stock.src.js:6520) at Array.forEach () at a.each (highcharts.js:28)

Now I have two modules A and B, and when I click on A to do stock, there's no problem, there's an error above in doing B module; This makes me very miserable. How do I use this tool to angular-highcharts

Can you provide me a stackblitz or fiddle zo make this reproducible for me?

Check if it is linking to a class property that is undefined. I got this error when defining my options Asyncly through an observable at a later time.

@cebor ok, I'll send you a copy later. I feel the problem lies in the stock module. I have no problem with the chart module;

@cebor Hi, if you look at this demo it's already gone wrong in stock. Is my use wrong?

high.zip

Hi @Iecy, I've encountered the same issue and fixed it by only loading highstock once:

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

let loaded = false;
export function highchartsModules() {
  if (!loaded) {
    loaded = true;
    return [highstock];
  }
  return [];
}
@NgModule({
  imports: [ChartModule],
  declarations: [MyChartComponent],
  exports: [MyChartComponent],
  providers: [{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules }],
})
export class MyChartModule {}

Where MyChartComponent is your custom component that uses angular-highcharts.

Hope it'll help you :)

@StephaneTrebel nice catch, im looking into this and resolve it in the library.

@StephaneTrebel Thank you very much. A very effective solution;

@cebor Nice, Come on; Hope gets better and better;

@cebor I too encountered the same issue as @Iecy gets. I have tried the solution given by @StephaneTrebel. But Still, it's not working; getting following error

TrendsComponent.html:74 ERROR TypeError: Cannot read property 'options' of undefined at a.Chart.redraw (highcharts.js:247) at a.Chart. (stock.src.js:8540) at a.Chart.a.(:4200/anonymous function) (http://localhost:4200/dashboard-dashboard-module~trends-trends-module.js:503:80) at a.Chart. (stock.src.js:8540) at a.Chart.a.(:4200/anonymous function) [as redraw] (http://localhost:4200/dashboard-dashboard-module~trends-trends-module.js:503:80) at e.update (highcharts.js:341) at eachBaseSeries (stock.src.js:6520) at Array.forEach () at a.each (highcharts.js:28) at Navigator.updateNavigatorSeries (stock.src.js:6475)

@naresh33 I also had the same issue before I have updated my code with the @StephaneTrebel solution. Can you show the code of all of your modules where did you use highcharts / highstock.