score:3

Accepted answer

This error is throwed when you're trying to create a chart with series which doesn't exist. I see that you didn't import the histogram module correctly. You should delete <script> tags from your app.component.html file, and import the modules inside of app.module.ts.

Additionally, in order to make it works, you need to import appropriate module in the mentioned file, just like that:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //for the dashboard view
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as histogram from 'highcharts/modules/histogram-bellcurve';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      BrowserModule,
      FormsModule,
      ChartModule
  ],
  providers: [
      { provide: HIGHCHARTS_MODULES, useFactory: () => [histogram] }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, I recommend you to use official highcharts-angular wrapper, which is very clearly documented and you shouldn't have any problems with building your own chart. Additionally it's better supported than unofficial ones. Here is the link to npm package: https://www.npmjs.com/package/highcharts-angular


Related Query

More Query from same tag