HighCharts : Adding Hyperlinks to the X-Axis of the chart

Question

I have been using HighCharts in my PHP website by migrating it from older charts and I am very impressed by the number of graph options and functions with this library.

However I am not able provide hyperlinks to the values of the x-axis(or y-axis) in order to navigate to another URI.

Code of Categories in this case

xAxis: {
    categories: [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
},

Can anyone point me to an example or documentation on Highcharts if available.

Thanks

EDIT: ANSWER

Here is the jsfiddle for linked category names: http://jsfiddle.net/a5Bdt/

Answer 1

It's been a while since I've done work in highcharts, but I believe you just need to provide a formatter function. For example:

xAxis: {
    categories: [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    labels: {
        formatter: function () {
            return '<a>' + this.value + '</a>'
        },
        useHTML: true
    }
},

Answer 2

var categoryLinks = {
        'Foo': 'http://www.google.com',
        'Bar': 'http://www.facebook.com',
        'Foobar': 'http://www.stackoverflow.com'
    };
    $('#container').highcharts({
        xAxis: {
            categories: ['Foo', 'Bar', 'Foobar'],

            labels: {
                formatter: function () {
                    return '<a href="' + categoryLinks[this.value] + '">' +
                        this.value + '</a>';
                }
            }
        },
        series: [{
            data: [300, 200, 600]
        }]
    });