I have a dataset with 3 points in it, but only two are being shown on the chart

The code to create this graph is

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    datasets: [{
        label: 'Submission',
        data: [{
            t: new Date("April 1, 2018"),
            y: 2
        }, {
            t: new Date("April 10, 2018"),
            y: 1
        }, {
            t: new Date("April 27, 2018"),
            y: 1
        }],
        backgroundColor: ["rgba(90, 150, 200, 0.6)"]
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

Clearly there are three data points but it seems to only show the 2 on the chart. How can this be fixed?

I have a dataset with 3 points in it, but only two are being shown on the chart

The code to create this graph is

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    datasets: [{
        label: 'Submission',
        data: [{
            t: new Date("April 1, 2018"),
            y: 2
        }, {
            t: new Date("April 10, 2018"),
            y: 1
        }, {
            t: new Date("April 27, 2018"),
            y: 1
        }],
        backgroundColor: ["rgba(90, 150, 200, 0.6)"]
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

Clearly there are three data points but it seems to only show the 2 on the chart. How can this be fixed?

• javascript
• html
• chart.js

Share Follow asked Apr 28, 2018 at 15:40 adammoyleadammoyle 30922 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I fixed this by adding labels for each data point.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["April 1, 2018", "April 10, 2018", "April 27, 2018", ],
        datasets: [{
            label: 'Submission',
            data: [{
                t: new Date("April 1, 2018"),
                y: 2
            }, {
                t: new Date("April 10, 2018"),
                y: 1
            }, {
                t: new Date("April 27, 2018"),
                y: 1
            }, {
                t: new Date(),
                y: 0
            }],
            backgroundColor: ["rgba(90, 150, 200, 0.6)"]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});