Skip to content

style: redesign bar chart hover highlighting in dataset tabs#594

Merged
cristian-tamblay merged 1 commit into
developfrom
style/bar-chart-hover-highlight
May 5, 2026
Merged

style: redesign bar chart hover highlighting in dataset tabs#594
cristian-tamblay merged 1 commit into
developfrom
style/bar-chart-hover-highlight

Conversation

@Creylay
Copy link
Copy Markdown
Collaborator

@Creylay Creylay commented May 4, 2026

Summary

Replaced Recharts' default bar hover effect (bright background glow) with a cleaner highlight: the hovered bar becomes fully opaque while the rest drop to 50% opacity. No outline or external background is added.


Type of Change

  • Backend change
  • Frontend change
  • CI / Workflow change
  • Build / Packaging change
  • Bug fix
  • Documentation

Changes (by file)

  • DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx: added Cell components with dynamic fillOpacity on hover; disabled default active bar glow (activeBar={false}, cursor={false} on Tooltip).
  • DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx: same hover logic; state keyed by column name to handle multiple charts on the same page.
  • DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx: same hover logic; all bars use a uniform fill color (#8884d8) to match the original appearance.

Testing

  • Open a dataset with missing values and verify the Missing Values Overview chart: hovering a bar dims the rest to 50% opacity with no background glow.
  • Open a dataset with categorical columns and verify the Value Distribution chart behaves the same way.
  • Open a dataset with text columns and verify the Length Distribution chart behaves the same way. Confirm all bars remain the same purple color (no per-bar color variation).
  • Confirm the tooltip still appears on hover with the correct value in all three charts.

@cristian-tamblay cristian-tamblay merged commit 7dd2c86 into develop May 5, 2026
19 checks passed
@cristian-tamblay cristian-tamblay deleted the style/bar-chart-hover-highlight branch May 5, 2026 22:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants