Disable-Click on Legend in HighCharts Column Graph

Question

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] }]
      });

Sago

Answer 1

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,
},

Agata

What would be the option if we have pie graph. legendItemClick event does not work for pie graph. – Leund

@RahulTailwal hm, not sure, haven't tried it with a pie graph before – Agata

@RahulTailwal, to do this with pie charts, you want plotOptions.pie.point.events.legendItemClick - it just so happens that the anchor fragment for the legendItemClick property doesn't seem to work, so I've not linked to it directly. From the API docs for plotOptions.pie.events.legendItemClick: "Not applicable to pies, as the legend item is per point. See point.events." – Niel

Doesn't work for me (with bar or area charts). I can still click the legend and all data disappears, which I don't want. – Perdue

Thanks to your answer, I was able to obtain this result: jsfiddle.net/gkys5Lpo/24. However, when I place cursor/mouse over the legend, it would change shape. Would it be possible to make it not happen? – Bituminize

Answer 2

And if you work with pies, you must do :

    pie: {
       showInLegend: true,
       allowPointSelect: false,
       point:{
           events : {
            legendItemClick: function(e){
                e.preventDefault();
            }
           }
       }
   }

Dobrinsky

Answer 3

This is the way to make legends of Highcharts graph non-clickable because whenever you click on a particular legend than corresponding slice become disappear from graph so make graph persist as per business requirement we may make legends unclickable.

  plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 1,
        },
        series: {
            events: {
                legendItemClick: function (e) {
                    e.preventDefault();
                }
            }
        }
    }

Angelenaangeleno

Please, consider adding some explanation to your answer. – Weldon

Please use the edit link explain how this code works and don't just give the code, as an explanation is more likely to help future readers. – Sigmoid

CODE ONLY ANSWERS SHOULD NOT BE DELETED. – Mourn

why the -1 guys and gals? the code is so simple it seems to speak for itself. definitely don't think its worth downvoting. – Crabwise

Answer 4

If using ES6 you can make it even shorter with arrow function, as it's pointing to DOM element, you can simply return false...

{
  name: 'Name of this chart',
  type: 'line',
  lineWidth: 1,
  color: '#333333',
  events: {
    legendItemClick: () => false  // disable legend click
  },
  data: [1, 5, 10, 8, 19, 28, 0 , 12]
};

Edge

Answer 5

The solutions mentioned in other answers don't work anymore because, as of version 11.4.4 of Highcharts, the events.legendItemClick function has been deprecated. You can see this in the changelog: https://www.highcharts.com/changelog/

Now to disable the click on the legend item you should use legend.events.itemClick function. API references: https://api.highcharts.com/highcharts/legend.events.itemClick

Solution: https://jsfiddle.net/BlackLabel/t327qj08/

Highcharts.chart('container', {
  legend: {
    events: {
      itemClick: function() {
        return false;
       }
     }
  },
  series: [{
    data: [2, 6, 4, 7, 9, 3]
  }]
});

Beret

Answer 6

Here is a JSFiddle demonstrating how to achieve this:

plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently ' +
                   **strong text**              visibility + '. Do you want to change that?')) {
                        return false;
                    }
                }
            }
        }
    }

Monamonachal

Answer 7

from Highcharts JS API documentation (v7.1.1)

"The default action is to toggle the visibility of the point. This can be prevented by calling event.preventDefault()."

So this is what worked for me for Pie charts -

    plotOptions: {
        pie: {
            point: {
                events: {
                    legendItemClick: function (e) {
                        e.preventDefault();
                    }
                }
            }
        }
    }

Wealthy

Answer 8

As a useful addition to any of the other answers, you might want to disable the legend hover style as well:

legend: {
    itemStyle: {
        cursor: 'default',
    },
    itemHoverStyle: {
        color: '#333333',
    }
},

See: https://jsfiddle.net/oyps4fj6/

Schoonover