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>
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