highcharts-angular : Cannot read property 'chart' of undefined

Question

I am trying to implement highcharts-angular (https://github.com/highcharts/highcharts-angular) in my angular for application and getting the following error

Cannot read property 'chart' of undefined
at HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:35)

I want to use bellcurve module, and I can't get it working.

I have tried to recreate my problem using stackblitz

Please see https://stackblitz.com/edit/angular-unf7pz

Not sure what the problem is

Answer 1

---

By using https://github.com/highcharts/highcharts-angular

---

it's easy to follow, but from your stackblitz there are some instructions you didn't follow:

1/ in shared/Highcharts/bellcurve/bellcurve-chart.component you need to bind Highcharts: Html:

<highcharts-chart 
  [Highcharts]="Highcharts" --> ITS REQUIRED
  [options]="options"       --> ITS REQUIRED

ts:

import * as Highcharts from 'highcharts';
...
export class BellCurveChartComponent implements OnInit {
    Highcharts = Highcharts;
    options = {title: ..., xAxis: ...};
    ...
}

read https://github.com/highcharts/highcharts-angular#general-prerequisites

2/ you need to load the right module you want to use (bellcurve) by following the steps in https://github.com/highcharts/highcharts-angular#to-load-a-module

import bc from 'highcharts/modules/histogram-bellcurve.js';
bc(Highcharts);

3/ if you want to use the chart instance, use the callback Function callbackFunction

HTML:

 [callbackFunction]="getInstance.bind(this)"

TS:

 getInstance(chart): void {
    // chart instance
    this.chart = chart;
 }

And that's, check the working code here:

https://stackblitz.com/edit/angular-k85q94