'Vue + chartjs : Nearest point on hover tooltip not working
I'm currently trying to get my tooltip's chart (vuejs + chartjs) running as following :
(Source with "mode: nearest, axis: xy" mode selected)
Here is my code for the component :
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted () {
this.renderChart({
labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'],
datasets: [
{
label: '2018 pages read per month',
backgroundColor: '#f87979',
data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384]
}
]
}, {responsive: true, maintainAspectRatio: false,
//Here is the part that doesn't seem to work
interaction: {
axis: 'xy',
mode: 'nearest',
intersect: false
}
})
}
});
var vm = new Vue({
el: '#app',
data: { }
});
You can find my codepen here
According to the documentation I can't figure out what i'm missing...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|