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

Heatmap is faded when hovering over color axis legend (styled version) #7406

Closed
RainerSchwarze opened this Issue Nov 15, 2017 · 3 comments

Comments

Projects
None yet
3 participants
@RainerSchwarze

RainerSchwarze commented Nov 15, 2017

When using the styled highcharts library to show a heatmap chart, hovering over the color axis fades the heatmap data points. This does not happen with the classic library.

Expected behaviour

Hovering over the color axis does not fade the heatmap points.

Actual behaviour

Hovering over the color axis fades the heatmap points.

Live demo with steps to reproduce

I assume the "hovered" legend item is to be highlighted. For that the class .highcharts-legend-series-active is set. In a multi line chart, the series gets marked with .highcharts-series-hover, which prevents the fade for that series. (See the rule in highcharts.scss.) In a heatmap the -hover class does not seem to be set.

Affected browser(s)

  • tested in Chrome 62
@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 16, 2017

Contributor

Hi @RainerSchwarze

Thank you for reporting this issue. You are right, it looks like colorAxis inherits behaviour from the classic legend (http://jsfiddle.net/1y2kggdo/) where we highlight hovered series.

Interla note:
Additionally we can see in classes like: highcharts-legend-item highcharts-undefined-series highcharts-color-undefined for the legend item.

Contributor

pawelfus commented Nov 16, 2017

Hi @RainerSchwarze

Thank you for reporting this issue. You are right, it looks like colorAxis inherits behaviour from the classic legend (http://jsfiddle.net/1y2kggdo/) where we highlight hovered series.

Interla note:
Additionally we can see in classes like: highcharts-legend-item highcharts-undefined-series highcharts-color-undefined for the legend item.

@RainerSchwarze

This comment has been minimized.

Show comment
Hide comment
@RainerSchwarze

RainerSchwarze Nov 16, 2017

Hi @pawelfus
thanks - do you have an idea how I could temporarily fix this? One would certainly be to remove the css rule which fades and then maybe increase the line width or change the color for the hovered series, so things still work with the other charts. I did not yet look into the details for the color axis, but could I prevent it from handling mouseover?

RainerSchwarze commented Nov 16, 2017

Hi @pawelfus
thanks - do you have an idea how I could temporarily fix this? One would certainly be to remove the css rule which fades and then maybe increase the line width or change the color for the hovered series, so things still work with the other charts. I did not yet look into the details for the color axis, but could I prevent it from handling mouseover?

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 17, 2017

Contributor

Hi @RainerSchwarze

I think we can overwrite the rule responsible for this issue for one particular chart: #container-id + rule: http://jsfiddle.net/p87v7or8/1/


#container .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover), .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover), .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover), .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  opacity: 1;
}

This way we won't change behaviour for other charts. Other option is to use bugged classes and remove events: http://jsfiddle.net/p87v7or8/2/

.highcharts-legend-item.highcharts-undefined-series.highcharts-color-undefined {
  pointer-events: none;
}
Contributor

pawelfus commented Nov 17, 2017

Hi @RainerSchwarze

I think we can overwrite the rule responsible for this issue for one particular chart: #container-id + rule: http://jsfiddle.net/p87v7or8/1/


#container .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover), .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover), .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover), .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  opacity: 1;
}

This way we won't change behaviour for other charts. Other option is to use bugged classes and remove events: http://jsfiddle.net/p87v7or8/2/

.highcharts-legend-item.highcharts-undefined-series.highcharts-color-undefined {
  pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment