Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container"></div>

JavaScript

(function(H) {

  var Point = H.Point,
    merge = H.merge;


  H.Legend.prototype.setItemEvents = function(item, legendItem, useHTML) {
    var legend = this,
      boxWrapper = legend.chart.renderer.boxWrapper,
      activeClass = 'highcharts-legend-' +
      (item instanceof Point ? 'point' : 'series') + '-active';

    // Set the events on the item group, or in case of useHTML, the item itself (#1249)
    (useHTML ? legendItem : item.legendGroup).on('mouseover', function() {
        item.setState('hover');

        // A CSS class to dim or hide other than the hovered series
        boxWrapper.addClass(activeClass);

        /*= if (build.classic) { =*/
        legendItem.css(legend.options.itemHoverStyle);
        /*= } =*/
      })
      .on('mouseout', function() {
        /*= if (build.classic) { =*/
        legendItem.css(merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle));
        /*= } =*/

        // A CSS class to dim or hide other than the hovered series
        boxWrapper.removeClass(activeClass);

        item.setState();
      })
      .on('click', function(event) {
        var strLegendItemClick = 'legendItemClick',
          fnLegendItemClick = function() {
            if (item.setVisible) {
              item.setVisible();
            }
          };

        // A CSS class to dim or hide other than the hovered series. Event
        // handling in iOS causes the activeClass to be added prior to click
        // in some cases (#7418).
        boxWrapper.removeClass(activeClass);

        // Pass over the click/touch event. #4.
        event = {
          browserEvent: event
        };


				// custom code - handle categories        
        item.series.chart.series.forEach(function(s) {
        	s.points.forEach(function(p) {
          	if(p.name === item.name) {
            	p.setVisible();
            }
          });
        });
        
        // disable default click events
        //if (item.firePointEvent) { // point
       ...