CODEWITHSUNDEEP
javascripthighcharts
Jonny
Jonny

Reputation: 2519

Right click on specific legend item

Vanilla HighCharts has the ability to add event handling to when a specific item is clicked in the legend (see here), and uses this to hide and show series.

HighCharts Custom Events adds the ability to add event handling when right clicking (or showing contextmenu) on the legend, but not individual items within the legend. It also add the ability to fire events when a point is right clicked on in the chart.

Question: is there a way to fire an event when a specific series is right clicked on in the legend?

Example JSFiddle here (and included inline below). What I am aiming for is an alert that says "Series 1 was right clicked in the legend".

$(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        events: {
                legendItemClick: function () {
                        alert('Series 1 was clicked in the legend')
                    return false;
                }
            }
    },
    {
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
        events: {
                legendItemClick: function () {
                        alert('Series 2 was clicked in the legend')
                    return false;
                }
            }
    }],
    legend : {
        itemEvents: {
            contextmenu: function () {
                alert('The legend was right clicked');
            }
        }
    }
});
});

Upvotes: 0

Views: 743

Answers (1)

Mark
Mark

Reputation: 108557

You don't need a plugin for this. It's more straight-forward with just regular jquery event binding:

 $('.highcharts-legend-item').on('contextmenu', function(){  
     alert($(this).children('text').text());
 });

Full Code:

$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]

    }],
  });

  $('.highcharts-legend-item').on('contextmenu', function() {
    alert($(this).children('text').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>

<div id="container" style="height: 400px"></div>

Upvotes: 1

Related Questions