Search code examples
highchartsangular2-highcharts

How to decrease the chart opacity in highcharts

I am trying to decrease the opacity of charts instead of hiding when click the legend. Example: When i click the Tokyo legend series blue color column hiding instead of hiding I want to decrease the opacity to 0.34 of blue color column. same for other legend when clicking. So, How to do it?

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Rainfall'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ],
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: 'Rainfall (mm)'
    }
},
tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    },
       series: {
        events: {
            legendItemClick: function(event) {
                var visibility = this.visible ? '0.35' : '';
                alert(event);
            }
        }
    },
},
series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
        194.1, 95.6, 54.4]

}, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5,
        106.6, 92.3]

}, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3,
        51.2]

}, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8,
        51.1]

}]
});

enter image description here

https://www.highcharts.com/demo/column-basic

Demo: https://jsfiddle.net/4t6arfg8/

Solution

  • You used the correct event, the remaining thing is to change opacity of the proper SVG element and colorize the legend item.

    series: {
  events: {
    legendItemClick: function(e) {
      const series = this;
      const chart = series.chart;
      const hasChangedOpacity = series.hasChangedOpacity;

      series.group.attr({
        opacity: hasChangedOpacity ? 1 : 0.2
      });
      chart.legend.colorizeItem(series, hasChangedOpacity);
      series.hasChangedOpacity = !hasChangedOpacity;
      // prevent default behaviour
      return false;
    }
  }
}

    Also, to keep the default series states behaviour, you need to add the below small plugin:

    (function(H) {
  H.wrap(H.Series.prototype, 'setState', function(proceed) {
    if (!this.hasChangedOpacity) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    }
  });
}(Highcharts));

    Live demo: https://jsfiddle.net/BlackLabel/p1x6937f/

    API Reference: https://api.highcharts.com/highcharts/series.column.events.legendItemClick

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts