Overview – Displaying Date-Time values on a Chart Axis

You can create charts on a Date / Time axis by setting, Date / Time values to x property of dataPoint. If you set JavaScript Date objects to x, then CanvasJS automatically figures out and renders a date/time axis. In case you want to use Timestamps instead, then you can do so by setting xValueType property of dataSeries to “dateTime”.


Basic Date-Time Example

Below we have an example where x values in dataPoint are date object.

Try it Yourself by Editing the Code below.


Date time example using TimeStamps

Below we have an example where x values in dataPoint are timeStamps (integers). It should be kept in mind that when giving values in x as dateTime stamps, one should remember to set xValueType to “dateTime” . You should also note that timestamps used are in milliseconds. You can convert Unix timestamp to milliseconds by multiplying it by 1000.

Try it Yourself by Editing the Code below.


Converting in Local Time

If date time values are stored in UTC format (on the server), it can be converted to local Time using Date.UTC function. The UTC() method returns the number of milliseconds between a specified date and midnight of January 1, 1970, according to universal time.

Example:    x: new Date (Date.UTC (2012, 10, 20))

lets understand this concept with the help of an example.

Try it Yourself by Editing the Code below.


Formatting Date Time values

There are often requirements where it is required to format date in a custom way. To read more on formatting dateTime values read formatting date and time.
Below is an example that shows abbreviated name of a month on axis.

Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 55

  1. Hello, i am using line graph with fallowing data, x-axis not scaling to day from hour, idea here is i want x-axis to scale, could you tell what is wrong

    [{“dataPoints”:[{“x”:1395637200000,”y”:26588.0},{“x”:1395723600000,”y”:68615.0},{“x”:1395810000000,”y”:67831.0},{“x”:1395896400000,”y”:35920.0}],”legendText”:”Enterprise”,”showInLegend”:true,”type”:”line”,”xValueType”:”dateTime”}]

  2. I would like to have vertical gridlines at the beginning of each month and then have the month name beneath the axis and centered horizontally between the gridlines. Is this capability already there? If not, I could perhaps try to do it myself …

      • Anjali,

        Thanks for the suggestion! After looking at the StripLines page, however, that doesn’t quite seem to be what I want to show. Can the “Formatting Date” example be modified so that (1) there are tick marks on the x-axis at the beginning of every month and (2) the month names are centered between the tick marks below the x-axis?

        Tad

  3. I would like to have date(2014-10-11) on my xaxle and time(0:1:1.23) om my yaxle. is there a way to do that?

  4. I’m using timestamps as x-values and I like very much the automatic scaling behaviour from months to days to hours if I zoom in/out.
    Now I want to change date/time formatting, eg. time format to 24 hours (hh:mm without TT) and tried this with xAxis valueFormat, but then x-values are formatted always the same, regardless of the zooming level.
    I wrote also a german culture definition and monthnames works nice, but there is no possibility to change the datetime formatstring. Is there maybe any other way?

    • Hi ! Since it’s been some time, maybe you have found a way to do this.
      I’m trying to do the same thing and was testing the formatDate function, however, I don’t know how to detect the automatic formatting (in order to change it depending on what it is) within the function.

      Did you find any workaround ?

  5. I tried to use your example for Date time example using TimeStamps with following data.
    I am getting weird time on x axis (500 ms, 000 ms, 200 ms etc)
    I am doing any mistake here?

    { x: 1428728497, y :23.866878382365},
    { x: 1428728557, y :20.422467549642},
    { x: 1428728617, y :14.559834416707},
    { x: 1428728677, y :14.363437143962},
    { x: 1428728737, y :18.799813715617},
    { x: 1428728797, y :19.133904647827},
    { x: 1428728857, y :18.570691426595},
    { x: 1428728917, y :19.195905558268},
    { x: 1428728977, y :20.945813369751},
    { x: 1428729037, y :18.404485066732},
    { x: 1428729097, y :20.908483505249},
    { x: 1428729157, y :18.282356389364},
    { x: 1428729217, y :22.355866495768},
    { x: 1428729277, y :19.75818494161},
    { x: 1428729337, y :20.750552622477},
    { x: 1428729397, y :16.754368209839},
    { x: 1428729457, y :20.546474202474},
    { x: 1428729517, y :22.450552622477},
    { x: 1428729577, y :17.373915227254},
    { x: 1428729637, y :19.719595718384},
    { x: 1428729697, y :20.314526875814},
    { x: 1428729757, y :22.298607126872},
    { x: 1428729817, y :20.596392695109},
    { x: 1428729877, y :23.759210205078},
    { x: 1428729937, y :22.395275878906},
    { x: 1428729997, y :21.49378789266},
    { x: 1428730057, y :27.279175313314},
    { x: 1428730117, y :51.119049962362},
    { x: 1428730177, y :47.204738108317},
    { x: 1428730237, y :28.098966725667},
    { x: 1428730297, y :20.719780858358},
    { x: 1428730357, y :20.87958577474},
    { x: 1428730417, y :30.556852086385},
    { x: 1428730477, y :37.925203831991},
    { x: 1428730537, y :35.507149759928},
    { x: 1428730597, y :34.366343561808},
    { x: 1428730657, y :28.153739293416},
    { x: 1428730717, y :27.860219955444},
    { x: 1428730777, y :27.905272293091},
    { x: 1428730837, y :18.990245310465},
    { x: 1428730897, y :21.615537134806},
    { x: 1428730957, y :21.23920211792},
    { x: 1428731017, y :17.422957229614},
    { x: 1428731077, y :8.6352157592773},
    { x: 1428731137, y :13.338976923625},
    { x: 1428731197, y :12.926325480143},
    { x: 1428731257, y :13.236938095093},
    { x: 1428731317, y :15.778014882406},
    { x: 1428731377, y :16.093700281779},
    { x: 1428731437, y :15.09569384257},
    { x: 1428731497, y :14.178426106771},
    { x: 1428731557, y :13.171423339844},
    { x: 1428731617, y :16.358667246501},
    { x: 1428731677, y :12.741273117065},
    { x: 1428731737, y :13.40145149231},
    { x: 1428731797, y :11.223570378621},
    { x: 1428731857, y :14.365817642212},
    { x: 1428731917, y :9.2164938608805},
    { x: 1428731977, y :11.219588343302},
    { x: 1428732037, y :10.306739171346},
    { x: 1428732097, y :11.521423085531},
    { x: 1428732157, y :8.7259704589844},
    { x: 1428732217, y :10.556772613525},
    { x: 1428732277, y :13.724550247192},
    { x: 1428732337, y :13.580624898275},
    { x: 1428732397, y :13.931787745158},
    { x: 1428732457, y :19.498254394531},
    { x: 1428732517, y :18.695894495646},
    { x: 1428732577, y :28.103886413574},
    { x: 1428732637, y :26.222127151489},
    { x: 1428732697, y :28.62385597229},
    { x: 1428732757, y :24.048002115885},
    { x: 1428732817, y :27.798343276978},
    { x: 1428732877, y :24.662589136759},
    { x: 1428732937, y :28.181807072957},
    { x: 1428732997, y :25.727720896403},
    { x: 1428733057, y :27.727224858602},
    { x: 1428733117, y :26.784706115723},
    { x: 1428733177, y :25.495252990723},
    { x: 1428733237, y :24.584916814168},
    { x: 1428733297, y :24.999391174316},
    { x: 1428733357, y :23.689236577352},
    { x: 1428733417, y :23.175502268473},
    { x: 1428733477, y :24.488683700562},
    { x: 1428733537, y :24.549731063843},
    { x: 1428733597, y :21.211827341715},
    { x: 1428733657, y :21.072584660848},
    { x: 1428733717, y :18.530957285563},
    { x: 1428733777, y :20.250311406453}

  6. I want to plot a graph date and time along y axis speed. i want to put the date time format as (2012, 00, 1 22:12:12). how can i do this.

  7. My JSON is not scaling the date. It shows only time o xAxis. Here is my stringifyed JSON:

    [
    {
    “type”: “area”,
    “xValueType”: “dateTime”,
    “showInLegend”: true,
    “legendText”: “Portal principal”,
    “dataPoints”: [
    {
    “x”: 1393856201,
    “y”: 2
    },
    {
    “x”: 1410626011,
    “y”: 1
    },
    {
    “x”: 1435072710,
    “y”: 2
    },
    {
    “x”: 1435080731,
    “y”: 1
    },
    {
    “x”: 1435083830,
    “y”: 2
    },
    {
    “x”: 1435083903,
    “y”: 1
    },
    {
    “x”: 1435138285,
    “y”: 2
    },
    {
    “x”: 1435256090,
    “y”: 1
    }
    ]
    },
    {
    “type”: “area”,
    “xValueType”: “dateTime”,
    “showInLegend”: true,
    “legendText”: “Portal da Entrada”,
    “dataPoints”: [
    {
    “x”: 1412590825,
    “y”: 2
    },
    {
    “x”: 1435072770,
    “y”: 1
    }
    ]
    }
    ]

    Whats is wrong guys?

  8. This is going to sound horribly stupid, but in the first example, why is the graph off by one month?
    E.g. In the code it says:
    { x: new Date(2012, 01, 1), y: 26}, (January 1st)

    But the graph shows FEBRUARY 1st?

  9. I have to show Financial Quarters on my X-axis as Q1 FY 2015, Q2 FY 2015, etc. Pleas suggest how can I achieve this.

  10. How do I change the sort order? I would like the newest date to be on the Left side, not on the right side. It doesn’t matter how I create the array, ChartJS just sorts the dates from oldest (left) to newest (right) – I am European, I would like it the other way around please? I cant work out how to do it.

    • Currently, the dates are sorted automatically from oldest to latest dates.
      We will be implementing this feature in the upcoming version.

    • By default axis labels will auto adjust if you don’t set interval of axis. In case you are facing any issue please create a jsfiddle so that we can have a look.

    • Hi sandy,
      There are two ways in which you can actually do the required. Firstly, you can change the graph into Range Bar which will bring the y axis down horizontally and x-axis vertically, or you can use this example to generate a range graph with time on x-axis and date on y-axis.

  11. Does CanvasJS support a graph with incontinuous Date-Time x-axis? My goal is to draw a stock trend chart for a single day with several trading time-slots, for example, 9 a.m – 11:30 am, then 1 p.m to 4 p.m.
    But between 11:30 a.m to 1 p.m, there would be a long straight line representing the non-trading period, which is what I want to get rid of.
    Is there a way to make the ending point of the first trading time-slot also the starting point of the second on the x-axis in one single graph?
    Thanks!

  12. can i add only date on X axis and string value on Y axis. i.e. I have to draw graphs based on date value. Is it possible ?

    • Yes, x axis support date-time values as mentioned in the documentation. As of now y axis doesn’t support label/text. But using labelFormatter you can map y values to corresponding label. Here is an example.

      • Hi,

        I have a problem and your fiddle exactly shows it.
        I do not see any custom labels and in addition the x-axis labels are not aligned with the data points.
        The first label is so far left, that one can see only the end… and the third data point has no label at all

        Whenever I have the x-axis as datetime (using seconds or js dates), the x-axis labels are out of my control.

        Regards,
        Christian

        • Sorry, my mistake with the custom labels. In your fiddle they are related to the y-axis and that works. Anyhow my problem with the x-Axis can still be seen in the fiddle.

  13. I have data for a daily price, but there are no prices on weekends, I don’t want to use null points to continue the line over the gap – I want the gap to be removed so the x axis goes Thurs, Fri, Mon, Tues… can this be done?

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.