Legend hover to highlight or dim the matching series
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 749
- Forks
- 45
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 26
Description
Version: @tanstack/charts 0.16.0.
colorLegend renders categories and interactiveColorLegend toggles visibility on click. Neither exposes hover: there is no way to focus or dim the series under the pointer from the legend, which is the default behaviour in Recharts, ECharts, Chart.js and Nivo.
The workaround today is to render the legend in app HTML and drive interaction.setControlledFocus from onRender, so the legend leaves the definition and the tooltip/focus pipeline has two owners.
Would it be possible to add a hover option to the legend extensions, e.g. hover: 'focus' | 'group' | false, that sets controlled focus for the hovered category (and clears it on leave), reusing the existing states / focus machinery? This is a natural sibling to #95 (legend item presentation).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the colorLegend and interactiveColorLegend entry points, then trace the existing states/focus machinery and controlled-focus path. Define how the proposed focus, group, and false hover modes should behave for a legend category, including clearing controlled focus on pointer leave; done means the legend owns this interaction without requiring an app-render workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100