[Chartjs]-Chart.js time scale not showing data

16👍

The reason your chart is not displaying data when you converted to the time scale is because you are passing string values for your labels that the Date constructor is not able to parse.

The time scale expects either an integer (number of milliseconds since epoch), a Date object, a moment.js object, or a string representation of a date that is in a format that Date.parse() can understand.

So in your case, when the chart is rendered it can not create Date objects for the X axis (because of your label values), so it creates 2 date objects using new Date() (this is why the X axis still displays some date data…notice that it is 2017 dates because new Date() returns a Date initialized to right now).

To correct this, just convert the label values to integers (e.g. remove the quotes) and the chart will then display your data points. The chart still looks funny however because the X scale is configured in units of month but your data values are only 1 day apart (1485903600 = Jan 17, 1970 10:45 PM and 1490738400 = Jan 18, 1970 12:05 AM).

Here is a codepen example that shows your original chart and the correct chart so you can see the difference.

Leave a comment