PlotlyJS Horizontal Legend

by Michael Smith

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 config = {
  showlink: false,
  displaylogo: false,
  displayModeBar: true,
  modeBarButtonsToRemove: ['sendDataToCloud', 'select2d', 'lasso2d', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian']
}

var 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"
    },
    "legendgroup": 1,
    "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"
    },
    "legendgroup": 1,
    "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:...