For some reasons the default highcharts pie chart has no url links. Or at least that feature is not being demo’ed. See their example here: http://www.highcharts.com/demo/pie-basic.
After tweaking the code for a while, here is the code that enables URL links in a pie chart.
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'my_chart_id',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'my_title'
},
tooltip: {
formatter: function() {
var y = this.y;
var p = Math.round(this.percentage*100)/100;
return ''+ this.point.name +': ' + y + ' (' + p + '%)';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'overall',
point: {
events: {
click: function(e) {
//this.slice();
//console.log(e);
location.href = e.point.url;
e.preventDefault();
}
}
},
data: [
{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
]
}]
});
});
The part that enables the clicking is the new url key in data, and the event handling.
series: [{
type: 'pie',
name: 'overall',
point: {
events: {
click: function(e) {
//this.slice();
//console.log(e);
location.href = e.point.url;
e.preventDefault();
}
}
},
data: [
{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
]
}]