Pages

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.

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 …

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?

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.

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.

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.

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!

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.

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.

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?