Javascript 悬停时突出显示错误的chart.js点

我正在使用chart.js为一些长度不均匀的数据集在vue.js组件中呈现堆叠的折线图。我得到的效果是，当鼠标悬停在一个数据点上时，其他堆叠行中的错误数据点会高亮显示

预期的行为应该是始终突出显示具有相同时间戳的数据点。示例如下：

我认为这个问题与vue.js无关，但不知何故，chart.js不是使用数据点的时间戳来突出显示，而是数据点在数据集中的索引/位置。以下是vue/chart.js组件代码

Vue.component（'values-stacked'{
模板：“”，
数据：函数（）{
返回{
图表：空，
数据集：[]，
}
},
方法：{
加载\投资组合\值\本地：函数（）{
set1=[{
‘t’：力矩（15156164，‘X’），
y:82
}, {
‘t’：力矩（15156719，‘X’），
y分：85分
}, {
‘t’：力矩（1515657324，‘X’），
y:15岁
}, {
‘t’：力矩（1515657969，‘X’），
y:17岁
}, {
‘t’：力矩（1515658576，‘X’），
y:19
}, ];
set2=[{
‘t’：力矩（1515657324，‘X’），
y:15岁
}, {
‘t’：力矩（1515657969，‘X’），
y:18岁
}, {
‘t’：力矩（1515658576，‘X’），
y:22
}, ];
新的_数据集=[{
标签：“set1”，
数据：set1，
填充：是的，
}, {
标签：“set2”，
数据：set2，
填充：是的，
}];
Object.assign（this.datasets，new_dataset）；
this.chart.update（）；
},
渲染图表：函数（）{
this.chart=新图表（this.$refs.chartCanvas{
键入：“行”，
数据：{
datasets:this.datasets
},
选项：{
要素：{
要点：{
半径：1
}
},
比例：{
xAxes：[{
键入：“时间”，
分布：'线性'，
时间：{
单位：'天'
}
}],
雅克斯：[{
id:'val'，
对,，
类型：'线性'，
滴答声：{
建议分钟：0
}
}]
}
}
});
}
},
挂载：函数（）{
那=这个；
此.render_图表（）；
这个.load_portfolio_value_local（）；
}
});

codepen的完整工作演示：

---

有什么办法吗？

chartjs的维护者提出了以下解决方案：

默认情况下，图表悬停适用于同一索引中的所有项目 数据集。您可以通过添加

hover: {
  mode: 'new mode'
}

到您的配置。如果将模式设置为“x”，它将按预期工作。 请参阅所有模式的文档 在这里：

工作完美

以下是github上的原始帖子：