Chart.js line chart tooltip shows wrong label when line doesn't start at first label

Question

I have a simple line chart with 5 labels on x-axis: 'Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019' and a line which has points only on 3 middle labels 'Jan 2019', 'Apr 2019', 'Jul 2019'.

The problem is that when line data doesn't start from first label (like in my case), the tooltip shows incorrect label on hover. As you can see from below image, when I hover on 'Apr 2019' data point, tooltip shows 'Jan 2019'. Similarly, when I hover on 'Jul 2019' data point, tooltip shows 'Apr 2019'. Can you tell me what am I missing?

Here's the code:

<canvas id="canvas" ></canvas>
<script>
    var lineChartData = {
        labels: ['Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'],
        datasets: [
            {
                label: 'Oranges',
                borderColor: window.chartColors.blue,
                backgroundColor: window.chartColors.blue,
                fill: false,
                data: 
                [
                    {y: 30, x: 'Jan 2019'},
                    {y: 20, x: 'Apr 2019'},
                    {y: 25, x: 'Jul 2019'},
                ],              
            }           
        ]
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = Chart.Line(ctx, {
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                scales: {
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }],
                }
            }
        });
    };
</script>

Answer 1

Basically, the answer is to replace this:

[
    {y: 30, x: 'Jan 2019'},
    {y: 20, x: 'Apr 2019'},
    {y: 25, x: 'Jul 2019'},
]

with this:

[null, 30, 20, 25, null]

Answer 2

Chart.js doesn't like date-labels as string. You should use a Date() or momentjs() object to give a date.

---

Using MomentJS, your graph could look something like this;

const newDate = (mdy) => moment(mdy, "MM-DD-YYYY");

var lineChartData = {
    labels: [newDate('9-1-2018'), newDate('1-1-2019'), newDate('4-1-2019'), newDate('6-1-2019'), newDate('9-1-2019')],
    datasets: [{
        label: 'Oranges',
        borderColor: 'blue',
        backgroundColor: 'orange',
        fill: false,
        data: [
            { y: 30, x: newDate('1-1-2019') },
            { y: 20, x: newDate('4-1-2019') },
            { y: 25, x: newDate('6-1-2019') }
        ],
    }]
};

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
            hover: {
                mode: 'new mode'
            },
            responsive: true,
            hoverMode: 'index',
            stacked: false,
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left'
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            'millisecond': 'MMM YY',
                            'second': 'MMM YY',
                            'minute': 'MMM YY',
                            'hour': 'MMM YY',
                            'day': 'MMM YY',
                            'week': 'MMM YY',
                            'month': 'MMM YY',
                            'quarter': 'MMM YY',
                            'year': 'MMM YY',
                        }
                    }
                }]
            }
        }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="canvas" ></canvas>

^{(Note; the extra empty data could me removed, please take a look at the Chartjs time docs)}

---

EDIT: Based on comments, a more complete solution, with the original data being parsed as the OP intended.

const newDate = (mdy) => moment(mdy, "MMM YYYY");
const data = {
  labels: ['Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'],
  points: [
    {y: 30, x: 'Jan 2019'},
    {y: 20, x: 'Apr 2019'},
    {y: 25, x: 'Jul 2019'}
  ]
};

var lineChartData = {
    labels: data.labels.map(l => newDate(l)),
    datasets: [{
        label: 'Oranges',
        borderColor: 'blue',
        backgroundColor: 'orange',
        fill: false,
        data: data.points.map(p => { return { ...p, x: newDate(p.x) } })
    }]
};

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
            hover: {
                mode: 'new mode'
            },
            responsive: true,
            hoverMode: 'index',
            stacked: false,
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left'
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                    parser: 'MMM YYYY',
                        tooltipFormat: 'MMM YYYY',
                        displayFormats: {
                            'millisecond': 'MMM YYYY',
                            'second': 'MMM YYYY',
                            'minute': 'MMM YYYY',
                            'hour': 'MMM YYYY',
                            'day': 'MMM YYYY',
                            'week': 'MMM YYYY',
                            'month': 'MMM YYYY',
                            'quarter': 'MMM YYYY',
                            'year': 'MMM YYYY',
                        }
                    }
                }]
            }
        }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="canvas" ></canvas>