ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

X-axis with date behaving differently in Chrome

Please check: https://cloud.highcharts.com/show/S__QgK2mu

On my computer:
For Firefox and Edge the x-axis shows up nicely with only year numbers.
In Chrome, full dates are displayed and creates chaos.

I have a Norwegian localization setting, which seems to be picked up by Chrome somehow, but ignored by Edge and Firefox?

How do I make Chrome show years only?

Cheers,
Ole
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: X-axis with date behaving differently in Chrome

Hi, ceeol!

It is hard to say why your labels are displayed incorrectly without seeing your code/settings. If you want to display years only, could you set this option and let me know if it worked? Go to: Customize Chart -> ADVANCED -> X Axis -> Labels -> Format: {value:%Y}

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Still doesn't work, it is as if Chrome doesn't understand that this is a date. Can I send you my full json-config to an e-mail address?

Regards,
Ole
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: X-axis with date behaving differently in Chrome

Rafal Sebestjanski,
Highcharts Team Lead
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: X-axis with date behaving differently in Chrome

Hi, Ole

I copied your chart config and everything works fine in my chart. The only difference is data - for obvious reasons I couldn't copy your data, I just added my own few points: https://cloud.highcharts.com/show/B1iW79qyK

Could you try to test your chart with a different sample data?

Rafal
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Hi Rafal,

Not entirely clear to me why you couldn't use my data, the data is included at the bottom of the configuration, isn't it?
Also, I have no way of establishing whether your graph makes sense, since all the "x's" are 1970... Are these really dates?

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

Re: X-axis with date behaving differently in Chrome

The data you sent me:

Code: Select all

"Policy Rate\"\n\"01.01.2004\";2.25\n\"02.01.2004\";2.25\n\"05.01.2004\"......
is not readable and I can't use it. Can you send me your csv file?

I updated my chart with real sample data which is:
16 November 2005 12:48:55
16 November 2006 12:48:55
16 November 2007 12:48:55
16 November 2008 12:48:55

https://cloud.highcharts.com/edit/192349
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Well, that's what the interface gave me in "Preview options".
I thought maybe that could be reused...

Sending you the csv-file...

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

Re: X-axis with date behaving differently in Chrome

Ole,

It is recommended to feed the chart with data in number format. For now, your data is a string format and that's why Cloud is confused. Cloud handles this format in some cases, but it is still better and recommended to provide x data as a timestamp (number) format.

If you'd like to stay with your current data, you could use this workaround. I wrote a function that will parse your date string and return only a year:

Code: Select all

"labels": {
      //"format": "{value:%}"
      formatter: function() {
        let arr = this.value.split(".")
        return arr[2]
      }
    }
Let me know if you have any additional questions.

Best regards!

edit: I can see that split() method doesn't work on other browsers. It will be best if you just change the format of your data.
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Ok,

So we are getting somewhere. You are saying that cloud is confused, but in reality it is Chrome that is confused. The other browsers work. Do you treat Chrome differently from other browsers?

Also, you claim that this is a text format, but Excel understands this format as a date, and this is indeed the format I am getting from the data provider. You couldn't possibly be expecting all dates to be UNIX time, e.g. seconds since 1970? How would I explain that to a novice user of the platform? Don't think Excel can deliver that, which means that in reality you will not be able to read Excel nor CSV date formats properly.

One misunderstanding: It is not that I want years only in a static way, I would like the x-axis to scale and adapt, just the way it already works in Edge and Firefox.

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

Re: X-axis with date behaving differently in Chrome

Hi, ceeol,

Sorry for the late reply - I am still waiting for some comments.
You were right, I misinterpreted your issue and Cloud docs. I spent a lot of time looking for a real issue and I found that the problem doesn't affect Cloud only but our whole Highcharts library. I reported it 3 days ago as a bug (and this is where I am waiting for comments and fix) here: https://github.com/highcharts/highcharts/issues/9565

Let me know if you have any additional questions at this moment.

Kind regards!

ps. Cloud 3.0 will be released on Thursday this week ;)
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Cool, looking forward to getting this solved…

Also, eagerly awaiting version 3 :-)!

Regards,
Ole
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: X-axis with date behaving differently in Chrome

Hi, ceeol,

This issue has been solved. Chrome couldn't read date data with dot notation like 01.01.2005. You can find more info on our GitHub channel.

Working jsFiddle with fixed Highcharts module: https://jsfiddle.net/4f9xyg62/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ceeol
Posts: 17
Joined: Tue Oct 30, 2018 11:50 am

Re: X-axis with date behaving differently in Chrome

Had a look at
1. The graph in the link that I sent you, which was not fixed
2. The jsfiddle example.

Again, I never wanted only the years to show, but I observed like you were saying that Chrome didn't understand the datetime format.
So I removed the formatting itself, but kept the "datetime" setting from jsfiddle, and it seemed to work.

Went back to my own example, and explicitly set "datetime" as the format of the x-axis in the new user interface. That should be the only thing necessary, I thought. But no, now there is some kind of decimal format showing up, please have a look at https://cloud.highcharts.com/show/S__QgK2mu in the different browsers again.

Cheers,
Ole
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: X-axis with date behaving differently in Chrome

Ole,

The issue has been fixed and it's available in this module: https://github.highcharts.com/js/modules/data.src.js but not available in the main module which Cloud uses: https://code.highcharts.com/js/modules/data.src.js
Please be patient, changes will be merged with the main module soon.

Best regards!

edit: we have changed the used module only in your one chart - you can see that years are displayed correctly now.
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”