angular2-highcharts drilldown not working

Question

I am using angular2-highcharts in an angular project, and the drilldown is not working.

I have this in my app.module:

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'Highcharts';
import * as drilldown from 'Highcharts/modules/drilldown';
import * as highdata from 'Highcharts/modules/data';

export function highchartsFactory() {
    const hc = highcharts;
    const dd = drilldown;
    const hd = highdata;
    dd(hc);
    hd(hc);

    return hc;
}

imports: [
    BrowserModule,
      HttpModule,
      ChartModule

  ],

providers: [dataService, {provide: HighchartsStatic,
      useFactory: highchartsFactory
  }],

I send data to the chart component by using @Output, with two parameters (series and drilldown) - in app.component:

@Output() currentTestDrilldown=[];
    @Output() currentTestSeries=[];

My chart component is added to app.component like this:

<app-chart-drilldown [data]="currentTestSeries" [drill]="currentTestDrilldown"></app-chart-drilldown>

My example chart-drilldown component:

import {Component, Input, OnChanges, OnInit} from '@angular/core';

@Component({
  selector: 'app-chart-drilldown',
  templateUrl: './chart-drilldown.component.html',
  styleUrls: ['./chart-drilldown.component.css']
})
export class ChartDrilldownComponent implements OnInit, OnChanges {
    @Input() data:any;
    @Input() drill:any;
    chart : any;
    chartOptions: any;
  constructor() { }

    saveInstance(chartInstance) {
        this.chart = chartInstance;
    }

    ngOnChanges(){
        this.drawGraph();
    }


    drawGraph(){
        this.chartOptions = {
            colors: ['#E4EE2B', '#A5D36B', '#67B9AC', '#37A4DD', '#3F8AE2', '#6F6DC8', '#A04FAE', '#D82F90', '#F02E75', '#F4435E', '#F7544C'],
            chart: {
                type: 'column',
                backgroundColor:'transparent',
                animation: {
                    duration: 1000
                }
            },
            plotOptions: {
                series: {
                    groupPadding: 0.05,
                    shadow: {
                        color: 'rgba(0, 0, 0, 0.7)',
                        width: 15
                    },
                    borderColor: 'transparent'
                }
            },
            legend: {
                itemStyle: {
                    color: '#fff',
                },
            },
            title: {
                text: '',
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            "series": this.data,
            "drilldown": this.drill,
        }
    }

    ngOnInit() {

    }


}

Chart drilldown components HTML:

<chart [options]="chartOptions" style="display:block" type="chart" class="fade-in-chart" (load)="saveInstance($event.context)"></chart>

Thanks for your help!

score 0 · Accepted Answer · answered Apr 25 '18 at 21:43

Try by using the following code

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

instead.

export function highchartsFactory() {
    const hc = highcharts;
    const dd = drilldown;
    const hd = highdata;
    dd(hc);
    hd(hc);

    return hc;
}

I hope It helps you, and just as recommendation I'm working with the following repository and the drilldown chart works.

Angular-Highcharts

angular2-highcharts drilldown not working

1 Answers1