Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

376
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda