Wrong points get highlighted on hover

I´m using chart.js to render a stacked line chart in a vue.js component for some datasets with uneven lengths.

Current Behavior

I get the effect that when hovering over a datapoint the wrong datapoints in the other stacked lines get highlighted.

wrong data points

Expected Behavior

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

right data points

Possible Solution

I think somehow chart.js is not taking the timestamp of a datapoint for highlighting but the index/position of the datapoint in the dataset.

Steps to Reproduce (for bugs)

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?

Environment

  • Chart.js version: 2.7.1
  • Browser name and version: latest Chrome

Author: Fantashit

1 thought on “Wrong points get highlighted on hover

Comments are closed.