PlotlyJS Horizontal Legend

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:100%,heigth:480px"></div>

JavaScript

var chartId = 'plotly';
var $chart = $('#' + chartId);
if ($chart.width() < 450) $chart.css('width', 450);

var data = [{
    "x": [1, 2, 3, 4],
    "y": [63.69, 62.55, 61.64, 61.39],
    
    // XXX: Comment out the line below to restore legend wrapping
    "legendgroup": 1
  },
  {
    "x": [1, 2, 3, 4],
    "y": [58.24, 54.93, 42.11, 50.75],
    "legendgroup": 1
  }, {
    "x": [1, 2, 3, 4],
    "y": [51.49, 49.59, 37.12, 31.45],
    "legendgroup": 1
  }, {
    "x": [1, 2, 3, 4],
    "y": [49.09, 58.54, 53.91, 43.12],
  }, {
    "x": [1, 2, 3, 4],
    "y": [70.53, 72.51, 72.28, 78.65],
  }, {
    "x": [1, 2, 3, 4],
    "y": [62.69, 59.09, 63.82, 62],
  }, {
    "x": [1, 2, 3, 4],
    "y": [76.27, 71.43, 59.83, 64.34],
  }, {
    "x": [1, 2, 3, 4],
    "y": [71.15, 81.82, 88.46, 74.29],
    "legendgroup": 3
  }, {
    "x": [1, 2, 3, 4],
    "y": [57.89, 57.38, 52.08, 63.83],
    "legendgroup": 3
  }, {
    "x": [1, 2, 3, 4],
    "y": [65.4, 63.27, 65.78, 64.03],
    "legendgroup": 3
  }];

var layout = {
  "legend": {
    "orientation": "h"
  }
};

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