Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

358
Views
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...

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

After paraphrasing my question to the extreme, I just found a codepen whose code doesn't match the documentation BUT it answers my question perfectly.

So to get the result, you have to use options.tooltips.mode and not options.interaction.mode !

Then, you have to change :

    interaction: {
     axis: 'xy', 
     mode: 'nearest',
     intersect: false

    }

By :

tooltips: {
  mode: 'index',
  intersect: false,
},

Here is the final code :

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, 
              tooltips: {
             axis: 'xy', 
             mode: 'nearest',
             intersect: false
    
            }
           })
      }
    });
    
    var vm = new Vue({
      el: '#app',
      data: { }
    });

Here is the codepen working as excepted with tooltips in nearest mode on hovering the chart's line.

Final Result : enter image description here

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!