Search code examples
angulartypescripthighchartsangular2-highcharts

How to change Time Zone in Angular2-HighCharts?


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>

Solution

  • 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