feat(legend): add legendActionOnHover option to show actions on hover by maryam-saeidi · Pull Request #2773 · elastic/elastic-charts

maryam-saeidi · 2026-01-20T14:22:30Z

Summary

The legendActionOnHover prop is now available in the Settings component to control when legend action icons are displayed. When set to true, legend actions (like filter buttons) are hidden by default and only appear when hovering over a legend item, providing a cleaner and less cluttered legend appearance. The action remains visible while interacting with it and supports full keyboard accessibility.

Screen.Recording.2026-01-29.at.17.06.14.mov

Example usage

      <Chart>
        <Settings
          showLegend
          legendActionOnHover // <-- new prop
          legendPosition={Position.Bottom}
          legendAction={LegendAction}
        />
        <Axis id="bottom" position={Position.Bottom} />
        <Axis id="left" position={Position.Left} />
        <BarSeries
          id="bars"
          xScaleType={ScaleType.Ordinal}
          yScaleType={ScaleType.Linear}
          xAccessor={0}
          yAccessors={[1]}
          data={[
            ["A", 10],
            ["B", 20],
            ["C", 15],
          ]}
        />
      </Chart>

Details

Added legendActionOnHover boolean prop to Settings (default: false)
Created useActionFocusManagement hook to manage focus state for legend actions
Added CSS classes echLegendItem--actionOnHover and echLegendItem--isActive to control visibility
Action visibility is triggered by :hover, :focus-within, or active state (when clicked)
Handles edge case where modals/popovers restore focus to their trigger after closing
Works with both regular and tabular legend layouts

Scenario	Screenshot
Regular action
Tabular action
Keeping selected action visible

Issues

Closes #2444

Checklist

The proper feature labels have been added (e.g. :interactions, :axis)
All related issues have been linked (i.e. closes #123, fixes #123)
Unit tests have been added or updated to match the most common scenarios
The proper documentation and/or storybook story has been added or updated
The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)

🤖 This pull request was assisted by Cursor

packages/charts/src/components/legend/legend_table/legend_table_item.tsx

packages/charts/src/components/legend/legend_item.tsx

packages/charts/src/components/legend/_legend_item.scss

maryam-saeidi · 2026-01-21T14:18:45Z

@markov00 In the current implementation, when moving between cells with keyboard, the action remains visible afterwards as seen below (when clicked, only that action will be visible):

Screen.Recording.2026-01-21.at.14.53.14.mov

I tried briefly to see if I can make keyboard experience similar to click with mouse, but there are so many edge cases and I didn't find a straightforward way to do so. I think the current implementation is good enough for the keyboard scenario, wdyt?

maryam-saeidi · 2026-01-22T10:40:53Z

buildkite update vrt

packages/charts/src/components/legend/legend_item.tsx

delanni · 2026-01-23T10:37:59Z

buildkite build this

delanni · 2026-01-23T11:29:46Z

We're in the process of migrating the build pipeline of this repo to an elastic-wide from the custom one we had before, this PR might require an admin-merge when deemed ready because some checks seem to be stuck.

…al is open

packages/charts/src/components/legend/legend_table/legend_table_item.tsx

packages/charts/src/components/legend/_legend_item.scss

packages/charts/src/components/legend/use_action_focus_management.ts

elastic-datavis · 2026-02-11T13:10:23Z

