CODEWITHSUNDEEP
javascripthighcharts
MsNichols
MsNichols

Reputation: 1133

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

Upvotes: 29

Views: 41299

Answers (8)

Dominik Chudy
Dominik Chudy

Reputation: 1100

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

Upvotes: 1

marcovtwout
marcovtwout

Reputation: 5269

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/

Upvotes: 0

Janna302
Janna302

Reputation: 31

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

Upvotes: 0

Alireza
Alireza

Reputation: 104890

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

Upvotes: 1

alfishan aqeel
alfishan aqeel

Reputation: 220

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

Upvotes: 3

MoneerOmar
MoneerOmar

Reputation: 225

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

Upvotes: 0

Lachezar Raychev
Lachezar Raychev

Reputation: 2113

And if you work with pies, you must do :

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

Upvotes: 16

Matt
Matt

Reputation: 41832

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

Upvotes: 51

Related Questions