[Chartjs]-Chart.js: how to listen to hover/click events outside of plot area?

by

3👍

✅

You can write a custom plugin with the afterEvent hook that will catch all events. In here you can filter out the events you want like mousemove, mouseout, click or any other event that gets thrown by interacting with the canvas.

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {},
  plugins: [{
    id: 'customEventListner',
    afterEvent: (chart, evt, opts) => {
      console.log(evt.event.type, evt.event.x, evt.event.y)
    }
  }]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

Leave a comment