Chart.js line graph not displaying when using formatted timestamp labels

Question

I'm trying to create a line graph which plots around 200 points which contain a timestamp and a value. My understanding is that I need to seperate the labels and data into 2 different arrays to use them with Chart.js 2.0 (latest version).

Full Code:

var chartData = [],
    labelData = [],
    chartData2 = [];


_.each(historyData, function (row) {
    chartData.push({
        x: moment.unix(row[0]/1000).format('MMM DD HH:mm'), 
        y: row[1]
    });
    labelData.push(moment.unix(row[0]/1000).format('MMM DD HH:mm'));
    chartData2.push(row[1]);
});

console.log(chartData);
console.log(labelData);
console.log(chartData2);

new Chart(self.$splitChart, {
    type: 'line',
    data: {
        labels: labelData,
        datasets: [{
            label: 'EPC',
            data: chartData2,
            lineTension: 0,
            backgroundColor: 'rgba(55,166,119,.2)',
            borderColor: 'rgb(55,166,119)',
            pointRadius: 0,
            pointHitRadius: 10
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

Example labelData:

["Nov 13 13:42", "Nov 13 14:02", "Nov 13 14:22", "Nov 13 14:42", "Nov 13 15:02", "Nov 13 15:22", "Nov 13 15:42", "Nov 13 16:02", "Nov 13 16:22", "Nov 13 16:42", "Nov 13 17:03", "Nov 13 17:22", "Nov 13 17:42", "Nov 13 18:02", "Nov 13 18:22", "Nov 13 18:42", "Nov 13 19:02", "Nov 13 19:22", "Nov 13 19:42", "Nov 13 20:02", "Nov 13 20:22", "Nov 13 20:42", "Nov 13 21:02", "Nov 13 21:22", "Nov 13 21:42", "Nov 13 22:02", "Nov 13 22:22"]

Example chartData2:

["0.005236", "0.005088", "0.005067", "0.005046", "0.005189", "0.005164", "0.005134", "0.005373", "0.005331", "0.005371", "0.005480", "0.005420", "0.005520", "0.004876", "0.004822", "0.004770", "0.004397", "0.004346", "0.004295", "0.004302", "0.004259", "0.004217", "0.003969", "0.003935", "0.003897", "0.004048", "0.004027"]

Unfortunately, I don't get a line and the x axis is just numbers (not the formatted timestamps or any relation to timestamp). I've tried ensuring the data is a float (not a string) as well. Still nothing.

Answer 1

Found out the problem was caused by the defining type: 'linear' in the options for xAxes. Removing this fixed the problem and my data displayed fine.