[Chartjs]-Highlight chart element when hovering over its corresponding legend Item

by

2👍

✅

It looks like your highlightActiveSegment function and legend event handlers just has a few problems in it. Here is a corrected version with explanation.

Modified Legend Event Handlers

You need to use mousemove instead of mouseover so that the section stays highlighted as the user moves the mouse around.

Chart.helpers.each(document.getElementById('legend-AccidentsByRoadConditions').firstChild.childNodes, function(legendNode, index) {
  Chart.helpers.addEvent(legendNode, 'mousemove', function() {
    highlightActiveSegment(chartAccidentsByRoadConditions, index, true);
  });
  Chart.helpers.addEvent(legendNode, 'mouseleave', function() {
    highlightActiveSegment(chartAccidentsByRoadConditions, index, false);
  });    
});

Modified highlightActiveSegment Function

Basically, the key is to make sure you get the actual segment of the graph represented by the moused over legend item, set the hover style accordingly and re-render the chart.

function highlightActiveSegment(oChart,segmentIndex,highlight) {
  var activeSegment = oChart.data.datasets[0]._meta[0].data[segmentIndex];
  oChart.updateHoverStyle([activeSegment], null, highlight);
  oChart.render();
}

Also, here is a codepen showing the working solution.

0👍

color: [
  {
    backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    borderColor: 'rgba(255, 255, 255, 0)',
    hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    hoverBorderWidth: 10,
    hoverRadius: 0

}
],

on mouse over highlights the active segment in angular 2(ng-2 charts) for doughnut charts

Leave a comment