adobe / adobe/react-spectrum-charts

Bar labels are squished on small charts

Open
#544 1 comment 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

On small charts the bar label is sometimes unreadable
![Image](https://github.com/user-attachments/assets/e2872ccc-90fd-419e-b188-be7096b4363f)

### 🤔 Expected Behavior?

It should be laid out nicely and readable

### 😯 Current Behavior

It is squished
![Image](https://github.com/user-attachments/assets/e2872ccc-90fd-419e-b188-be7096b4363f)

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

450x300 px chart

### Version

1.15.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

OSX (Ventura)

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with a 450x300 px chart in Chrome using the attached example, then trace the bar-label layout in the chart components. Confirm the fix by checking that labels remain readable and are no longer squished at the reported size.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.