adobe / adobe/react-spectrum-charts
Y axis label flickers
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 29
- Avg merge
- 7d 2h
- Merged PRs (30d)
- 21
Description
### Provide a general summary of the issue here
When hovering over the chart, the y-axis labels occasionally flicker. This behavior is inconsistent and not always reproducible, but it occurs frequently enough to impact usability.
it seems to be that the chart recalculates its size/scale, repeatedly.
https://github.com/user-attachments/assets/a2c6dcf1-22d1-4908-8c83-0dae7b9a9285
### 🤔 Expected Behavior?
The y-axis labels should remain stable and not flicker or redraw unexpectedly when the user hovers over the chart.
### 😯 Current Behavior
When the user moves their cursor across the chart area, the y-axis labels flicker, This seem to be tied to a specific dataset. Dataset available in context.
### 💁 Possible Solution
_No response_
### 🔦 Context
```
[
{
"date": "Jan 2024",
"value": 4075390
},
{
"date": "Feb 2024",
"value": 3630083
},
{
"date": "Mar 2024",
"value": 3592781
},
{
"date": "Apr 2024",
"value": 3576728
},
{
"date": "May 2024",
"value": 3693071
},
{
"date": "Jun 2024",
"value": 4150735
},
{
"date": "Jul 2024",
"value": 4924863
},
{
"date": "Aug 2024",
"value": 4296713
},
{
"date": "Sep 2024",
"value": 3827539
},
{
"date": "Oct 2024",
"value": 4011674
},
{
"date": "Nov 2024",
"value": 4231353
},
{
"date": "Dec 2024",
"value": 4589596
}
]
```
### 🖥️ Steps to Reproduce
Use data provided in context for reproducibility
### Version
1.20.0"
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
Adobe/DXUE, Adobe/CJA
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
No source file or test is named. Reproduce the hover behavior in Chrome using the dataset in the issue, then trace the chart hover handling and y-axis sizing or scale recalculation. Done means the y-axis labels remain stable while moving the cursor across the chart.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100