Hyperlinked column in a Highcharts drilldown

Question

How would I modify the demo chart "Column with Drilldown" so that a column in the drilldown chart is a hyperlink to an arbitrary web page (not to another drilldown)?

Answer 1

If you do not add a url property to your initial series it will not click to the url. So, add the url property to your drilldown items and add the click event handler to it. See this example. The url does not load because of jsFiddle but it should work in general.

Code that is important:

    $.each(versions, function (key, value) {
        drilldownSeries.push({
            name: key,
            id: key,
            data: value,
            url: 'http://bing.com/search?q=foo'
        });
    });

And:

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                },
                point: {
                    events: {
                        click: function () {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        }