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

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