sjdev
Posts: 3
Joined: Mon May 09, 2016 11:59 pm

Date/Time label is shown in wrong value on X-Axis

Here I have an issue with the latest Highchart.

I am trying to display the data in specified local time zone (for instance, UTC-3:00). But the date/time labels are shown wrong values on X-Axis. I am not sure why. Please help.

Here is the sample I set up:
http://jsfiddle.net/txgjpaLn/9/

Thank you a lot and I appreciate it a lot,
Frank
Last edited by sjdev on Tue May 10, 2016 5:50 pm, edited 1 time in total.
Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: Date/Time is shown in wrong timezone

Hi,

So your tooltip displays wrong date? Unfortunately I am not able to recreate your issue. When I change UTC time it looks like the time changed as well:
http://jsfiddle.net/txgjpaLn/8/

I am wondering how your data should look without offset. Right now it shows 2am and I think that maybe you would like to show 2pm. Maybe this is the reason of your issue?

Kind regards.
Grzegorz Blachliński
Highcharts Developer
sjdev
Posts: 3
Joined: Mon May 09, 2016 11:59 pm

Re: Date/Time is shown in wrong timezone

Izothep wrote:Hi,

So your tooltip displays wrong date? Unfortunately I am not able to recreate your issue. When I change UTC time it looks like the time changed as well:
http://jsfiddle.net/txgjpaLn/8/

I am wondering how your data should look without offset. Right now it shows 2am and I think that maybe you would like to show 2pm. Maybe this is the reason of your issue?

Kind regards.
Thank you for your quick response. I realized that i converted local time to UTC time by using wrong time offset. Now the time zone issue is resolved. The remain issue is the X-Axis label. It shows wired label values. Here is the sample site:
http://jsfiddle.net/txgjpaLn/9/

Please take a look.

Thanks,
Frank
Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: Date/Time label is shown in wrong value on X-Axis

Hi,

You forgot to add type:'datetime' to your xAxis so this axis don't know that it should change miliseconds into date strings:
http://api.highcharts.com/highcharts#xAxis.type


Here is an example with datetime xAxis type:
http://jsfiddle.net/txgjpaLn/11/

Kind regards
Grzegorz Blachliński
Highcharts Developer
sjdev
Posts: 3
Joined: Mon May 09, 2016 11:59 pm

Re: Date/Time label is shown in wrong value on X-Axis

Hi Grzegorz,

Thank you for your quick response. I am not sure if that X-Axis type property is a new requirement for chart control. I think I did not specify it in my previous work and chart render well. Is it because that I specified interval property somewhere?

Thanks,
Frank
Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: Date/Time label is shown in wrong value on X-Axis

Hi,

I think that this is normal functionality when you are adding numbers to your axis. Sometimes people want to show big numbers on this axis and I think it would be problematic if it would always convert this numbers to date strings.

Kind regards.
Grzegorz Blachliński
Highcharts Developer
ShwetaV
Posts: 4
Joined: Mon Jan 06, 2020 8:04 am

Re: Date/Time is shown in wrong timezone

Hi,
In this http://jsfiddle.net/txgjpaLn/8/ example time is 21.29 which is correct but in X-axis it auto adjusting to 21.30 .i want one example in that time should start from 21.29 and next values should incremented by 21.39,21.49 etc....



thank you
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Date/Time label is shown in wrong value on X-Axis

Hi,

You should use xAxis.tickPositions: https://api.highcharts.com/highcharts/x ... kPositions to display your ticks in the desired place and xAxis.labels.formatter: https://api.highcharts.com/highcharts/x ... .formatter to format your labels property

Demo: http://jsfiddle.net/BlackLabel/apL3zkd9

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ShwetaV
Posts: 4
Joined: Mon Jan 06, 2020 8:04 am

Re: Date/Time label is shown in wrong value on X-Axis

rafalS wrote: Mon Jan 06, 2020 1:07 pm Hi,

