How do I target a Highcharts path?

Question

I am drawing paths over a graph, and I need to change their color on hovering over another element on the page - a list of the data points on a div on the right of my page.

Here is my code:

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'graph',
        type: 'area',
        backgroundColor: 'transparent',
        height: 470
    },
    plotOptions: {
        area: {
            enableMouseTracking: false,
            showInLegend: false,
            stacking: 'percent',
            lineWidth: 0,
            marker: {
                fillColor: 'transparent',
                states: {
                    hover: {
                        lineColor: 'transparent'
                    }
                }
            }
        }
    },
    series:
        [
            {
                name: 'over',
                color: 'none',
                data: overData
            },
            {
                id: 's1',
                name: 'Series 1',
                data: data,
                showInLegend: true,
                zoneAxis: 'x',
                zones: zones
            },
            {
                name: 'under',
                color: 'none',
                data: underData
            }
        ],
    xAxis: {
        plotLines: plotLines,
        gridLineColor: 'transparent',
        lineColor: 'transparent',
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        gridLineColor: 'transparent',
        lineColor: 'transparent',
        labels: {
            enabled: false
        }
        //,min: -25
    },
    legend: {
        enabled: false
    },
    title: {
        text: ''
    },
    credits: {
        enabled: false
    },
    tooltip: {
        enabled: false
    }},function(chart){
        dataForChart.forEach(function(entry) {
            chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
                .attr({
                    'id' :'line_'+entry.id,
                    'stroke-width': 2,
                    stroke: 'white',
                    zIndex:1000
                })
                .add();
        });
});

The piece of code in question is this:

chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
    .attr({
        'id' :'line_'+entry.id,
        'stroke-width': 2,
        stroke: 'white',
        zIndex:1000
    })
    .add();

Now all I want to do, is change the color of that path on hover. As you can see, I do assign an id to each line.

I have a column on the front end that when a user hovers over the point's name (in this case it is a donor name such as USAID) and when that happens, I want to trigger a hover state (preferably previously defined in the second block of code I pasted) and change the line color.

How can I achieve this?

1) How do I add a hover style to that path? 2) How do I trigger the hover state for the specific line when I hover over it's name in the list of donors?

Answer 1

You can add .on() event on the rendered object.

chart.renderer.path(['M', 0, 0, 'L', 100, 100])
    .attr({
        'stroke-width': 10,
        stroke: 'red'
    })
    .on('mouseover',function(){
      $(this).attr({
        'stroke': 'yellow'
      })
    })
    .on('mouseout',function(){
      $(this).attr({
        'stroke': 'red'
      })
    })
    .add();

Example: http://jsfiddle.net/6g5hfycw/