cinderblock / cinderblock/react-smoothie
v2: synced charts don't align plot-area geometry
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 43
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
SyncGroup aligns the data — shared cursor, shared x-range — but nothing sets axes[].size, so uPlot sizes each axis to its widest tick label.
Two stacked, synced charts therefore put the same instant at different screen x, and drift as the labels change width (1.6 → -24.20). A chart with a right-hand axis also runs an axis-width narrower than one without.
This is the blocker that is easiest to miss, because SyncGroup looks like it should already cover it.
Gotcha for whoever implements it: uPlot adds axis.labelSize (default 30) on top of axis.size for any axis whose label is non-null, and reserves nothing when label is null. So a gutter is size + labelSize + padding, padding standing in for an absent axis must total the same, and every axis needs a label ("" counts). Getting this wrong leaves charts misaligned by exactly 30 px.
Contributor guide
No contributing guide indexed for this repository
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 locating SyncGroup and the chart axis setup where axes[].size is configured. Check uPlot's handling of axis.size, axis.labelSize, labels, and padding for stacked charts with and without a right-hand axis. Done means synced charts share the same plot-area geometry, including when tick-label widths change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100