S2 Legend: doesn't reflect highlightedItem when animations are off

Open Beginner friendly
#960 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
86/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript

Research direction

Start in legendUtils.ts at getOpacityEncoding and inspect how legend entry datums expose their series and how the interactive-mark hover rules are ordered. Done means the highlighted series stays undimmed with animations disabled, non-highlighted entries dim, and chart hover behavior still matches the animated behavior.

Written by the indexing model from the issue text.

Description

bug rsc:Legend s2

With animations={false}, an S2 legend doesn't reflect the chart's highlightedItem. Every legend entry dims, including the highlighted series, and stays dimmed when hovering the chart.

Repro
<Chart data={data} highlightedItem={idInSeriesA} animations={false}>
  <Line color="series"><ChartTooltip /></Line>
  <Legend highlight />
</Chart>
Expected

Only the non-highlighted series' entries dim, matching the line and the animated behavior.

Cause

In getOpacityEncoding (legendUtils.ts), the highlightedItem rule compares against datum.rscSeriesId, but legend entry datums carry the series in datum.value, so the lookup never matches. It's also ordered before the interactive-mark hover rules, so it overrides hover.

Dominant language
TypeScript
Stars
131
Forks
30
Avg merge
1d 19h
Merged PRs (30d)
74

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from adobe/react-spectrum-charts

All issues in adobe/react-spectrum-charts

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.