title: Getting "Highcharts error #17" when creating histogram (using Highcharts with Angular 6)
body: <p>I'm trying to create a simple histogram with Highcharts in Angular and I'm receiving the following error: </p>
  
  <pre><code>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 (&lt;anonymous&gt;)
      at a.each (highcharts.js:28)
      at a.Chart.firstRender (highcharts.js:270)
      at a.Chart.&lt;anonymous&gt; (highcharts.js:245)
      at a.fireEvent (highcharts.js:31)
      at a.Chart.init (highcharts.js:244)
      at a.Chart.getArgs (highcharts.js:244)
  </code></pre>
  
  <p>I'm going off of the following tutorial provided by Highcharts:</p>
  
  <p><a href="https://www.highcharts.com/docs/chart-and-series-types/histogram-series" rel="nofollow noreferrer">https://www.highcharts.com/docs/chart-and-series-types/histogram-series</a></p>
  
  <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/histogram-bellcurve.js"&gt;&lt;/script&gt;
  
  &lt;div [chart]="testHistogram"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>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(&lt;any&gt; options);
      }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I am aware that there was a similar question asked about creating a histogram with Highcharts and Angular (<a href="https://stackoverflow.com/questions/49310494/highcharts-error-17-when-adding-series-to-the-chart-using-angular-4">Highcharts error #17 when adding series to the chart using angular 4</a>). However, I'm using a very simple approach referenced directly from Highcharts' site, and there were a few details missing from the previous question.</p>
  
  <p>I'm thinking that using the <em>histogram</em> series type should <strong>not</strong> 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.</p>
  
  <p>Also, in my .ts, it appears that when the data attribute is included within the <em>series</em> 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 <em>series</em> 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 <strong>and</strong> 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.</p>
  
  <p>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.</p>