CODEWITHSUNDEEP
highchartsangular5
JSP
JSP

Reputation: 43

How to set Highcharts options in Angular 5

I tried to set following 

Highcharts.setOptions({ lang: { thousandsSep: ',' } });

Trying to set thousand separator as default is space.

Error TS2686: 'Highcharts' refers to a UMD global, but the current file is a module. Consider adding an import instead.

I am using "highcharts": "^6.1.0".

import {Component, OnInit, ViewEncapsulation,Inject, ViewChild,ElementRef,AfterContentInit, OnDestroy, Input} from '@angular/core';
import { chart } from 'highcharts';
import { Race } from '../../../race';
import { BaseComponent } from '../../../base/base.component';
@Component({
  selector: 'nc-mobility',
  templateUrl: './mobility.component.html',
  styleUrls: ['./mobility.component.css']
})
export class MobilityComponent extends BaseComponent implements OnInit, AfterContentInit, OnDestroy {
  @Input() mobility: Array<any>;
  // highchart declarations
  @ViewChild('mobilityDist') chartTarget: ElementRef;
  chart: Highcharts.ChartObject;

  constructor() { super(); }

  ngOnInit() {
  }

  ngAfterContentInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'column'
      },
        series: this.mobility.map(x => {
        return { name: x.name, data: [x.value] };
      }),
      credits: {
        enabled: false
      }
    };
    this.chart = chart(this.chartTarget.nativeElement, options);
  }
  ngOnDestroy() {
    this.chart = null;
  }
}

Upvotes: 1

Views: 3155

Answers (2)

Julio fils
Julio fils

Reputation: 75

// import Highcharts
import Highcharts from "highcharts";

//set the options in your constructor
Highcharts.setOptions({
  lang: {
    thousandsSep: ","
  }
});

Upvotes: 1

daniel_s
daniel_s

Reputation: 3732

Error occurs because you import only one function from Highcharts, by this:

import { chart } from 'highcharts';

In order to use setOptions, you need to also import this function or import whole Highcharts module, just like that:

import * as Highcharts from 'highcharts';

Upvotes: 2

Related Questions