ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Date axis notation

Hello,

I have created 2 charts and they display dates on the horizontal axis differently


https://prnt.sc/ockcc4

and

https://prnt.sc/ockd0l

Settings are identical for both charts, axis type set to linear as if I change it to datetime it corrupts the dates. Dataset used to create the two charts has the dates formatted in the same way mm/dd/year

Any suggestion on how I can achieve the notation shown in the second screenshot above (less crammed labels and just the years)?

I'd like to add that the inconsistency is appearing in all browsers, Chrome, FireFox and Safari.
Thanks in advance

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

Re: Date axis notation

Hi Daniele,

Thank you for contacting us with your questions.

The first screen is with xAxis.type: 'category'
And the second (desired) is: 'datetime'

Please, make sure that both types are set to datetime. Let me know it now, I'll write the custom code that will force it to.

If you can't have datetime, then what do you mean saying "if I change it to datetime it corrupts the dates"?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Re: Date axis notation

Hi,

both charts have type set to linear, not category or datetime.
If I change the axis to datetime I get this:

https://prnt.sc/ocmv6k

This is what I mean with "it corrupts the dates"
In addition, the chart looks ok while in Highcharts cloud, the issue appears in all browsers when embedded.

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

Re: Date axis notation

ddeblasio,

Can you give me a link to the website with your charts?

Also, can you provide me a sample of your data?

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Re: Date axis notation

Hi,

I cannot give you a link to the site as it has not yet launched, below the full dataset. I also sent a private message with more data,

Date Capital Investment Inventory Finance
10/01/2018 -14.2 9.8
07/01/2018 -17.3 13.6
04/01/2018 -8.6 -3.2
01/01/2018 0.8 0.8
10/01/2017 -11 13.3
07/01/2017 -11 0
04/01/2017 -10.9 -7.7
01/01/2017 11.5 -7.8
10/01/2016 -2.6 0
07/01/2016 -6 -6
04/01/2016 0 0
01/01/2016 -4.9 0
10/01/2015 0.6 0.6
07/01/2015 0 12.9
04/01/2015 10.5 0
01/01/2015 1.1 0
10/01/2014 3.9 0
07/01/2014 3.8 3.8
04/01/2014 24.6 13.5
01/01/2014 25.2 6
10/01/2013 37.6 25.6
07/01/2013 19.4 22.8
04/01/2013 2.8 0.7
01/01/2013 3.9 3.9
10/01/2012 -0.9 3.1
07/01/2012 -6.5 0.7
04/01/2012 -1.3 0
01/01/2012 -1.6 -0.6
10/01/2011 -3.2 0.7
07/01/2011 -12.2 -0.6
04/01/2011 -7.4 7.4
01/01/2011 -0.9 6.2
10/01/2010 -0.8 0.7
07/01/2010 2.3 3.2
04/01/2010 0.7 1.8
01/01/2010 -0.7 21
10/01/2009 -5.2 6.5
07/01/2009 -6.6 19.7
04/01/2009 -24.2 -6.2
01/01/2009 -28.4 -19.9
10/01/2008 -47.5 12.6
07/01/2008 -51.7 4
04/01/2008 -15.1 -0.7
01/01/2008 -10.6 9.9
10/01/2007 -8.3 -1.1
07/01/2007 -27.5 -21.5
04/01/2007 -4.2 -15.9
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Date axis notation

Ok, first issue that I see on your screenshot (https://prnt.sc/ocmv6k) and when looking at your data is that your x values are not sorted ascending. You should get Highcharts error 15: https://www.highcharts.com/errors/15

If you fix your data, please try to set xAxis type to datetime and let me know if it worked.

Another thing I had to correct when I wanted to use your data is that the chart couldn't read the format mm/dd/yy. I had to change it to dd//mm/yy. Can you check what will happen if you swap months with days with your data too?

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Re: Date axis notation

I will give the sorting a try. I had to swap the date format from dd/mm/yy to mm/dd/yy as the chart was looking completely skewed and using the American format fixed it for me.
Thanks for helping!
ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Re: Date axis notation

Unfortunately the sorting and using the non US notation has not solved the problem.
Now the shape of the chart is correct but the X axis is showing the wrong labels in Highcharts Cloud as well (not just when embedded in browser) when I select datetime - see screenshot below with the properties pane open

https://prnt.sc/ocpnip

Is there anything else I can try? How can I send you the Excel file with the dataset?
Just to clarify, the chart is shaped correctly but the X axis labels are incorrect
Thanks,

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

Re: Date axis notation

Daniele,

Don't worry, if the shape is displayed correctly, editing xAxis labels will be easy and can be done in a few different ways. But I am looking for the best solution for you without using the custom code.

You can send your Excel dataset on my email - I will test how does it look in my environment.

[email protected]

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ddeblasio
Posts: 6
Joined: Tue Jul 09, 2019 10:59 am

Re: Date axis notation

Thanks Rafal, I have emailed you the dataset and link to site.
I look forward to hearing from you,

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

Re: Date axis notation

The problem was with x data. Cloud puts x values into a new Date() constructor as argument and parse it (date) to a timestamp format. But different browsers have different date formats implementations.
Firefox, for example, isn't able to read the format DD/MM/YYYY as in the above data.

The solution is to use the universal format that works with all browsers: YYYY-MM-DD
For example: 2013-01-10
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”