Wrong chart.js points get highlighted on hover

Question

I´m using chart.js to render a stacked line chart in a vue.js component for some datasets with uneven lengths. I get the effect that when hovering over a datapoint the wrong datapoints in the other stacked lines get highlighted.

The expected behaviour should be to always highlight the datapoints with the same timestamp. Example here:

I think the issue has nothing to do with vue.js but somehow chart.js is not taking the timestamp of a datapoint for highlighting but the index/position of the datapoint in the dataset. Here is the vue/chart.js component code.

Vue.component('values-stacked', {
        template: '<canvas ref="chartCanvas"></canvas>',
        data: function() {
            return {
                chart: null,
                datasets: [],
            }
        },
        methods: {
            load_portfolio_value_local: function() {
                set1 = [{
                    't': moment(1515656164, 'X'),
                    'y': 82
                }, {
                    't': moment(1515656719, 'X'),
                    'y': 85
                }, {
                    't': moment(1515657324, 'X'),
                    'y': 15
                }, {
                    't': moment(1515657969, 'X'),
                    'y': 17
                }, {
                    't': moment(1515658576, 'X'),
                    'y': 19
                }, ];
                set2 = [{
                    't': moment(1515657324, 'X'),
                    'y': 15
                }, {
                    't': moment(1515657969, 'X'),
                    'y': 18
                }, {
                    't': moment(1515658576, 'X'),
                    'y': 22
                }, ];
                new_dataset = [{
                    label: 'set1',
                    data: set1,
                    fill: true,
                }, {
                    label: 'set2',
                    data: set2,
                    fill: true,
                }];
                Object.assign(this.datasets, new_dataset);
                this.chart.update();
            },
            render_chart: function() {
                this.chart = new Chart(this.$refs.chartCanvas, {
                    type: 'line',
                    data: {
                        datasets: this.datasets
                    },
                    options: {
                        elements: {
                            point: {
                                radius: 1
                            }
                        },
                        scales: {
                            xAxes: [{
                                type: 'time',
                                distribution: 'linear',
                                time: {
                                    unit: 'day'
                                }
                            }],
                            yAxes: [{
                                id: 'val',
                                stacked: true,
                                type: 'linear',
                                ticks: {
                                    suggestedMin: 0
                                }

                            }]
                        }
                    }
                });
            }
        },
        mounted: function() {
            that = this;
            this.render_chart();
            this.load_portfolio_value_local();
        }
    });

Full working demo on codepen: https://codepen.io/perelin/pen/NXzZvG

Any ideas how to approach this?

Answer 1

The maintainer of chartjs proposed the following solution:

by default the chart hover is for all items at the same index in the datasets. You can change this by adding

hover: {
  mode: 'new mode'
}

to your config. If you set the mode to 'x' it will work as expected. See https://codepen.io/anon/pen/aEjdeb All of the modes are documented here: http://www.chartjs.org/docs/latest/general/interactions/modes.html

Works perfectly.

Here is the original post on github: https://github.com/chartjs/Chart.js/issues/5148#issuecomment-357515190