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, },
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With