Click-and-stay-highlighted option in Highcharts line chart?

Question

It's probably asking for too much. I have lines for most of the countries of the world in a line chart in grey color. I have implemented a mouse-over effect, in which a line is being highlighted in red when the user hovers over the line, and falls back to the default grey when he moves on.

Now, I'd like to the user to be able to click on a line in a line chart and leave it highlighted as long as the user clicks on it again. But the mouseOut function clearly prevents the "stay-highlighted-in-red". Somehow, there should be a flag attached to the line once the user clicks on it, which is being checked in the mouseOut function.

Something like

    click: function()
    {
        this.graph.attr('stroke', '#FF0000');
        if (this.graph.attr('flag').value === "clicked")
        {
            this.graph.attr('flag', '');
        }
        else
        {
            this.graph.attr('flag', 'clicked');
        }
    },
    mouseOver: function()
    {
        this.graph.attr('stroke', '#FF0000');
    },
    mouseOut: function() 
    {
        if (this.graph.attr('flag').value === "clicked")
        {
            // do nothing
        }
        else
        {
            this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');
        }
    }

Here is a fiddle.

Is there any way to use an attribute for this? I have no clear idea actually which attributes would/are available.

Thanks for any hints.

Answer 1

You add your own flag attribute to this.graph. Then you can check for the flag in click and mouseout events:

if(!this.graph.flag)
   this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');

Here's the example : http://jsfiddle.net/f3rgendb/7/