score:15

Accepted answer

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


Related Query

More Query from same tag