adobe / adobe/react-spectrum-charts

Y axis label flickers

Open
#655 0 comments 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.