title: How to position legend on top instead of bottom in Plotly?
body: <p>I want to display the legend on the top of chart, but under the title. I looked for the API, and did not find anything related changing position, but only setting orientation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myData = [
      {
          fcst_valid_local: "2013-01-04 22:23:00",
          pop: 20,
          temp: 38,
      },
      {
          fcst_valid_local: "2013-02-04 22:23:00",
          pop: 15,
          temp: 39,
      },
      {
          fcst_valid_local: "2013-03-04 22:23:00",
          pop: 2,
          rh: 70,
      }
  
  ];
  
  var data = [
      {
          x: myData.map(d =&gt; d.fcst_valid_local),
          y: myData.map(d =&gt; d.temp),
          type: 'line'
      },
      {
          x: myData.map(d =&gt; d.fcst_valid_local),
          y: myData.map(d =&gt; d.pop),
          type: 'bar',
          yaxis: 'y2'
      }
  ];
  
  var layout = {
      title: 'Daily Forecast',
      yaxis: {
          autorange: true,
          range: [0, 100],
      },
      yaxis2: {
          range: [0, 100],
          side: 'right',
          overlaying: 'y',
          type: 'linear'
      },
      legend: {orientation: 'h', side: 'top'}
  };
  
  Plotly.newPlot('myDiv', data, layout);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="myDiv" style="width: 480px; height: 400px;"&gt;&lt;!-- Plotly chart will be drawn inside this DIV --&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>