PlotlyJS Legend Wrap automargin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='plotly' style="width: 500px; heigth: 500px; border: 1px solid tomato"></div>

JavaScript

var chartId = 'plotly';
var $chart = $('#' + chartId);

var data = [
		{
    "x": [1, 2, 3, 4],
    "y": ["long y label long y label long y label", 'a', 'b', 'c'],
    "name": 'trace 1'
    },
 		{
    "x": [1.1, 2.1, 3.1, 4.1],
    "y": ["long y label long y label long y label", 'a', 'b', 'c'],
    "name": 'trace 1'
    },
 		{
    "x": [1.2, 2.2, 3.2, 4.2],
    "y": ["long y label long y label long y label", 'a', 'b', 'c'],
    "name": 'trace 1'
    },
  		{
    "x": [1.3, 2.3, 3.3, 4.3],
    "y": ["long y label long y label long y label", 'a', 'b', 'c'],
    "name": 'trace 1'
    },
 		{
    "x": [1.4, 2.4, 3.4, 4.4],
    "y": ["long y label long y label long y label", 'a', 'b', 'c'],
    "name": 'trace 1'
    }
    ];
var layout = {
  legend: {
    orientation: 'h',
    bgcolor: '#ffffff00' // Just to show the graph underneath
  },
  yaxis: {
  automargin: true
  }
};

var p = Plotly.plot(chartId, data, layout);