Multi-line titles don't respond to title.yanchor #6472

Activity

1. archmoj commented on Feb 7, 2023

   

   archmoj

   on Feb 7, 2023

   Contributor

   More actions

   Looks like a bug to me. @alexcjohnson what do you think?
2. hannahker commented on Mar 14, 2023

   

   hannahker

   on Mar 14, 2023

   Last edited by hannahker

   ContributorAuthor

   More actions

   It looks like this is due to errors in how the dy property of the SVG text is set (which is controlled from the API via yanchor). This function sets the dy for the .gtitle element, but text for multi-line titles is broken into tspan elements. It's looking like the children tspan elements don't have the dy set appropriately and I'm not sure where these values are coming from.

   
3. archmoj

   closed this as completedin #6758on Oct 24, 2023
4. avm19 commented on Jun 25, 2024

   

   avm19

   on Jun 25, 2024

   More actions

   This bug still persists and the issue must be re-opened. @archmoj, @hannahker
   Checked for Plotly.version "2.33.0".

   Changing yanchor: "bottom" to yanchor: "top" in the code below has no effect.

   Most importantly, from my perspective of a plotly.py user, there is no convenient way of "resting" a multi-line title precisely on top of the paper. One should keep guessing padding in pixels or percent, and then do over when a font size or height change. This is why this issue matters.

   If I understand the semantics correctly, yanchor: "bottom" must line up the bottom of the bottom line with the position, and yanchor: "top" must line up the top of the top line.

   JS code based on [Hannah's Codepen example](https://codepen.io/hannahker/pen/gOjyLEY)

   Plotly.newPlot("div1", {
     data: [
       {
         showlegend: false,
         type: "scatter",
         x: [1, 2, 3],
         y: [4, 5, 6]
       }
     ],
     layout: {
       width: 300,
       height: 200,
       paper_bgcolor: "LightSteelBlue",
       margin: { t: 40, b: 0, l: 0, r: 0 },
       yaxis: {
         automargin: true,
         title: { text: "Y-axis" }
       },
       xaxis: { automargin: true, title: { text: "X-axis" } },
       title: {
         text: "ELELELE<br>ELEELELEL<br>ELELELEL",
         font: { size: 12 },
         yref: "paper",
         y: "1",
         yanchor: "bottom",
         pad: {b: 0}
       }
     }
   });