Highlight multiple series in Highcharts

Question

I am trying to highlight multiple series in highcharts. Default behavior highlights only one series and reduce the opacity of other series. I am able to highlight multiple series using setState API but unable to reduce opacity of other series.

I tried to reduce opacity using update but that does not work. Didn't find any API reference as well.

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

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

var chart = Highcharts.chart('container', {
    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: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
    {
        data: [5, 60, 40, 35, 10, 30, 70, 120, 50, 60, 60, 30]
    }]
});

$('#button').click(function () {

   chart.series[2].update({states: {
                inactive: {
                    opacity: 0.2
                }
            }});

   chart.series[0].setState('hover');
   chart.series[1].setState('hover');

});

https://jsfiddle.net/Humble_Learner/ye5h32d8/2/

I have created a fiddle for the same. It highlights the series which I want to highlight but opacity is somehow not changing.

User863 User863 · Accepted Answer · 2019-07-03T06:54:31

Try using setState('inactive')

var chart = Highcharts.chart('container', {
  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: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
    {
      data: [5, 60, 40, 35, 10, 30, 70, 120, 50, 60, 60, 30]
    }
  ]
});

$('#button').click(function() {
  chart.series[2].setState('inactive');
  chart.series[0].setState('hover');
  chart.series[1].setState('hover');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

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

Highlight multiple series in Highcharts

1 Answers