Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jvorssel opened this issue Sep 18, 2019 · 10 comments · Fixed by #15941
Closed

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

jvorssel opened this issue Sep 18, 2019 · 10 comments · Fixed by #15941

Comments

@jvorssel
Copy link

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

max0x7ba commented Jul 6, 2020

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.

@highsoft-bot highsoft-bot added this to To do in Development-Flow via automation Jul 7, 2020
@kzoon
Copy link

kzoon commented Dec 29, 2020

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
Copy link
Contributor

@kzoon thank you for the additional example.

@hanyuei
Copy link

hanyuei commented Jan 11, 2021

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
Copy link
Contributor

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
Copy link

kzoon commented Apr 23, 2021

Any chance of solving this issue?

@KacperMadej
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants