[BUG]: Trace doesn't line up with axis when having an automargin title and there are sliders/buttons displayed · plotly/plotly.js#7750

(1 comment) (0 reactions) (0 assignees)JavaScript (15,964 stars) (1,846 forks)batch import

buggood first issue

Description

There is an issue with the title's automargin feature when a slider or buttons are displayed. In this case, when automargin increases the top margin, it will push down the chart’s tick labels (correctly) but will NOT push down the traces. Then, the trace is in the wrong location on the y-axis and misrepresents the data values.

Screenshots/Video

Steps to reproduce

Go to the sample codepen from https://plotly.com/javascript/sliders/#add-a-play-button-to-control-a-slider : https://codepen.io/plotly/pen/NbKmmQ
Add the following to the layout: margin:{autoexpand:true, t:0}, title:{automargin:true, text:"Title"},
You can see that the yaxis ticks do not line up with the data/trace

Notes

This seems to be a combination of margin:{autoexpand:true}, title:{automargin:true} and having sliders and/or buttons displayed. You can also set a bigger title font (like font:{size:"36"}) for this to have a greater effect.

Contributor guide

Tech stack: javascript
Domain: frontend
Issue type: bug
Difficulty: 3
Estimated time: 1-2 days
Activity status: fresh
Clarity: clear
Prerequisites: understanding of plotly.js layout system
Newbie friendliness: 40
Research direction: Investigate how automargin interacts with sliders/buttons in plotly.js. Focus on the layout margin calculation, particularly in src/plots/cartesian/layout attributes.js or similar files. The bug occurs when both automargin and title automargin are enabled along with sliders or buttons, causing trace positions to not align with axis ticks. Review how margin expansion is applied to trace positioning versus tick label positioning.