[Chartjs]-How to trigger hover programmatically in chartjs

by

21👍

✅

Chart.js listens for mousemove events and checks if a datapoint is at the x/y coordinates. If so, it triggers the ‘hover’ behaviour for that point.

Borrowing from the Chart.js tooltips test code, I wrote the snippet below to demonstrate accessing the correct properties and triggering an event.

let c = new Chart($('#chart'), {
  type: 'doughnut',
  data: {
    labels: ['a', 'b', 'c', 'd'],
    datasets: [{
      data: [1, 2, 4, 8],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});
$('#a').on('click', function() { t(0); });
$('#b').on('click', function() { t(1); });
$('#c').on('click', function() { t(2); });
$('#d').on('click', function() { t(3); });

function t(idx) {
  var meta = c.getDatasetMeta(0),
    rect = c.canvas.getBoundingClientRect(),
    point = meta.data[idx].getCenterPoint(),
    evt = new MouseEvent('mousemove', {
      clientX: rect.left + point.x,
      clientY: rect.top + point.y
    }),
    node = c.canvas;
  node.dispatchEvent(evt);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="a">Hover a</button>
<button id="b">Hover b</button>
<button id="c">Hover c</button>
<button id="d">Hover d</button>
<canvas id="chart"></canvas>

2👍

I do like the answer given by @timclutton, although I found it can at times be a little bit hit-and-miss on some devices, I believe it has something to do with screen offsets not playing nicely with the mouseEvent positioning.

So I thought I’d share this solution which I’ve used in one of my recent projects 🙂

let c = new Chart($('#chart'), {
  type: 'doughnut',
  data: {
    labels: ['a', 'b', 'c', 'd'],
    datasets: [{
      data: [1, 2, 4, 8],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});
$('#a').on('click', function() {
  toggleLabelOn(0);
});
$('#b').on('click', function() {
  toggleLabelOn(1);
});

//Toggle hover state
function toggleLabelOn(idx) {
  //Set active element
  c.setActiveElements([{
    datasetIndex: 0,
    index: idx,
  }]);

  //Set active tooltip 
  c.tooltip.setActiveElements([{
    datasetIndex: 0,
    index: idx,
  }]);

  c.update();
}

//Clear graph active state (not used in this example but useful to have in conjunction with toggleLabelOn())
function toggleLabelOff(idx) {
  c.setActiveElements([]);
  c.tooltip.setActiveElements([]);
  c.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<button id="a">Hover A</button>
<button id="b">Hover B</button>

<div height="400" width="400">
  <canvas id="chart"></canvas>
</div>

Leave a comment