Drill down is not working for angular-highcharts

[GauravNagpure]

I was trying to use pie chart to pie chart drilldown, but it looks like it has used in highchart.js but not implemented in this package.

https://www.highcharts.com/demo/pie-drilldown
I am looking for exact same feature as given in above link.
Can you please help me with that ?
Thanks

[cebor]

@GauravNagpure you have to loade some extra modules: see https://github.com/cebor/angular-highcharts#using-highcharts-modules

[GauravNagpure]

@cebor I have imported Highcharts and drilldown as instructed in https://github.com/cebor/angular-highcharts#using-highcharts-modules, like this,

import { Highcharts } from 'angular-highcharts';
import drilldown from 'highcharts/modules/drilldown.src.js';
drilldown(Highcharts)

after calling drilldown function getting following error.

Uncaught TypeError: Cannot read property 'noop' of undefined
    at drilldown.src.js:27
    at drilldown.src.js:1017

Highcharts object is seems to be undefined which is imported from 'angular-highcharts'.

[gaurishrane]

I am also facing the same issue try with importing but not able to get the result.
Please anyone has a solution on this.

[Franky238]

Same issue... Highcharts undefined also with heatmap.module.js

[Sathiesh-Cango]

@cebor I'm also facing the same issue which @GauravNagpure facing.

import { Highcharts } from 'angular-highcharts';
import drilldown from 'highcharts/modules/drilldown.src.js';
drilldown(Highcharts)

while executing the program drilldown function getting following error.

Uncaught TypeError: Cannot read property 'noop' of undefined
at drilldown.src.js:27
at drilldown.src.js:1017

Please help us to solve this issue as soon as. Thanks in advance

[Franky238]

@Sathiesh-Cango try my solution

import Highcharts from 'highcharts';
import drilldown from 'highcharts/modules/drilldown.src.js';
drilldown(Highcharts)

Because Highcharts is undefined from this library. Try to import it directly from highcharts library. (Be careful it is without {}

[Sathiesh-Cango]

Thanks @Franky238, drilldown function is working.
And I have one more doubt as how to import 3D charts

[Franky238]

import highcharts3D from 'highcharts/js/highcharts-3d.src.js'

but i am not sure. Please let me know if it is working

[Sathiesh-Cango]

I'm also not able to load the area charts.
I used type: 'arearange',

[Sathiesh-Cango]

@Franky238 I imported this for 3d effect import highcharts3D from 'highcharts/js/highcharts-3d.src.js' in my component, but it is not working. Please help me...

[Franky238]

so you need to call it like

highcharts3D(Highcharts);

[cebor]

Hello, i recommend follwoing way to import the highcharts ref:

import * as Highcharts from 'highcharts';
import drilldown from 'highcharts/modules/drilldown.src.js';
drilldown(Highcharts)

I opened an issue @ rollup which i think is responsible for this. rollup/rollup#1675

[Franky238]

@cebor true story... tslint error because highcharts has no default export

[Sathiesh-Cango]

@Franky238 I tried like below
import drilldown from 'highcharts/modules/drilldown.src.js';
import highcharts3D from 'highcharts/js/highcharts-3d.src.js';
drilldown(Highcharts);
highcharts3D(Highcharts)

while executing I got an error as

DashboardComponent.html:8 ERROR TypeError: this.definition is not a function
at a.SVGRenderer. (http://localhost:4200/vendor.bundle.js:4281:22)
at Array.forEach ()
at a.each (http://localhost:4200/vendor.bundle.js:3680:325)
at a.SVGRenderer. (http://localhost:4200/vendor.bundle.js:4274:13)
at a.SVGRenderer.a.(anonymous function) [as init] (http://localhost:4200/vendor.bundle.js:3671:186)
at new a.SVGRenderer (http://localhost:4200/vendor.bundle.js:3713:378)
at a.Chart.getContainer (http://localhost:4200/vendor.bundle.js:3891:309)
at a.Chart. (http://localhost:4200/vendor.bundle.js:5499:21)
at a.Chart.a.(anonymous function) [as getContainer] (http://localhost:4200/vendor.bundle.js:3671:186)
at a.Chart.firstRender (http://localhost:4200/vendor.bundle.js:3905:431)

Please help

[Franky238]

@Sathiesh-Cango hard question. In my case it is working.

[Sathiesh-Cango]

Hi @Franky238 now 3D working. I imported as
import highcharts3D from 'highcharts/highcharts-3d.src.js';
'highcharts3D(Highcharts)`
Thanks for the initial Support

[Sathiesh-Cango]

I'm also not able to load the area charts.
I used type: 'arearange',

[GauravNagpure]

import * as Highcharts from 'highcharts'; import drilldown from 'highcharts/modules/drilldown.src.js'; drilldown(Highcharts)
this code works for me. Thanks @cebor

[cebor]

This is the "new way" to import Highchartsmodules: https://github.com/cebor/angular-highcharts/releases/tag/v4.0.0

[Sathiesh-Cango]

@cebor I tried to import as per v4.0.0 and also I updated in package.json for angular-highcharts to ^4.0.0 but I get an error while importing as

node_modules/angular-highcharts/angular-highcharts"' has no exported member 'HighchartsModule'.

is there need to do any more configuration?
//app.module.ts

//package.json

[Franky238]

you need register provider... read readme file propertly

@NgModule({
  providers: [
    { provide: HIGHCHARTS_MODULES, useValue: [exporting] } // apply Highcharts Modules
  ]
})

[Sathiesh-Cango]

@Franky238 I did that too but importing itself occurring error. so providers also showing error

//registering in provider

while trying to run ng serve

I'm getting an error as

/node_modules/angular-highcharts/chart.d.ts (1,1): Cannot find type definition file for 'highcharts'.

[cebor]

@Sathiesh-Cango

rm -r node_modules && npm i

[Sathiesh-Cango]

@cebor I did the above command, the same error occurs.

[cebor]

@Sathiesh-Cango try to update to 4.0.1 this should fix your issues

[Sathiesh-Cango]

@cebor I updated to 4.0.1

Eventhough I'm facing problem while running the ng serve itself

node_modules/angular-highcharts/chart.d.ts (1,1): Cannot find type definition file for 'highcharts'.

[cebor]

1. npm i -D @types/highcharts
2. There was an issue with AOT compiler. Try the following:

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

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

@NgModule({
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
  ]
})

[Sathiesh-Cango]

@cebor I tried with above guidelines, now I'm facing error while starting the ng serve as

Still I can't able to import in app.module, it showing error

[cebor]

@Sathiesh-Cango for me this looks you are using 4.0.0 not 4.0.1.

Try to clean npm/yarn caches, remove node_modules and yarn.lock/package-lock.json.

[Sathiesh-Cango]

Thanks @cebor now the errors are solved but I don't know the difference of previous version and the current version because in component I'm importing import * as Highcharts from 'highcharts';. in v4.0.1 also
Similarly
import drilldown from 'highcharts/modules/drilldown.src.js';
import highcharts3D from 'highcharts/highcharts-3d.src.js';
drilldown(Highcharts);
highcharts3D(Highcharts);

So I don't know what is the benefits of it.

Any one can explain it?