Drill down is not working for angular-highcharts about angular-highcharts HOT 30 CLOSED

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

from angular-highcharts.

@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'.

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

@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

from angular-highcharts.

@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 {}

from angular-highcharts.

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

from angular-highcharts.

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

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

from angular-highcharts.

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

from angular-highcharts.

@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...

from angular-highcharts.

so you need to call it like

highcharts3D(Highcharts);

from angular-highcharts.

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

from angular-highcharts.

@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

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

@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

from angular-highcharts.

you need register provider... read readme file propertly

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

from angular-highcharts.

@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'.

from angular-highcharts.

@Sathiesh-Cango

rm -r node_modules && npm i

from angular-highcharts.

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

from angular-highcharts.

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

from angular-highcharts.

@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'.

from angular-highcharts.

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
  ]
})

from angular-highcharts.

@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

from angular-highcharts.

@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.

from angular-highcharts.

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?

from angular-highcharts.