plotly / plotly/plotly.js

Autoexpand does not work for axes

Open
#7,266 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation feature P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Seems like autoexpand does not work (or I do something wrong). In the example below, I increased y axis tick label size and font size, so they consume much more space, but margins are not adjusted, and labels are partially hidden outside of the chart container.

Reproduction

https://codepen.io/shadow-identity/pen/abeQprO

This is slightly modified example from the documentation: https://plotly.com/javascript/line-and-scatter/#line-and-scatter-plot

What is modified:

  • y axis tick values increased to have more symbols
  • y axis tick font size increased
  • I also tested it with explicitly set margin: {autoexpand: true}, but it does not change anything
Expected results

Grid size should be reduced (margin should be added to the left) to keep y axis ticks visible

Actual results

Y axis ticks are partially hidden

Environment

Chrome 130, Firefox 133 beta
Plotly from https://cdn.plot.ly/plotly-2.35.2.min.js

Additional info

At the same time, legend seems to increase corresponding margin. I increased the name length of one of the series to check if it will expand the margin, and it works.

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 CodePen reproduction and compare it with the linked Plotly line-and-scatter documentation example using Plotly 2.35.2. Check why enlarged y-axis tick labels do not trigger left-margin expansion while the longer legend does; done means the y-axis labels remain fully visible without manually setting the margin.

Written by the indexing model from the issue text.

Assessment

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