As the title says, I'm trying to highlight a segment in the chart according to the legend (on mouseenter event). I am using the generateLegend to create my custom legend but I am not sure how to attach the mouseenter event to each item.
This is what I have so far link
window.onload = function() {
setTimeout(function(){
var outerCircle = new Chart(document.getElementById("outer-circle"),{
"type":"doughnut",
"data":{
"labels":["Beer","Wine","Pisco","Vodka","Rum","Tequila"],
"datasets":[{
"label":"Drinks",
"data":[
30,
20,
5,
15,
15,
15
],
"backgroundColor":[
"#fdc694",
"#ad937c",
"#d8c2ae",
"#bab8b6",
"#e5aa74",
"#fcf0e5"
]
}]
},
"options":{
"legend":{
"display":false
},
"tooltips": {
"mode": 'label',
"callbacks": {
"label": function(tooltipItem, data) {
return " "+data['labels'][tooltipItem['index']] + " " + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
}
});
var diagramLegend = document.getElementById('diagram-legend');
diagramLegend.innerHTML = outerCircle.generateLegend();
}, 300);
}
Any tip or help with the code would be great, I have been spending hours but no success and the docs are not really clear about this.
You can use the following function to highlight the corresponding segment of a doughnut chart, when hovered over a custom legend item :
But, first you need to attach two event-listeners (mouseenter and mouseleave) to each of your
li
(legend) elements/items and then call the above function, passing the chart-instance, legend-item-index and a boolean value (whether to add/remove highlight), as the first, second and third arguments respectively.ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