Chartjs-Update chart axis labels after hover – chart.js

by

1👍

✅

You could combine your afterEvent plugin with a ticks.callback function as shown below:

options: {
  scales: {
    y: {
      beginAtZero: true,
      ticks: {
        callback: value => value + (this.isHoveringYAxe ? '$' : '')
      }
    }
  }
},
plugins: [{
  id: 'customHover',
  afterEvent: (chart, args) => {
    const event = args.event;
    if (event.type == 'mousemove') {
      if (event.x < chart.scales.y.width && !this.isHoveringYAxe) {
        this.isHoveringYAxe = true;
        chart.update();
      } else if (event.x >= chart.scales.y.width && this.isHoveringYAxe) {
        this.isHoveringYAxe = false;
        chart.update();
      }
    }
  }
]

Please take a look at your amended StackBlitz and see how it works.

Leave a comment