Skip to content

Bug: relayout with automargin: true on one chart incorrectly modifies titles of other charts on the page #7521

New issue
New issue
Open
#7522
Open
Bug: relayout with automargin: true on one chart incorrectly modifies titles of other charts on the page#7521
#7522
@davibarbosa2

Description

@davibarbosa2
davibarbosa2
opened on Aug 15, 2025

Summary

When multiple Plotly charts are present on a single HTML page, calling Plotly.relayout or some resize to update one chart also affects the titles of all other charts on the page. This issue seems to occur specifically when the title has automargin: true enabled. The root cause appears to be the use of a global D3 selector (d3.selectAll) instead of a scoped selector.

Reproduction

https://codepen.io/davibarbosa/pen/ZYbvBpG

Expected Behavior

Only the title of the first chart (the one targeted by the relayout or resize call) should be modified. The second chart's title should remain completely unchanged.

Actual Behavior

The title of the first chart is updated as expected. However, the title of the second chart (and any other charts on the page) is also moved, incorrectly applying the layout attributes that were intended only for the first chart.

plotly.js/src/plot_api/subroutines.js

Lines 431 to 458 in 04441f9

var titleObj = d3.selectAll('.gtitle');
var titleHeight = Drawing.bBox(d3.selectAll('.g-gtitle').node()).height;
var pushMargin = needsMarginPush(gd, title, titleHeight);
if(pushMargin > 0) {
applyTitleAutoMargin(gd, y, pushMargin, titleHeight);
// Re-position the title once we know where it needs to be
titleObj.attr({
x: x,
y: y,
'text-anchor': textAnchor,
dy: getMainTitleDyAdj(title.yanchor)
}).call(svgTextUtils.positionText, x, y);
var extraLines = (title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
if(extraLines) {
var delta = alignmentConstants.LINE_SPACING * extraLines + alignmentConstants.MID_SHIFT;
if(title.y === 0) {
delta = -delta;
}
titleObj.selectAll('.line').each(function() {
var newDy = +(this.getAttribute('dy')).slice(0, -2) - delta + 'em';
this.setAttribute('dy', newDy);
});
}
// If there is a subtitle
var subtitleObj = d3.selectAll('.gtitle-subtitle');

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions