HighCharts Date format

Question

I have an application that returns JSON date to me which I display on a Highcharts bar graph. The field for the x-axis is a date and it comes back from the server is JSON format such as :"date":"2016-11-15T00:00:00.000Z"

I want to display the date on the x-axis as just 2016-11-15, or even better, display it in local date format, which in this case would be 2016-11-14 as it is GMT-5 hours.

I've read the documentation, but it doesn't seem to work. Any help is appreciated!!

Hello, Did you manage to fix the GMT-5 hours problem on the x-axis? — Manolait, Jul 02 '20 at 18:12

score 10 · Accepted Answer · answered Nov 18 '16 at 15:36

10

You can parse ISO string date to js date with the Date constructor. And then get timestamp in milisecond - which is a required format for Highcharts.

new Date("2016-11-15T00:00:00.000Z").getTime(),

In the format property, you can define how the date should be displayed.

 xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%Y-%m-%d}',
  }
},

example: http://jsfiddle.net/akehpzq4/4/

For a local time, see useUTC option.

answered Nov 18 '16 at 15:36

morganfree

12,254
1
14
21

Works great!! Thanks so much! – user2843365 Nov 18 '16 at 17:49

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

You can use this function to return format date

function ReadDate(dateTM) {
    var date = new Date(parseInt(dateTM.replace("/Date(", "").replace(")/", ""), 10));
    if (date.getFullYear() > 1 && date.getFullYear() != 1900) {
        return (date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear());
    } else return ""
}

You can read guide at this link How do I format a Microsoft JSON date?

edited May 23 '17 at 11:59

Community

1
1

answered Nov 18 '16 at 01:17

Bader

33
6

Yes, that works. But how do I call that function in the highchart? I want all dates on the x axis to use that function. Thank you so much for the help!! – user2843365 Nov 18 '16 at 01:23
Why `date.getFullYear() != 1900`? – RobG Nov 18 '16 at 01:45
xAxis: { categories: ReadDate(value), tickmarkPlacement: 'on', title: { enabled: false } }, – Bader Nov 18 '16 at 03:03
@RobG i catch value Null,you needn't have done this – Bader Nov 18 '16 at 03:08

HighCharts Date format

2 Answers2