Drill Down (Highcharts) not working in Angular 5

Question

# Tried new way of importing modules. (app.module.ts). Imported more module in app.module. Also in component have json structre with drilldown . Still unable to render on the page

   " import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
    import more from 'highcharts/highcharts-more.src';
    import exporting from 'highcharts/modules/exporting.src';"

   ## Refer : https://github.com/manhar-developer/angularwidCharts

    ----------------------------------------------------------------------

   ###  - Component Code :

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

    declare var require: any;
    const Highcharts = require('highcharts');
    export class LineChartComponent implements OnInit {

      constructor() { }
    chart1 = new Chart({
        // Created pie chart using Highchart
        chart: {
          type: 'pie',
          options3d: {
              enabled: true,
              alpha: 45
          }
      },
      title: {
          text: 'Contents using Pie chart'
      },
      subtitle: {
          text: '3D donut in Highcharts'
      },
      plotOptions: {
          pie: {
              innerSize: 100,
              depth: 45
          }
      },

// Able to use series and working fine while rendering but upon clicking , Drill //down not working

    series: [{
      name: 'Operating Systems',
      data: [
        {
          name: 'Windows',
          y: 88.19,
          drilldown: 'windows-versions'
        },
        ['MacOSX', 9.22],
        ['Linux', 1.58],
        ['Others', 1.01]
      ]
    }],
    drilldown: {
      series: [{
        name: 'Windows versions',
        id: 'windows-versions',
        data: [
          ['Win 7', 55.03],
          ['Win XP', 15.83],
          ['Win Vista', 3.59],
          ['Win 8', 7.56],
          ['Win 8.1', 6.18]
        ]
      }]
    }
    });

    -------------------------

In this section imported chartModule, Highcharts_modules and more module app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {ChartModule , HIGHCHARTS_MODULES} from 'angular-highcharts';
    import more from 'highcharts/highcharts-more.src';
    import exporting from 'highcharts/modules/exporting.src.js';

    import { AppComponent } from './app.component';
    import { LineChartComponent } from './components/line-chart/line-chart.component';

    export function highchartsModules() {
      // apply Highcharts Modules to this array
      return [ more,exporting ];
    }

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

---

Answer 1

Use official npm highcharts

stackblitz demo

app.component.ts below

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, OnInit, ViewChild, ElementRef, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as  Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';
Drilldown(Highcharts);
// Load the exporting module.
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module.
Exporting(Highcharts);


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

})
export class AppComponent implements OnInit {
  name = `Angular! v${VERSION.full}`;
  @ViewChild("container", { read: ElementRef }) container: ElementRef;

  constructor() {
  }
  ngOnInit() {
    Highcharts.chart(this.container.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45
        }
      },
      title: {
        text: 'Contents using Pie chart'
      },
      subtitle: {
        text: '3D donut in Highcharts'
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
      },
      series: [{
        name: 'Operating Systems',
        data: [
          {
            name: 'Windows',
            y: 88.19,
            drilldown: 'windows-versions'
          },
          ['MacOSX', 9.22],
          ['Linux', 1.58],
          ['Others', 1.01]
        ]
      }],
      drilldown: {
        series: [{
          name: 'Windows versions',
          id: 'windows-versions',
          data: [
            ['Win 7', 55.03],
            ['Win XP', 15.83],
            ['Win Vista', 3.59],
            ['Win 8', 7.56],
            ['Win 8.1', 6.18]
          ]
        }]
      }
    })
  }

}

Answer 2

**Tried following changes in 
> app.module.ts
 and its working fine !!**

import drilldown dependency as : 
**import * as drilldown from 'highcharts/modules/drilldown.src.js'**

use providers in NgModule as : 

  providers: [
{provide: HIGHCHARTS_MODULES,
    useFactory: () => [ drilldown]
}]

Answer 3

In your app.module.ts import angular-charts and drilldown as below!

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as drilldown from 'highcharts/modules/drilldown.src';

imports: [ChartModule]
providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [more, exporting, drilldown] }   
]

In your component.ts file initialize the chart the same way you did.

If it throws out an error Property 'type' is missing in type '{ name: string; data: ((string | number)[] | { name: string; y: number; drilldown: string; })[]; }' but required in type then add type: undefined to the object. it will work as expected.