I am simply trying to disable the DRILL-DOWN effect on my 'Column Chart'. Can anyone help? Here is the sample code at Fiddle http://jsfiddle.net/D8Ez3/
*as you can see, the graph's legend is clickable. I need the items in the legend to not be clickable because when you click all items, the chart returns empty. I rather not have any drill-down for the chart. Any ideas?
chart = new Highcharts.Chart({
chart: {
renderTo: 'impact',
type: 'column',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
backgroundColor: null,
events: {
load: function (event) {
console.log(this);
}}},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}}},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Reporting Year']
},
yAxis: {
min: 0,
title: {
text: 'Millions (mm)'
}
},
legend: {
enabled:false,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 30,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' + this.x + ': ' + this.y + ' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0},
point: {
events: {
legendItemClick: function () {
return true; // <== returning false will cancel the
default action }}},
allowPointSelect: false,
},
series: [{
name: 'Yr 1',
data: [23.7] },
{
name: 'Yr 2',
data: [13.6] },
{
name: 'Yr 3',
data: [49.9] },
{
name: 'Yr 4',
data: [83.6] }]
});
You were close. Instead of:
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0
},
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
},
allowPointSelect: false,
},
You want:
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
},
allowPointSelect: false,
},