LinkedTo series not changing opacity when its related legend-item is hovered.

[jvorssel]

I've altered an existing demo for a series with the "linkedTo" property configured.
I've introduced a new line-series with random values that has no "linkedTo" property.
When you hover the item in the legend for the new series (Range2), all other series are transparent, except the series with the "linkedTo" property.

Expected behaviour

When you hover the item in the legend for the new series (Range2), all other series are expected to be transparent.

Actual behaviour

When you hover the item in the legend for the new series (Range2), all other series are transparent, except the series with the "linkedTo" property.

Live demo with steps to reproduce

Fiddle

1. Hover the legend-item "Temperature"
2. The series "Range2" becomes transparent OK
3. Hover the legend-item "Range2"
4. The "Temperature" series (line) becomes transparent OK
5. The "Temparature" series (range) stays opaque NOK

Product version

Highcharts v7.2.0

Affected browser(s)

Firefox and Chrome

[pawelfus]

Hi @jvorssel

Thank you for reporting the issue. This is expected behaviour: only series that are visible in the legend are inactivated. When you enable this series in legend you will see inactive state on all other series: https://jsfiddle.net/BlackLabel/872o4r0w/

The same effect you can observe when you remove linkedTo option and remove that series from legend: https://jsfiddle.net/BlackLabel/gxdnp60L/

[jvorssel]

Hi @jvorssel

Thank you for reporting the issue. This is expected behaviour: only series that are visible in the legend are inactivated. When you enable this series in legend you will see inactive state on all other series: https://jsfiddle.net/BlackLabel/872o4r0w/

The same effect you can observe when you remove linkedTo option and remove that series from legend: https://jsfiddle.net/BlackLabel/gxdnp60L/

Ah okay, thanks for the quick reply!

I've been looking around for a way to still change the opacity for the linked-series, for about a day. Do you know any way around this behaviour? So the linked-series will still become transparent when the legend-item is hovered?

Thanks!

[pawelfus]

Any other than showing linked series in legend (https://jsfiddle.net/BlackLabel/872o4r0w/) ?

Another possible solution is to take control over legend items and manage state ('inactive' vs 'normal'): https://jsfiddle.net/BlackLabel/jo7z51vx/

  chart: {
    events: {
      load: function() {
        var chart = this;

        // Add events:
        chart.series.forEach(function(series) {
          if (series.legendGroup) {
            Highcharts.addEvent(series.legendGroup.element, 'mouseover', function() {
              // Internal method
              // Can be also implemented manually as `series.setState('inactive');`
              chart.pointer.applyInactiveState([series.points[0]]);
            });
            Highcharts.addEvent(series.legendGroup.element, 'mouseout', function() {
              chart.series.forEach(function(s) {
                s.setState();
              });
            });
          }
        });
      }
    }
  },

[max0x7ba]

This is expected behaviour: only series that are visible in the legend are inactivated.

The documentation says that toggling the visibility of a legend item also toggles the linked series. But hover over legend item doesn't change the opacity of linked series, which is inconsistent and unexpected (doesn't follow the engineering principle of least surprise).

IMO, linkedTo should also change the opacity of the linked series on hover. The shared legend item should affect all linked series in the very same way as if they had individual legend items.

[kzoon]

I ran into this bug today.

See my example: https://jsfiddle.net/kzoon/79sc5jk3/

In my example linked series are lines on scatter chart which are derived by a calculation on the scatter points (like regression). It is obvious that hiding/hovering should impact both the scatter series as the linked line series.

A bug fix would be much appreciated!

[sebastianbochan]

@kzoon thank you for the additional example.

[hanyuei]

IMO, linkedTo should also change the opacity of the linked series on hover. The shared legend item should affect all linked series in the very same way as if they had individual legend items.

is there any workaround for this ?

[PaulDalek]

Hi @hanyuei

Yes, check this comment: #12015 (comment). You could also set showInLegend of the arearnage series and hide the legend item through CSS.

Workaround
https://jsfiddle.net/BlackLabel/o7uky0zj/

[kzoon]

Any chance of solving this issue?

[KacperMadej]

Yes, it is still open.
Marking the issue for internal prioritization discussion.