plotly / plotly/plotly.js

Inconsistent `gap` attributes causes misalignment

Open
#7,133 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug sev-3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

If you provide both bargap and scattergap but they're different, traces in the same alignment and offset group do not properly align. One way or another, ensuring these traces align is more important than honoring both gaps. Here, the orange and green scatter points should be centered on the bars of the same color, but they are not:
Screenshot 2024-08-27 at 10 41 13

https://codepen.io/alexcjohnson/pen/yLdEZvo?editors=0010

This is a little tricky though:

  • If there are no bar traces, bargap will not be defined, so scattergap should be honored.
  • Even if there are bar traces but only scattergap is explicitly given, seems like it should be honored and used as the bargap value as well.
  • There are also boxgap and violingap - in principle you could have ALL of these traces in the same alignment and offset groups, do we define a hierarchy, something like bar beats scatter beats box beats violin? Or do we take the gap from the first trace in the group, and use that for all traces in that group? Or the maximum gap that applies to any trace in the group? I have no strong opinions here, so long as the result is always proper alignment.
  • All but scatter also have *groupgap attributes. There's no problem allowing these to be different.

Contributor guide

Open the contributing guide

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.

Research direction

Start with the alignment and offset-group handling for bar, scatter, box, and violin traces, and reproduce the mismatch using the linked CodePen. Compare cases with missing or explicitly set gap attributes, then establish a consistent rule for choosing the shared gap while preserving proper alignment. Done means traces in the same groups are centered correctly across all relevant trace combinations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.