plotly / plotly/plotly.js

Boxplot has horizontal axis ticks overlap axis title

Open
#7,515 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

While zooming in and dragging a categorical boxplot, I got in a state where the longer labels of the horizontal axis, that are displayed in an angle, overlap the horizontal axis title. To get to this state, one has to zoom in so that only shorter labels are displayed oblique, then drag the plot so that a long label appears in the corner of the plot, without getting over the axis title. I noticed that the title moves upper when I leave my mouse button. Then click to drag again until the longer label is over the axis title.
If from step 1 I drag more so that the longer label is over the axis title, and I release the mouse button, the plot moves a bit up so that the label does not overlap the title.

Step 1: zoom in to only see short labels:
Image

Step 2: drag to the right to make a long label appear on the left:
Image
notice the title moved upper (this is important in order to reproduce) instead of staying on the bottom of the div

Step 3: drag to the right so that the long label overlaps the title
Image

From step 1, if you drag directly to a position similar to step 3, you'll get into a state where there is no overlap:
Image

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 by reproducing the categorical boxplot interaction using the issue's three-step zoom-and-drag sequence, especially the intermediate release that moves the title upward. Inspect the boxplot axis-label and title layout behavior involved in that sequence; done means long angled horizontal-axis labels do not overlap the axis title after dragging, while the direct drag path remains correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.