✅ Successful Deployment (build#106) - `9bcfcf7`

markov00

LGTM thanks for all the changes and cleanups.
I've also changed the title to feat instead of fix to better align with the actual content of this PR.
Please verify during the merge that the commit title reflect correctly the changed title.

# [71.2.0](v71.1.2...v71.2.0) (2026-02-26) ### Bug Fixes * **metric:** update badge to pill shape with adjusted padding ([#2786](#2786)) ([80be269](80be269)) * **theme:** expose font weight in text style ([#2788](#2788)) ([02f4afa](02f4afa)) ### Features * **legend:** add "list" layout for horizontal legends ([#2784](#2784)) ([8967ce3](8967ce3)) * **legend:** add legendActionOnHover option to show actions on hover ([#2773](#2773)) ([d1be88f](d1be88f))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | minor | [`71.1.2` -> `71.2.0`](elastic/elastic-charts@v71.1.2...v71.2.0) | --- ### Release Notes ## [71.2.0](elastic/elastic-charts@v71.1.2...v71.2.0) (2026-02-26) ### Bug Fixes * **metric:** update badge to pill shape with adjusted padding ([#2786](elastic/elastic-charts#2786)) ([80be269](elastic/elastic-charts@80be269)) * **theme:** expose font weight in text style ([#2788](elastic/elastic-charts#2788)) ([02f4afa](elastic/elastic-charts@02f4afa)) ### Features * **legend:** add "list" layout for horizontal legends ([#2784](elastic/elastic-charts#2784)) ([8967ce3](elastic/elastic-charts@8967ce3)) * **legend:** add legendActionOnHover option to show actions on hover ([#2773](elastic/elastic-charts#2773)) ([d1be88f](elastic/elastic-charts@d1be88f))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | minor | [`71.1.2` -> `71.2.0`](elastic/elastic-charts@v71.1.2...v71.2.0) | --- ### Release Notes ## [71.2.0](elastic/elastic-charts@v71.1.2...v71.2.0) (2026-02-26) ### Bug Fixes * **metric:** update badge to pill shape with adjusted padding ([elastic#2786](elastic/elastic-charts#2786)) ([80be269](elastic/elastic-charts@80be269)) * **theme:** expose font weight in text style ([elastic#2788](elastic/elastic-charts#2788)) ([02f4afa](elastic/elastic-charts@02f4afa)) ### Features * **legend:** add "list" layout for horizontal legends ([elastic#2784](elastic/elastic-charts#2784)) ([8967ce3](elastic/elastic-charts@8967ce3)) * **legend:** add legendActionOnHover option to show actions on hover ([elastic#2773](elastic/elastic-charts#2773)) ([d1be88f](elastic/elastic-charts@d1be88f))

maryam-saeidi added 2 commits January 19, 2026 15:36

Only show legend action on hover

47ede59

Keep action visible when it is clicked

891402d

maryam-saeidi self-assigned this Jan 20, 2026

maryam-saeidi added the :legend Legend related issue label Jan 20, 2026

markov00 reviewed Jan 21, 2026

View reviewed changes

maryam-saeidi added 3 commits January 21, 2026 13:33

Remove pointer-events: none;

3708ddd

Add focus-within

c8fc7e3

Add onKeyDown to keep action icon visible

8016db6

Fix prettier

01316c5

maryam-saeidi mentioned this pull request Jan 22, 2026

feat(legend): Add onHover state for actions #2770

Closed

8 tasks

test(vrt): update screenshots [skip ci]

352d3f5

markov00 reviewed Jan 22, 2026

View reviewed changes

packages/charts/src/components/legend/legend_item.tsx Outdated Show resolved Hide resolved

maryam-saeidi changed the title ~~feat(legend): Add onHover state for actions~~ fix(legend): Add onHover state for actions Jan 22, 2026

Only show one action visible when using keyboard

30a8bd7

maryam-saeidi and others added 8 commits January 29, 2026 15:04

Fix the issue with focus when clicking outside the component when mod…

a4d8914

…al is open

Remove unused onActionKeyDown

ed5576e

Add a prop to control showing legend action on hover

affe553

test(vrt): update screenshots [skip ci]

791293b

Disable action on hover for some of the e2e screenshots

31ec6b0

test(vrt): update screenshots [skip ci]

4816ae7

Update charts.api.md

d61e6f4

Update gitignore

edcaddf

maryam-saeidi changed the title ~~fix(legend): Add onHover state for actions~~ fix(legend): add legendActionOnHover option to show actions on hover Jan 30, 2026

Merge branch 'main' into 2444-filter-on-hover

cb3bcaf

maryam-saeidi requested a review from markov00 February 4, 2026 09:04

markov00 reviewed Feb 10, 2026

View reviewed changes

maryam-saeidi added 5 commits February 10, 2026 22:55

Fix echLegendTable__item--isActive scss

f069aad

Add a provider for the action focus listeners

5a5891e

Seprate registeration of pointerdown and focusin listeners

cf58686

Add a comment about Firefox pointer-events: none issue

85871b4

Add firefox rendering issue comment in _legend_item.scss as well

9bcfcf7

maryam-saeidi requested a review from markov00 February 11, 2026 13:17

markov00 changed the title ~~fix(legend): add legendActionOnHover option to show actions on hover~~ feat(legend): add legendActionOnHover option to show actions on hover Feb 12, 2026

markov00 approved these changes Feb 12, 2026

View reviewed changes

elastic deleted a comment from maryam-saeidi Feb 12, 2026

maryam-saeidi merged commit d1be88f into elastic:main Feb 12, 2026
14 checks passed

maryam-saeidi deleted the 2444-filter-on-hover branch February 12, 2026 13:37

maryam-saeidi mentioned this pull request Feb 26, 2026

Upgrade dependency @elastic/charts to v71.2.0 elastic/kibana#255186

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(legend): add legendActionOnHover option to show actions on hover#2773

feat(legend): add legendActionOnHover option to show actions on hover#2773
maryam-saeidi merged 22 commits intoelastic:mainfrom
maryam-saeidi:2444-filter-on-hover

maryam-saeidi commented Jan 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maryam-saeidi commented Jan 21, 2026

Uh oh!

maryam-saeidi commented Jan 22, 2026

Uh oh!

Uh oh!

delanni commented Jan 23, 2026

Uh oh!

delanni commented Jan 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elastic-datavis bot commented Feb 11, 2026

Uh oh!

markov00 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

maryam-saeidi commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Example usage

Details

Issues

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maryam-saeidi commented Jan 21, 2026

Uh oh!

maryam-saeidi commented Jan 22, 2026

Uh oh!

Uh oh!

delanni commented Jan 23, 2026

Uh oh!

delanni commented Jan 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elastic-datavis bot commented Feb 11, 2026

✅ Successful Deployment (build#106) - 9bcfcf7

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maryam-saeidi commented Jan 20, 2026 •

edited

Loading

✅ Successful Deployment (build#106) - `9bcfcf7`