Skip to content

[highlight] Borealis lighter colors are not so visible #2614

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

Open
3 tasks
markov00 opened this issue Feb 19, 2025 · 2 comments · May be fixed by #2659
Open
3 tasks

[highlight] Borealis lighter colors are not so visible #2614

markov00 opened this issue Feb 19, 2025 · 2 comments · May be fixed by #2659
Assignees
Labels
:all Applies to all chart types bug Something isn't working :interactions Interactions related issue

Comments

@markov00
Copy link
Member

markov00 commented Feb 19, 2025

Describe the issue
With the introduction of the new Borealis color palette, the chart series highlighter does not work effectively. When hovering over a light-colored series, the "highlight" is barely visible because the other series are only slightly dimmed, making it difficult to distinguish the hovered series from the rest.

Possible Solutions

  • Increase the dimming effect on non-hovered series.
  • Introduce an additional outline or glow effect for the hovered series.
  • Adjust contrast dynamically based on the hovered series’ color.

To Reproduce
Steps to reproduce the behavior:

  1. Use a chart with multiple series in the new Borealis color palette.
  2. Hover over a series with a lighter color.
  3. Observe that the highlight effect is minimal, making it hard to differentiate the hovered series.

Expected behaviour
The hovered series should stand out clearly against the dimmed background, ensuring better visibility and focus.

Screenshots

Screen.Recording.2025-02-19.at.10.00.26.mp4

Additional context
This issue is particularly noticeable with lighter colors in the Borealis palette. Improving the highlight mechanism would enhance usability and readability.

Errors in browser console
N/A

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • Every related Kibana issue is listed under Kibana Cross Issues list and the kibana cross issue tag is applied
@markov00 markov00 added :all Applies to all chart types :interactions Interactions related issue bug Something isn't working labels Feb 19, 2025
@nickofthyme
Copy link
Collaborator

Yeah I noticed it is not easy to always clear what, especially for gradients. Sometimes the highlight is nearly the same color as an adjacent geom.

Image

I think we rethink the highlight strategy altogether.

@gvnmagni
Copy link

gvnmagni commented May 7, 2025

Thanks to @markov00 , we now have an update for this. We still need to validate it in all places and we need to check everything is fine, but considered a new approach starting from linecharts (probably the typology of charts that suffer the most from this issue)

The following images shows how a different handling of colors, opacity and z-index is helping a lot in identifying the selected elements

Image

@markov00 markov00 linked a pull request May 7, 2025 that will close this issue
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:all Applies to all chart types bug Something isn't working :interactions Interactions related issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants