Possibility to set specific timezone for time axis

What problem does this feature solve?

In our case, we have many clients arround the world. We want have the ability to show their data using their timezone. Actually, Echarts use GMT dates to set xAxis intervals labels and current browser timezone for date format.

We correctly set the correct timezone in formatter but, for intervals, we have already the problem of GMT.

It’s a really important feature for us.

What does the proposed API look like?

An option, in xAxis to set timezone should be great to fix the problem :

xAxis : {
    type : 'time',
    timezone : 'Europe/Paris',  // with that, all xAxis times are manipulated using this timestamp
}

[throrin19]

I found how to resolve this with date-fns-tz :

I force the dateTime in UTC but converted in specific timezone using function utcToZonedTime. And with that, all showed dates are correctly showed in specific timezone without any problems :

import { utcToZonedTime, format } from 'date-fns-tz';

const timezone = 'America/Boise';
const time = [
    1615868012847,
    1615889612847,
];

const data = [
    // data array with [time, value] items
];

const options = {
    xAxis   : {
        type        : 'time',
        min         : utcToZonedTime(time[0], timezone),
        max         : utcToZonedTime(time[1], timezone),
    },
    tooltip : {
        trigger     : 'axis',
        confine     : true,
        axisPointer : {
            animation   : false,
            label       : {
                formatter({ value }) {
                    // used to already show datetime completelly
                   return format(value, 'yyyy-MM-dd HH:mm:ss', { timeZone : timezone });
                },
            },
        },
    },
    series : [{
        type : 'line',
        name : 'test',
        data : data.map(item => [utcToZonedTime(item[0], timezone) ,item[1]]),
    }],
};

[ptulou]

We are also looking for something like this. We allow users to set the time zone they want to see and that time zone may be different from the browser’s time. We’re passing in ISO strings for the times and it seems whether I pass in UTC, or specific time zones echarts always (correctly) converts them to the browser’s time zone. We tried to work around this by leaving off the time zone information which mostly works except it does not handle the transition to/from DST as one might expect.

What we would like would be a way to set a time zone for the whole chart, or perhaps per series. All times passed into the data would be displayed and calculated in that time zone rather than the browser’s time zone.

Our fallback solution in the interim is to continue to pass in UTC times and override every tooltip and axis formatter to convert to the time zone the user specified to make it appear like the data is in the right time zone. The only draw back to this approach that I’ve found is that the axis ticks that are chosen are not nice round times like there would normally be (i.e. it chooses to put a tick at what appears to be 3 am instead of midnight).