Date axis notation

[ddeblasio]

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]

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!

[ddeblasio]

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]

ddeblasio,

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

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

Regards.

[ddeblasio]

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]

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.

[ddeblasio]

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]

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]

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!

[ddeblasio]

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

Daniele

[rafalS]

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