Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable-Click on Legend in HighCharts Column Graph

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] }]       }); 
like image 361
MizAkita Avatar asked Nov 07 '12 18:11

MizAkita


1 Answers

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, }, 
like image 78
Matt Avatar answered Sep 28 '22 04:09

Matt