'Vue + chartjs : Nearest point on hover tooltip not working

I'm currently trying to get my tooltip's chart (vuejs + chartjs) running as following :

Chart js · Interactions with nearest mode (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