Possibility to set specific timezone for time axis

[throrin19]

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
}

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[throrin19]

In our case, we set the formatter as function to convert date to specific timezone and, in the showed labels, we see that when the interval is one day or more, the corresponding day is based on UTC dates.

In the following example, here is a 4-day display with dates displayed in GMT+1 :

Normally, and if I understand the logic of Echarts correctly, in this case the interval should make dates every 12 hours, i.e. 00:00 and 12:00 for each label. But here, we can see that it is the case, but on the UTC date

[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).

[NotAndD]

We would be interested into this functionality as well, being able to specify a timezone and have everything rendered as if we were in that timezone (instead of the current browser timezone) would be great.

Right now, similarly to the hack that was suggested, we do the same thing but with moment.tz.

/**
 * Will hard-shift a timestamp so that, if rendered in current timezone, it will look as it is instead
 * into the desired timezone.
 */
export function utcToZonedTime(utcTime: number, timezone: string) {
  const ourTimezone = moment.tz.guess();
  const ourOffsetInMillis = moment.utc(utcTime).tz(ourTimezone).utcOffset() * 60000;
  const givenTimezoneOffsetInMillis = moment.utc(utcTime).tz(timezone).utcOffset() * 60000;

  return utcTime + givenTimezoneOffsetInMillis - ourOffsetInMillis;
}

/**
 * Will revert what utcToZonedTime had done.
 */
export function zonedTimeToUtc(zonedTime: number, timezone: string) {
  const ourTimezone = moment.tz.guess();
  const ourOffsetInMillis = moment.utc(zonedTime).tz(ourTimezone).utcOffset() * 60000;
  const givenTimezoneOffsetInMillis = moment.utc(zonedTime).tz(timezone).utcOffset() * 60000;

  return zonedTime - givenTimezoneOffsetInMillis + ourOffsetInMillis;
}

It kinda works.. but it would be way better if ECharts could do this on its own so that dates do not need to be modified.

[DaveMDS]

We also are in the same situation: we need to show charts localized in the timezone of where the data has been collected, not the browser time.

Actually we are using the formatter function of xAxis to localize the time, but in this way we are loosing all the cool automatic formatting feature of echart.

having a timezone option somewhere would be really usefull

[freshollie]

It's worth noting that the convert UTC times to their "corrected" timezone technique works, apart from days with daylight savings.

• At the point of switching to daylight savings, the graph includes the skipped time (which means no data for that period)
• At the point of exiting daylight savings the graph has to repeat the values for the "double hour" (see attached picture)

[pierrefaidherbe]

Any update on this ? :)

[darksidelemm]

+1 on this one! We work in UTC for all of our data.

[rvillette]

+1...

[ktx-abhay]

Any update on this ?

[yl-endress]

hey guys, in #20027 (comment) I found a way to use a specific timezone and specific formatting depending on your zoom-level/data. I hope it will help some of you, as long this feature is not implemented :-)

[akenverus]

bump

[nook24]

I have resolved this using Luxon

import { DateTime } from "luxon";

const timezone = 'Europe/Berlin';

let chartOption = {
    tooltip: {
        trigger: 'axis',
        formatter: (params) => {
            //console.log(params);

            // Maybe add a loop if you want to support multiple gauges in one chart/tooltip
            const gauge = params[0];
            const dateTime = DateTime.fromISO(gauge.data[0]).setZone(timezone);
            const value = gauge.data[1];
            const seriesName = gauge.seriesName;
            const color = gauge.color;
            const marker = params[0].marker;

            const html = `<div class="row">
                <div class="col-12">
                    ${dateTime.toFormat('dd.MM.yyyy HH:mm:ss')}
                </div>
                <div class="col-12">
                    ${marker} ${seriesName} <span class="float-end bold" style="color:${color};">${value}</span>
                </div>
                </div>`;

            return html;
        }

    },
    xAxis: {
        type: 'time',
        axisLabel: {
            formatter: (value) => {
                const dateTime = DateTime.fromMillis(value).setZone(timezone);
                return dateTime.toFormat('dd.LL.yyyy HH:mm:ss');
            }
        },
    }
};

[luffy-taro]

Had to set useUTC to true and format axis labels using formatter option and return localized dates using moment or similar library.

Axis labels were rendered differently in different browsers in different timezones. The formatter: function(value){} receives different epoch values when the same chart is viewed in different timezones.

[ptandler]

I have resolved this using Luxon

@nook24 You use it only for gauge, right?

I think this does not help in case of series with time axis, when you want to use eCharts very nice feature to auto select ticks and format e.g. the beginning of the week bold using TimeScaleTick.level. In this case you would need to re-implement all of eCharts logic to calc time ticks and highlighted labels (depending on zoom level e.g. first day of week is highlighted, or first day of month, or start of the day etc.). In this case, when you have the wrong time zone, you get e.g. 02:00 highlighted for each day instead of 00:00.

[ptandler]

would be so cool if this could make it into eChart 6.0! 😍

[ievgennaida]

Would be great to have it.