Why don't my datasets show up on line graph using Chart.js?

Question

I'm trying to display a line chart on a webpage using Chart.js that shows the number of downloads in the apple store and google play store for a specific client for the past 5 days. The data appears properly, but does not properly label the X axis with this:

var downloadsChartData = {
    labels: ["4 Days", "3 Days", "2 Days", "Yesterday", "Today"],
    datasets: [{
        label: "Google Play",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(0, 230, 115, 1)",
        borderColor: "rgba(0, 230, 115, 1)",
        borderCapStyle: 'butt',
        borderJoinStyle: 'miter',
        borderWidth: 2,
        pointBorderColor: "rgba(150, 75, 75, 1)",
        pointBorderWidth: 3,
        pointRadius: 6,
        pointHoverRadius: 9,
        pointStyle: 'triangle',
        data: [{
            x: 1,
            y: 2
        }, {
            x: 2,
            y: 0
        }, {
            x: 3,
            y: 3
        }, {
            x: 4,
            y: 1
        }, {
            x: 5,
            y: 1
        }]
    }, {
        label: "iOS",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(26, 117, 255, 1)",
        borderColor: "rgba(26, 117, 225, 1)",
        borderCapStyle: 'butt',
        borderJoinStyle: 'miter',
        borderWidth: 2,
        pointBorderColor: "rgba(150, 75, 75, 1)",
        pointBorderWidth: 3,
        pointRadius: 6,
        pointHoverRadius: 9,
        data: [{
            x: 1,
            y: 4
        }, {
            x: 2,
            y: 2
        }, {
            x: 3,
            y: 0
        }, {
            x: 4,
            y: 1
        }, {
            x: 5,
            y: 4
        }]
    }]
};

var downloadsChartOptions = {
    title: {
        display: true,
        text: 'Downloads on Google Play and App Store',
        fontSize: 30
    },
    scales: {
        xAxes: [{
            scaleLabel: {
                display: true,
                abelString: 'Date',
                fontSize: 20
            },
            type: 'linear',
            position: 'bottom',
            gridLines: {
                display: false
            }
        }],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Downloads',
                fontSize: 20
            }
        }]
    }
};

var downloadsChart = document.getElementById('downloadsChart').getContext('2d');
new Chart(downloadsChart, {
    type: 'line',
    data: downloadsChartData,
    options: downloadsChartOptions
});

I tried to switch the data field to an array of values so that Chart.js would recognize the labels I defined in downloadsChartData to:

...
pointStyle: 'triangle',
data: [2, 0, 3, 1, 1]
}]
...
pointHoverRadius: 9,
data: [4, 2, 0, 1, 4]
}]

However, when I make this change, the chart not only doesn't correctly label the X axes, but also stops displaying the data on the line chart entirely.

Can someone please spot what I'm doing incorrectly? The documentation isn't too helpful in this matter.

jordanwillis jordanwillis · Accepted Answer · 2017-02-27T15:58:27

The documentation is not very clear on this point, but for graphing non-numerical data (such as your case where the X axis represents a Date) you cannot set the X axis to have a linear scale. In other words, if you set your axis with a linear scale, it will graph the numerical representation of the data (and therefore, not the label).

I removed type: 'linear' from your downloadsChartOptions and it solved the issue.:

var downloadsChartOptions = {
    title: {
        display: true,
        text: 'Downloads on Google Play and App Store',
        fontSize: 30
    },
    scales: {
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Date',
                fontSize: 20
            },
            //type: 'linear',
            position: 'bottom',
            gridLines: {
                display: false
            }
        }],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Downloads',
                fontSize: 20
            }
        }]
    }
};

Why don't my datasets show up on line graph using Chart.js?

1 Answers