Drill Down (Highcharts) not working in Angular 5
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]
]
}]
}
})
}
}
**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]
}]