CODEWITHSUNDEEP
angularhighcharts
Amichay_Atias
Amichay_Atias

Reputation: 125

implementing HighCharts-xrange in angular4

I am trying to use HighCharts of type xrange:

import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from '../../../../node_modules/angular2-highcharts/dist/HighchartsService';

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

  return hc;
} 
@NgModule({
  imports: [
    /* case 1 */
    ChartModule 
    // in this case the code compiles but I get Error 17 in console

    /* case 2 */
    /* ChartModule.forRoot(require('highcharts'), require('highcharts/modules/xrange')) */
    // in this case the code doesn't compiles with the error:
    // "Error encountered resolving symbol values statically. 
    //  Calling function 'ChartModule', function calls are not supported."
  ],
  providers: [
    {
        provide: HighchartsStatic,
        useValue: highcharts,
        useFactory: highchartsFactory
    }
})

As shown in both cases I have a problem creating the chart. I have been told that the first case is the better approach and I would like to continue in this direction.

I saw many posts that use this approach and none of them mention this error.

Upvotes: 1

Views: 1144

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

I suggest you to use official highcharts npm package like in this example, but you want to use angular2-highcharts.

Update you app-module with

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
import xrange from "highcharts/modules/xrange";
xrange(Highcharts);
Exporting(Highcharts);
export function highchartsFactory() {
  return Highcharts;
}
@NgModule({
  imports:      [ BrowserModule, FormsModule , ChartModule],
  declarations: [ AppComponent, HelloComponent ],
  providers: [
    { provide: HighchartsStatic, useFactory: highchartsFactory } // add as factory to your providers
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Stackblitz demo

Upvotes: 2

Related Questions