Highcharts xrange-series throws `x is not a function`

Question

I'm using angular 4(Angular-cli) environment and trying to use highcharts of type xrange.

after running the npm install command npm install highcharts --save I wrote these lines of code:

import * as Highcharts from 'highcharts'; // importing highcharts
declare var require: any; // throws error if removed
require('highcharts/highcharts-more')(Highcharts); 
require('highcharts/modules/xrange')(Highcharts);

the line require('highcharts/modules/xrange')(Highcharts); throws the x is not a function error.

any direction for a solution?

UPDATE

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from '../../../../node_modules/angular2-highcharts/dist/HighchartsService';
import { ChartForProjectComponent } from './components/chart-forProject/chart-forProject.component';
...

declare var require: any;

export function highchartsFactory() {
  const hc = require('highcharts');
  const dd = require('highcharts/modules/xrange');
  dd(hc);

  return hc;
}

@NgModule({
  declarations: [
      ChartForProjectComponent //this is the componnet that build the chart
  ],
  imports: [
      CommonModule,
      FormsModule,
      ChartModule
  ],
  providers: [
      {
        provide: HighchartsStatic,
        useFactory: highchartsFactory
      },
  ]
})
export class ProjectModule { }

this builds without problems but at runtime when I try to build the chart I getting this error in the console

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
at Object.a.error (highcharts.js:10)
at a.Chart.initSeries (highcharts.js:245)
at highcharts.js:270
at Array.forEach (<anonymous>)
at a.each (highcharts.js:28)
at a.Chart.firstRender (highcharts.js:270)
at a.Chart.<anonymous> (highcharts.js:245)
at a.fireEvent (highcharts.js:31)
at a.Chart.init (highcharts.js:244)
at a.Chart.getArgs (highcharts.js:244)

did you add this to your app.module? – Chellappan வ Jul 18 '18 at 08:55 — Chellappan வ, Jul 18 '18 at 08:55
No. care to direct me where to look for how to do it? – Amichay_Atias Jul 18 '18 at 09:11 — Amichay_Atias, Jul 18 '18 at 09:11

Chellappan வ · Accepted Answer · 2018-07-19T07:45:31.120

2

You need to import angular2-highcharts inside your app.module.ts

For more Details check this out : https://github.com/gevgeny/angular2-highcharts#setting-up

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(require('highcharts'))
    ],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

If you want to add more module you have to add inside forRoot method like this

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
+       require('highcharts/highchart-3d'),
+       require('highcharts/modules/xrange')
      )
    ],
 providers: [
    {
      provide: HighchartsStatic,
      useValue: highcharts
    },
})

edited Jul 19 '18 at 07:45

answered Jul 18 '18 at 09:13

Chellappan வ

23,645
3
29
60

is there a reason why it throws an error `Cannot find name 'require'.`? – Amichay_Atias Jul 18 '18 at 09:35
1

may this will help https://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4 – Chellappan வ Jul 18 '18 at 09:36
now I get this error: `Error encountered resolving symbol values statically. Calling function 'ChartModule', function calls are not supported.` do you know how to solve it? – Amichay_Atias Jul 19 '18 at 06:21
https://stackoverflow.com/questions/42636948/angular-2-aot-calling-function-chartmodule-function-calls-not-supported check this if it is not help i will try – Chellappan வ Jul 19 '18 at 06:44
I used in your solution but when I build it with `ng serve` is bring me this error if I delete the `.forRoot(require('highcharts'), require('highcharts/modules/xrange'))` and after add it and save it's work – Amichay_Atias Jul 19 '18 at 06:56
add useValue: highcharts inside and try again – Chellappan வ Jul 19 '18 at 07:45
I removed the `useFactory: highchartsFactory` and added the `useValue: highcharts` and got `Cannot find name 'highcharts'.` – Amichay_Atias Jul 19 '18 at 08:17

Highcharts xrange-series throws `x is not a function`

1 Answers1