You should use xAxis.tickPositions: https://api.highcharts.com/highcharts/x ... kPositions to display your ticks in the desired place and xAxis.labels.formatter: https://api.highcharts.com/highcharts/x ... .formatter to format your labels property

Demo: http://jsfiddle.net/BlackLabel/apL3zkd9

Best regards!

Hi,
thank you for this solution ,but i have Dynamic Data and it has date like 12/10/2019 11:01:51 PM
12/11/2019 12:01:51 AM
12/11/2019 1:01:51 AM
12/11/2019 2:01:51 AM
12/11/2019 3:01:51 AM
12/11/2019 4:01:51 AM
12/11/2019 5:01:51 AM
12/11/2019 6:01:51 AM
12/11/2019 7:01:51 AM this format ,it is in string format and and i am converting it into date using new Date() but i am not getting x axis label..it is coming blank.
xAxis: {
gridLineWidth: 1,
tickPositions: (function () {
// generate an array of random data
var data = [];
for (var i = 0; i < DateValues.length; i++) {
data.push(new Date(DateValues));
}
return data;
}()),
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value)
}
},
ordinal: false,
type: 'datetime',
title: {
text: '',
align: 'high',
style: {
color: '#6D869F',
fontSize: '10px'
}
},
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b. %e',
week: '%b. %e',
month: '%b. %y',
year: '%Y'
}
}

plz help ...


thank you.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Date/Time label is shown in wrong value on X-Axis

Please, reproduce your code in online code editor like jsFiddle.
Rafal Sebestjanski,
Highcharts Team Lead
ShwetaV
Posts: 4
Joined: Mon Jan 06, 2020 8:04 am

Re: Date/Time label is shown in wrong value on X-Axis

rafalS wrote: Wed Jan 08, 2020 9:51 am Please, reproduce your code in online code editor like jsFiddle.
HI,
this is my code http://jsfiddle.net/shwetaV/5mz6h3dp/3/


Thank you.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Date/Time label is shown in wrong value on X-Axis

Hi,

You cannot put your data like new Date("12/10/2019 10:23:12 PM") because it returns string, not number or date. Here is a valid way of defining a date: https://jsfiddle.net/BlackLabel/etyn3afo

But this data is not similar to the data you provided in the previous example. If you have dynamic data, you can use tickPositioner or you can calculate your tickPositions and update them in fly.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ShwetaV
Posts: 4
Joined: Mon Jan 06, 2020 8:04 am

Re: Date/Time label is shown in wrong value on X-Axis

rafalS wrote: Fri Jan 10, 2020 1:37 pm Hi,

You cannot put your data like new Date("12/10/2019 10:23:12 PM") because it returns string, not number or date. Here is a valid way of defining a date: https://jsfiddle.net/BlackLabel/etyn3afo

But this data is not similar to the data you provided in the previous example. If you have dynamic data, you can use tickPositioner or you can calculate your tickPositions and update them in fly.

Best regards!
Hi,
i got the solution by using Date.parse.
Thank you
danielcucvara
Posts: 1
Joined: Sun Dec 04, 2022 11:12 am

Re: Date/Time label is shown in wrong value on X-Axis

Hi,
I have a issue displaying Date.
Here are my chart options:
https://jsfiddle.net/1vfa5xs6/
The value of parseWeights(data) which is asigned to series.data:

Code: Select all

	[
	[Fri Dec 02 2022 01:00:00 GMT+0100 (Central European Standard Time), 72.1],
	[Thu Dec 01 2022 01:00:00 GMT+0100 (Central European Standard Time), 71.2],
	[Wed Nov 30 2022 01:00:00 GMT+0100 (Central European Standard Time), 73.1]
	]
The chart is displaying this:
Thursday, Jan, 1, 00:00:00.001
Weight: 72.1

Could you please help me find the issue ?
Thank you.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Date/Time label is shown in wrong value on X-Axis

Hello,

Welcome to our forum and thanks for contacting us with your question!

When using the datetime type on the axis, the days must be passed in milliseconds.

Demo: https://jsfiddle.net/BlackLabel/td2w9n8g/

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”