making series in Highcharts clickable

Question

Does anyone know how to make the series in the highcharts clickable? as in if you click one of the items it will take you to an external link?

I looked through the documentation and could not find an option in the highcharts.

http://www.highcharts.com/docs/chart-concepts/series

Here is the fiddle provided in the doc. if anyone could make the series clickable that would be awesome!!

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

thank you!

Answer 1

You can try this

series: {
cursor: 'pointer',
         point: {
             events: {
                   click: function() {
                        //your logic
                     }
                   }
                }
 }

More info

Answer 2

Try this. Run demo :-

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },

    series: [{
        data: [
            [0, 29.9], 
            [1, 71.5], 
            [3, 106.4]
        ]
    }],


     plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            //do your stuff
                            alert([this.x,this.y]);
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                }
            }
        },
});

});

Answer 3

You can set url in your point object (or use global), catch click event on points and run window.location.

plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
    series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }]

http://jsfiddle.net/287JP/2/