How to change Time Zone in Angular2-HighCharts?

Question

I am stocked for few days now trying to change the UTC time in an area chart using Angular2-HighCharts. My back-end Api returning me some Timestamp then I inject it in the chart and, everytime it's convert in "human time" with two hours less, I know highcharts use UTC time but I am currently in GMT+2 as Oslo time. I tried to implements "timezoneOffset" in SetOptions.global.timezoneOffset and change the values inside but it doesn't change nothing in my view chart..maybe I didn't implement that value right. Maybe could I also use the timestamp from my pc ( getTimezoneOffset in Moment.js library as in the Highcharts doc api , so if anyone got an idea?

Here's my chart.ts:

  constructor(public userService3: UserService3) {


       this.options = {
        title : { text : '' },
        setOptions: ({
        global: {
            useUTC : true,
            timezoneOffset: 2 * 60
        }
        }),
        chart: {  type: 'area'},
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { type: 'datetime',
                startOnTick: false,
                endOnTick: false,
                tickInterval: 36e5 * 2, // two hours
                },
        yAxis: { min: 0,
          max: 100 },
        plotOptions: {
          series: {
              color: '#648e59',
              fillOpacity: 0.8,
              fillColor: '#648e59',
              pointInterval: 36e5 * 2 // two hours
                      }
            },
            series: [{
              name: 'Someone1',
              data: [],
            }]
        };
    }
   saveInstance(chartInstance) {
    this.chart = chartInstance;
     console.log(chartInstance);
}

    public ngOnInit () {
    this.dataSubscription = this.userService3.getData().subscribe((data) 
=> {
      this.options.series[0].data = data.data.operating_details;
      console.log(data);
   });
}
    ngOnDestroy() {
      if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
   }

and here the html:

      <chart [options]="options" (load)="saveInstance($event.context)">
      </chart>

score 2 · Accepted Answer · answered Jul 18 '17 at 11:26

2

You can change timezone offset by Highcharts.setOptions() method - it is a static Highcharts function.

There is an explanation in docs how to access static Highcharts methods:

const Highcharts = require('highcharts');

Highcharts.setOptions({
  global: {
    timezoneOffset: 2 * 60
  }
});

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        Highcharts
      )
    ],
})

example: http://plnkr.co/edit/oRuBmb46sUdbkMAnbStX?p=preview

answered Jul 18 '17 at 11:26

morganfree

12,254
1
14
21

thanks for your help but I just got one issue with your code is I already use forRoot with the RouterModule from Angular for the user links to differents module in my app ( RouterModule.forRoot(routeConfig), ) – Emile Cantero Jul 18 '17 at 13:17
I find a way to make it works ! I just add: export declare let require: any; on the top of my component where I'm using the chart, I found it there if it could help someone `https://github.com/gevgeny/angular2-highcharts/issues/193` – Emile Cantero Jul 18 '17 at 13:30

How to change Time Zone in Angular2-HighCharts?

1 Answers1