CODEWITHSUNDEEP
angulartypescripthighchartshistogram
itsCodeOutside
itsCodeOutside

Reputation: 33

Getting "Highcharts error #17" when creating histogram (using Highcharts with Angular 6)

I'm trying to create a simple histogram with Highcharts in Angular and I'm receiving the following error: 

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
    at Object.a.error (highcharts.js:10)
    at a.Chart.initSeries (highcharts.js:245)
    at highcharts.js:270
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:28)
    at a.Chart.firstRender (highcharts.js:270)
    at a.Chart.<anonymous> (highcharts.js:245)
    at a.fireEvent (highcharts.js:31)
    at a.Chart.init (highcharts.js:244)
    at a.Chart.getArgs (highcharts.js:244)

I'm going off of the following tutorial provided by Highcharts:

https://www.highcharts.com/docs/chart-and-series-types/histogram-series

After reading about the "type does not exist" error (Highcharts error #17), it appears that Highcharts thinks that I'm missing an extension file called "highcharts-more.js." I've tried many different implementations that include the "highcharts-more.js" file in the solution, however have not had any luck resolving the error.

Here is my code:

app.component.html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>

<div [chart]="testHistogram"></div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    public testHistogram: Chart;

    ngOnInit() {
        this.createHistogram();
    }

    createHistogram(): void {
        var options = {
            title: {
                text: 'Test Histogram'
            },
            xAxis: [{
                title: {
                    text: 'time (ms)'
                }
            }],
            yAxis: [{
                title: {
                    text: '# of items'
                }
            }],
            series: [{
                name: 'Lag Histogram',
                type: 'histogram',
                xAxis: 1,
                yAxis: 1,
                baseSeries: 1
                }, {
                data: [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4]
            }]
        }

        this.testHistogram = new Chart(<any> options);
    }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //for the dashboard view
import { ChartModule } from 'angular-highcharts';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      BrowserModule,
      FormsModule,
      ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am aware that there was a similar question asked about creating a histogram with Highcharts and Angular (Highcharts error #17 when adding series to the chart using angular 4). However, I'm using a very simple approach referenced directly from Highcharts' site, and there were a few details missing from the previous question.

I'm thinking that using the histogram series type should not require the "highcharts-more.js" file and should already be available as long as the "modules/histogram-bellcurve.js" module and "highcharts.js" file is included.

Also, in my .ts, it appears that when the data attribute is included within the series option, it throws the error. However, if I remove the data attribute (something that is required to create the histogram), and make it so that the series option is no longer an array with 2 elements, I don't receive the error. But I still of course don't have a histogram of data to show. This makes me wonder if Highchart first checks the histogram type of the series option and its required corresponding attributes(making sure they are all specified and set to match that of a histogram chart), before deeming a chart to be of type "histogram" or if that is just decided off of what type is specified, disregarding the attributes included/specified.

If anyone out there has a working solution that creates and populates a histogram Highchart successfully using Angular, I would love to know how one would do this.

Upvotes: 3

Views: 7153

Answers (1)

daniel_s
daniel_s

Reputation: 3732

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

Upvotes: 3

Related Questions