plotly / plotly/plotly.js

Automatically shift bottom legend down if the x-axis labels rotate / get longer

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

Nobody has claimed this yet.

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

Description

When positioning the legend at the bottom of the chart, the placement works nicely if tick labels take up only one line. But if the labels take up more vertical space, they will draw over the legend.

It would be nice if the legend could be pushed down automatically to account for the extra space required.

Image

Corresponding codepen

As discussed before, let's revisit this in 6 - 8 weeks time when hopefully there will be more capacity for this complex issue.

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 corresponding CodePen to reproduce the overlap between rotated or multi-line x-axis labels and the bottom legend, then trace the chart layout and legend positioning entry points in plotly.js. Done means the legend is automatically shifted down whenever the labels require additional vertical space, without overlap.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.