Is it possible to use mouseenter and mouseleave event in chart js?

Question

Right now I'm using onHover into each pie to add some scale/zoom, but I want to use mouseenter and mouseleave. So on mouseenter on each pie it will add some scale/zoom, and on mouseleave, I want it back to its original state.

either mouseenter-mouseleave or mouseover-mouseout is fine.

here is the codepen: https://codepen.io/graydirt/pen/NWNZNyQ

Thanks guys!

var ctx = document.getElementById('chartPie').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 20],
            backgroundColor: [
                'red',
                'blue',
                'green'
            ],
          datalabels: {
            color: '#000'
          }
        }]
    },
    options: {
        legend: {
          display: false            
        },
      layout: {
        padding: 5
      },
        onHover: function (evt, elements) {
          let segment;
          if (elements && elements.length) {
            segment = elements[0];
            this.chart.update();
            selectedIndex = segment["_index"];
            segment._model.outerRadius += 5;
          } else {
            if (segment) {
              segment._model.outerRadius -= 5;
            }
            segment = null;
          }
      }
    }
});

    .chart-pie {
      width: 400px;
      height: 400px;
      margin: auto;
    }

user_219604 · Answer

Your code is already designed to return to the original size on mouseout, but you have a subtle bug.

You need to define the segment variable outside the chart. With a saved reference to the segment, the mouseout event will fire and the onHover handler will return the pie to its original size.

Please see the attached example below:

let segment;
var ctx = document.getElementById('chartPie').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Green'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 20],
      backgroundColor: [
        'red',
        'blue',
        'green'
      ],
      datalabels: {
        color: '#000'
      }
    }]
  },
  options: {
    legend: {
      display: false
    },
    layout: {
      padding: 5
    },
    onHover: function(evt, elements) {
      if (elements && elements.length) {
        segment = elements[0];
        this.chart.update();
        selectedIndex = segment["_index"];
        segment._model.outerRadius += 5;
      } else {
        if (segment) {
          segment._model.outerRadius -= 5;
        }
        segment = null;
      }
    }
  }
});

.chart-pie {
  width: 400px;
  height: 400px;
  margin: auto;
}

Is it possible to use mouseenter and mouseleave event in chart js?

1 Answers