Skip to content

Vertical legend sizing/positioning broken #7473

@camdecoster

Description

@camdecoster

Description

Vertical legend sizing/positioning broke (in some circumstances) as a result of some of the changes in #7359. You can see the difference between 3.0.1 and 3.1.0-rc.0

v3.0.1 v3.1.0-rc.0
Image Image

Steps to reproduce

  • Be on Plotly 3.0.1
  • Create a new plot with the following configuration:
      {
       "data": [
        {
         "x": [1, 2, 3, 4],
         "y": [63.69, 62.55, 61.64, 61.39],
         "text": [
          "FiscalYear: 2012<br>Percent: 63.69<br>Students: 1235<br>Race: 1<br>Race: Average",
          "FiscalYear: 2013<br>Percent: 62.55<br>Students: 1149<br>Race: 1<br>Race: Average",
          "FiscalYear: 2014<br>Percent: 61.64<br>Students: 1080<br>Race: 1<br>Race: Average",
          "FiscalYear: 2015<br>Percent: 61.39<br>Students: 1035<br>Race: 1<br>Race: Average"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Average",
         "line": {
          "width": 1.8898,
          "color": "rgba(0,0,0,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [58.24, 54.93, 42.11, 50.75],
         "text": [
          "FiscalYear: 2012<br>Percent: 58.24<br>Students: 53<br>Race: 2<br>Race: African American",
          "FiscalYear: 2013<br>Percent: 54.93<br>Students: 39<br>Race: 2<br>Race: African American",
          "FiscalYear: 2014<br>Percent: 42.11<br>Students: 32<br>Race: 2<br>Race: African American",
          "FiscalYear: 2015<br>Percent: 50.75<br>Students: 34<br>Race: 2<br>Race: African American"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "African American",
         "line": {
          "width": 1.8898,
          "color": "rgba(248,118,109,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [51.49, 49.59, 37.12, 31.45],
         "text": [
          "FiscalYear: 2012<br>Percent: 51.49<br>Students: 69<br>Race: 3<br>Race: Alaska Native",
          "FiscalYear: 2013<br>Percent: 49.59<br>Students: 60<br>Race: 3<br>Race: Alaska Native",
          "FiscalYear: 2014<br>Percent: 37.12<br>Students: 49<br>Race: 3<br>Race: Alaska Native",
          "FiscalYear: 2015<br>Percent: 31.45<br>Students: 39<br>Race: 3<br>Race: Alaska Native"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Alaska Native",
         "line": {
          "width": 1.8898,
          "color": "rgba(216,144,0,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [49.09, 58.54, 53.91, 43.12],
         "text": [
          "FiscalYear: 2012<br>Percent: 49.09<br>Students: 54<br>Race: 4<br>Race: Alaska Native Multirace",
          "FiscalYear: 2013<br>Percent: 58.54<br>Students: 72<br>Race: 4<br>Race: Alaska Native Multirace",
          "FiscalYear: 2014<br>Percent: 53.91<br>Students: 62<br>Race: 4<br>Race: Alaska Native Multirace",
          "FiscalYear: 2015<br>Percent: 43.12<br>Students: 47<br>Race: 4<br>Race: Alaska Native Multirace"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Alaska Native Multirace",
         "line": {
          "width": 1.8898,
          "color": "rgba(163,165,0,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [70.53, 72.51, 72.28, 78.65],
         "text": [
          "FiscalYear: 2012<br>Percent: 70.53<br>Students: 146<br>Race: 5<br>Race: Asian",
          "FiscalYear: 2013<br>Percent: 72.51<br>Students: 124<br>Race: 5<br>Race: Asian",
          "FiscalYear: 2014<br>Percent: 72.28<br>Students: 133<br>Race: 5<br>Race: Asian",
          "FiscalYear: 2015<br>Percent: 78.65<br>Students: 140<br>Race: 5<br>Race: Asian"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Asian",
         "line": {
          "width": 1.8898,
          "color": "rgba(57,182,0,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [62.69, 59.09, 63.82, 62],
         "text": [
          "FiscalYear: 2012<br>Percent: 62.69<br>Students: 84<br>Race: 6<br>Race: Hispanic",
          "FiscalYear: 2013<br>Percent: 59.09<br>Students: 91<br>Race: 6<br>Race: Hispanic",
          "FiscalYear: 2014<br>Percent: 63.82<br>Students: 97<br>Race: 6<br>Race: Hispanic",
          "FiscalYear: 2015<br>Percent: 62<br>Students: 93<br>Race: 6<br>Race: Hispanic"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Hispanic",
         "line": {
          "width": 1.8898,
          "color": "rgba(0,191,125,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [76.27, 71.43, 59.83, 64.34],
         "text": [
          "FiscalYear: 2012<br>Percent: 76.27<br>Students: 90<br>Race: 7<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2013<br>Percent: 71.43<br>Students: 95<br>Race: 7<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2014<br>Percent: 59.83<br>Students: 70<br>Race: 7<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2015<br>Percent: 64.34<br>Students: 83<br>Race: 7<br>Race: Non Hispanic Multirace"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Non Hispanic Multirace",
         "line": {
          "width": 1.8898,
          "color": "rgba(0,191,196,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [71.15, 81.82, 88.46, 74.29],
         "text": [
          "FiscalYear: 2012<br>Percent: 71.15<br>Students: 37<br>Race: 8<br>Race: Non Resident Alien",
          "FiscalYear: 2013<br>Percent: 81.82<br>Students: 27<br>Race: 8<br>Race: Non Resident Alien",
          "FiscalYear: 2014<br>Percent: 88.46<br>Students: 23<br>Race: 8<br>Race: Non Resident Alien",
          "FiscalYear: 2015<br>Percent: 74.29<br>Students: 26<br>Race: 8<br>Race: Non Resident Alien"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Non Resident Alien",
         "line": {
          "width": 1.8898,
          "color": "rgba(0,176,246,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [57.89, 57.38, 52.08, 63.83],
         "text": [
          "FiscalYear: 2012<br>Percent: 57.89<br>Students: 44<br>Race: 9<br>Race: Unknown",
          "FiscalYear: 2013<br>Percent: 57.38<br>Students: 35<br>Race: 9<br>Race: Unknown",
          "FiscalYear: 2014<br>Percent: 52.08<br>Students: 25<br>Race: 9<br>Race: Unknown",
          "FiscalYear: 2015<br>Percent: 63.83<br>Students: 30<br>Race: 9<br>Race: Unknown"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "Unknown",
         "line": {
          "width": 1.8898,
          "color": "rgba(149,144,255,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [65.4, 63.27, 65.78, 64.03],
         "text": [
          "FiscalYear: 2012<br>Percent: 65.4<br>Students: 635<br>Race: 10<br>Race: White",
          "FiscalYear: 2013<br>Percent: 63.27<br>Students: 577<br>Race: 10<br>Race: White",
          "FiscalYear: 2014<br>Percent: 65.78<br>Students: 571<br>Race: 10<br>Race: White",
          "FiscalYear: 2015<br>Percent: 64.03<br>Students: 518<br>Race: 10<br>Race: White"
         ],
         "key": null,
         "type": "scatter",
         "mode": "lines",
         "name": "White",
         "line": {
          "width": 1.8898,
          "color": "rgba(231,107,243,1)",
          "dash": "solid"
         },
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [63.69, 62.55, 61.64, 61.39],
         "text": [
          "FiscalYear: 2012<br>Percent: 63.69<br>Students: 1235<br>Race: Average",
          "FiscalYear: 2013<br>Percent: 62.55<br>Students: 1149<br>Race: Average",
          "FiscalYear: 2014<br>Percent: 61.64<br>Students: 1080<br>Race: Average",
          "FiscalYear: 2015<br>Percent: 61.39<br>Students: 1035<br>Race: Average"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(0,0,0,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(0,0,0,1)"
          }
         },
         "name": "Average",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [58.24, 54.93, 42.11, 50.75],
         "text": [
          "FiscalYear: 2012<br>Percent: 58.24<br>Students: 53<br>Race: African American",
          "FiscalYear: 2013<br>Percent: 54.93<br>Students: 39<br>Race: African American",
          "FiscalYear: 2014<br>Percent: 42.11<br>Students: 32<br>Race: African American",
          "FiscalYear: 2015<br>Percent: 50.75<br>Students: 34<br>Race: African American"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(248,118,109,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(248,118,109,1)"
          }
         },
         "name": "African American",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [51.49, 49.59, 37.12, 31.45],
         "text": [
          "FiscalYear: 2012<br>Percent: 51.49<br>Students: 69<br>Race: Alaska Native",
          "FiscalYear: 2013<br>Percent: 49.59<br>Students: 60<br>Race: Alaska Native",
          "FiscalYear: 2014<br>Percent: 37.12<br>Students: 49<br>Race: Alaska Native",
          "FiscalYear: 2015<br>Percent: 31.45<br>Students: 39<br>Race: Alaska Native"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(216,144,0,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(216,144,0,1)"
          }
         },
         "name": "Alaska Native",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [49.09, 58.54, 53.91, 43.12],
         "text": [
          "FiscalYear: 2012<br>Percent: 49.09<br>Students: 54<br>Race: Alaska Native Multirace",
          "FiscalYear: 2013<br>Percent: 58.54<br>Students: 72<br>Race: Alaska Native Multirace",
          "FiscalYear: 2014<br>Percent: 53.91<br>Students: 62<br>Race: Alaska Native Multirace",
          "FiscalYear: 2015<br>Percent: 43.12<br>Students: 47<br>Race: Alaska Native Multirace"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(163,165,0,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(163,165,0,1)"
          }
         },
         "name": "Alaska Native Multirace",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [70.53, 72.51, 72.28, 78.65],
         "text": [
          "FiscalYear: 2012<br>Percent: 70.53<br>Students: 146<br>Race: Asian",
          "FiscalYear: 2013<br>Percent: 72.51<br>Students: 124<br>Race: Asian",
          "FiscalYear: 2014<br>Percent: 72.28<br>Students: 133<br>Race: Asian",
          "FiscalYear: 2015<br>Percent: 78.65<br>Students: 140<br>Race: Asian"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(57,182,0,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(57,182,0,1)"
          }
         },
         "name": "Asian",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [62.69, 59.09, 63.82, 62],
         "text": [
          "FiscalYear: 2012<br>Percent: 62.69<br>Students: 84<br>Race: Hispanic",
          "FiscalYear: 2013<br>Percent: 59.09<br>Students: 91<br>Race: Hispanic",
          "FiscalYear: 2014<br>Percent: 63.82<br>Students: 97<br>Race: Hispanic",
          "FiscalYear: 2015<br>Percent: 62<br>Students: 93<br>Race: Hispanic"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(0,191,125,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(0,191,125,1)"
          }
         },
         "name": "Hispanic",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [76.27, 71.43, 59.83, 64.34],
         "text": [
          "FiscalYear: 2012<br>Percent: 76.27<br>Students: 90<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2013<br>Percent: 71.43<br>Students: 95<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2014<br>Percent: 59.83<br>Students: 70<br>Race: Non Hispanic Multirace",
          "FiscalYear: 2015<br>Percent: 64.34<br>Students: 83<br>Race: Non Hispanic Multirace"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(0,191,196,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(0,191,196,1)"
          }
         },
         "name": "Non Hispanic Multirace",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [71.15, 81.82, 88.46, 74.29],
         "text": [
          "FiscalYear: 2012<br>Percent: 71.15<br>Students: 37<br>Race: Non Resident Alien",
          "FiscalYear: 2013<br>Percent: 81.82<br>Students: 27<br>Race: Non Resident Alien",
          "FiscalYear: 2014<br>Percent: 88.46<br>Students: 23<br>Race: Non Resident Alien",
          "FiscalYear: 2015<br>Percent: 74.29<br>Students: 26<br>Race: Non Resident Alien"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(0,176,246,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(0,176,246,1)"
          }
         },
         "name": "Non Resident Alien",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [57.89, 57.38, 52.08, 63.83],
         "text": [
          "FiscalYear: 2012<br>Percent: 57.89<br>Students: 44<br>Race: Unknown",
          "FiscalYear: 2013<br>Percent: 57.38<br>Students: 35<br>Race: Unknown",
          "FiscalYear: 2014<br>Percent: 52.08<br>Students: 25<br>Race: Unknown",
          "FiscalYear: 2015<br>Percent: 63.83<br>Students: 30<br>Race: Unknown"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(149,144,255,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(149,144,255,1)"
          }
         },
         "name": "Unknown",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        },
        {
         "x": [1, 2, 3, 4],
         "y": [65.4, 63.27, 65.78, 64.03],
         "text": [
          "FiscalYear: 2012<br>Percent: 65.4<br>Students: 635<br>Race: White",
          "FiscalYear: 2013<br>Percent: 63.27<br>Students: 577<br>Race: White",
          "FiscalYear: 2014<br>Percent: 65.78<br>Students: 571<br>Race: White",
          "FiscalYear: 2015<br>Percent: 64.03<br>Students: 518<br>Race: White"
         ],
         "key": null,
         "type": "scatter",
         "mode": "markers",
         "marker": {
          "autocolorscale": false,
          "color": "rgba(231,107,243,1)",
          "opacity": 1,
          "size": 5.6693,
          "symbol": "circle",
          "line": {
           "width": 1.8898,
           "color": "rgba(231,107,243,1)"
          }
         },
         "name": "White",
         "showlegend": true,
         "xaxis": "x",
         "yaxis": "y",
         "hoverinfo": "text"
        }
       ],
       "layout": {
        "margin": {
         "t": 34.8976,
         "r": 75.5906,
         "b": 51.243,
         "l": 57.6191
        },
        "plot_bgcolor": "rgba(255,255,255,1)",
        "paper_bgcolor": "rgba(255,255,255,1)",
        "font": {
         "color": "rgba(34,34,34,1)",
         "family": "Roboto",
         "size": 15.9402
        },
        "xaxis": {
         "type": "linear",
         "autorange": false,
         "tickmode": "array",
         "range": [0.4, 4.6],
         "minor": {
          "tickvals": [1.5, 2.5, 3.5],
          "ticks": "inside",
          "tickwidth": 100,
          "ticklen": 5,
          "tickcolor": "orange",
          "gridcolor": "yellow",
          "gridwidth": 100,
          "griddash": "5px"
         },
         "ticktext": ["2012", "2013", "2014", "2015"],
         "tickvals": [1, 2, 3, 4],
         "ticks": "",
         "tickcolor": null,
         "ticklen": 3.653,
         "tickwidth": 0,
         "showticklabels": true,
         "tickfont": {
          "color": "rgba(77,77,77,1)",
          "family": "Roboto",
          "size": 12.7522
         },
         "tickangle": -0,
         "showline": false,
         "linecolor": null,
         "linewidth": 0,
         "showgrid": true,
         "domain": [0, 1],
         "gridcolor": "rgba(216,216,216,1)",
         "gridwidth": 0.6642,
         "zeroline": false,
         "anchor": "y",
         "title": {
          "text": "Fiscal year",
          "font": {
           "color": "rgba(34,34,34,1)",
           "family": "Roboto",
           "size": 15.9402
          }
         },
         "hoverformat": ".2f"
        },
        "yaxis": {
         "type": "linear",
         "autorange": false,
         "tickmode": "array",
         "range": [-5, 105],
         "ticktext": ["0", "25", "50", "75", "100"],
         "tickvals": [0, 25, 50, 75, 100],
         "ticks": "",
         "tickcolor": null,
         "ticklen": 3.653,
         "tickwidth": 0,
         "showticklabels": true,
         "tickfont": {
          "color": "rgba(77,77,77,1)",
          "family": "Roboto",
          "size": 12.7522
         },
         "tickangle": -0,
         "showline": false,
         "linecolor": null,
         "linewidth": 0,
         "showgrid": true,
         "domain": [0, 1],
         "gridcolor": "rgba(216,216,216,1)",
         "gridwidth": 0.6642,
         "zeroline": false,
         "anchor": "x",
         "title": {
          "text": "% of students",
          "font": {
           "color": "rgba(34,34,34,1)",
           "family": "Roboto",
           "size": 15.9402
          }
         },
         "hoverformat": ".2f"
        },
        "shapes": [
         {
          "type": "rect",
          "fillcolor": "transparent",
          "line": {
           "color": "rgba(0,0,0,1)",
           "width": 0,
           "linetype": "solid"
          },
          "yref": "paper",
          "xref": "paper",
          "x0": 0,
          "x1": 1,
          "y0": 0,
          "y1": 1
         }
        ],
        "showlegend": true,
        "legend": {
         "orientation": "v",
         "x": 0.5,
         "y": -0.4,
         "xanchor": "center",
         "yanchor": "top",
         "bgcolor": "rgba(255,255,255,0.9)",
         "bordercolor": "#ccc",
         "borderwidth": 1,
         "font": { "size": 10 },
         "itemsizing": "constant",
         "itemwidth": 30,
         "itemclick": "toggle",
         "itemdoubleclick": "toggleothers"
        },
        "hovermode": "closest"
       }
      }
  • Note that the legend doesn't overlap the plot
  • Switch to Plotly v3.1.0-rc.0
  • Load the same configuration
  • Note that the legend overlaps the plot

Metadata

Metadata

Assignees

Labels

P1needed for current cyclebugsomething brokenregressionthis used to work

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions