Chart.js time scale not showing data

Question

I have a Chart.js chart which was displaying fine, until I added a time scale to it. The configuration looks like this:

    this.chart = new Chart(this.ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'month',
                        format: 'timeFormat'
                    }
                }]
            }
        }
    });

And the data object looks like this:

let data = {
    labels: ["1485903600", "1490738400"],
    datasets: [{
        label: '',
        data: [120, 30],
        lineTension: 0
    }]
};

The x-axis displays the two dates correctly, and the y-axis is bounded by the correct limits (i.e. 120 and 30), but the data is not displaying on the graph.

Solution

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.

Comments

[GluePear]

Thanks for the response. Converting them to integers does indeed make them behave as you say. But I'm puzzled because 1485903600 should be 01 Feb 2017, and according to epochconverter.com it is. Why is it showing as Jan 17 1970 on the chart?

[jordanwillis]

It is because the new Date(value) constructor expects to receive the number of milliseconds since the epoch (1485903600 is the number of seconds). So when you use integers for your labels, those are used in the date constructor to create a new date and since the date constructor is expecting milliseconds, it produces an unexpected date value.

[GluePear]

Yes - I multiply by 1000 and I get the date I want. Thanks.

[andli]

This is a very good answer. Explanatory and concise. Love it, thanks.