Attempting to fade out dataLabels when a series is hovered via legend

author(s): Torstein Hønsi

by supertrue

HTML

<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<script src="https://code.highcharts.com/js/highcharts.js"></script>

<h2>Highcharts CSS styled mode: Attempting to fade out dataLabels when a series is hovered via legend</h2>

<div id="container" class="pull-request-version" style="height: 400px"></div>

<br><br>
<a class="highlight-series" data-series="0" href="#">Highlight series by index (0)</a> 
<br><br>
<a class="highlight-series" data-series="myseries" href="#">Highlight series by ID (myseries)</a>

SCSS

.pull-request-version {

   // These are the declarations modified in the pull request

  .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
  .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover), // Added this selector
  .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
    opacity: 0.2;
  }
  

  
  
  g.highcharts-series, .highcharts-point, .highcharts-markers { // Added '.highcharts-markers' selector
    transition: opacity 250ms;
  }
}

////////////////////////

/* .highcharts-legend-series-active.highcharts-data-labels + .highcharts-data-labels  {
  opacity: 0.2;
} */

.active-series {
  &:not([active-series="1"]) {
    .highcharts-data-labels,
    .highcharts-markers,
    .highcharts-series,
    .highcharts-legend-item {
      &:not(.highcharts-series-1) {
        opacity: .25;
        transition: all 250ms;
        .highcharts-point {
          opacity: .25;
          transition: all 250ms;
        }
      }
      
      
    }
  }
}

JavaScript

var chartOptions = {
  title: '',
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  tooltip: { enabled: false },

  series: [{
  	dataLabels: { enabled: true },
    data: [29.9, 71.5, 26.4, 129.2, 71.5, 46.4]
  }, {
  	
  	dataLabels: { enabled: true },
    id: 'myseries',
    data: [62, 29.9, 71.5, 106.4, 129.2, 106.4]
  }]
};

var chart = Highcharts.chart('container', chartOptions);
//Highcharts.chart('container2', chartOptions);

$('.highlight-series').on('click', function(event){
  var $this  = $(event.target),
      id     = $this.data('chart'),
      series = $this.data('series'),
      point  = $this.data('point'),
      text   = $this.data('text');

  if ( ! $this.text() ) 
      $this.html(text);

	var $chart = $(chart.renderTo),
      currentActiveSeries = $chart.attr('active-series');
  
  
  console.log('currentActiveSeries', currentActiveSeries, 'series', series);
  
  
  if ( currentActiveSeries === series ) {
  	$chart.removeAttr('active-series');
    $chart.removeClass('active-series');
  } else {
    $chart.attr({ 'active-series': series });
    $chart.addClass('active-series');
    //chart.get(series);
  }
  
});