I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage.
Below is the code snippet I have been using:
chart = new Highcharts.Chart({
// Code continued from here
});The specific part of the code that requires modification is illustrated below:
chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
.attr({
'id' :'line_'+entry.id,
'stroke-width': 2,
stroke: 'white',
zIndex:1000
})
.add();
My objective is to update the color of these paths on hover events. Each line has been assigned a unique identifier.
In order to accomplish this, I have a section on the interface where users can hover over the name of a data point (for instance, a donor like USAID). Upon doing so, I aim to activate a hover effect previously defined in the second code block posted above and modify the color of the respective line.
Here are the steps I need guidance with:
1) How can I implement a hover style for these paths? 2) What approach should I take to trigger the hover state for a specific line when hovering over its corresponding donor name in the list?