Dim other series when hovering

[oysteinmoseng]

For accessibility and usability purposes it would be great to have an option to dim/fade other series when a series is hovered. This could also be reflected when hovering over the series' legend item.

[TorsteinHonsi]

In styled mode it is already implemented, purely by CSS and the :not selector.

Scope

In non-styled mode, this feature should be available for whatever item is represented in the legend. So for pies and such, which have legendType: 'point', hovering a point should dim other points. For other series types (like line, area), where the full data set is in focus, hovering should dim other series.

Implementation

We need an option on the state, for example plotOptions.pie.states.hover.otherOpacity = 0.1.

Then, add logic to the setState function (or fire a setState event that we can listen to) that loops over all items and sets the opacity. Here's a simple implementation for points, but we also need to consider other element than point.graphic - like point.dataLabel etc.:

            setState: function (state) {
                // Make this data stand out by setting the opacity of the others
                this.series.points.forEach(function (otherPoint) {
                    if (otherPoint !== this) {
                        otherPoint.graphic.animate(
                            { opacity: state === 'hover' ? 0.1 : 1 },
                            this.series.options.states[state || 'normal'].animation
                        );
                    }
                }, this);
            },

[oysteinmoseng]

After discussion, we landed on introducing a new series state inactive that would be applied to other series when a series is hovered.