<head>
  <script src="https://cdn.plot.ly/plotly-2.33.0.min.js" charset="utf-8"></script>
</head>
<html>
  <body>
    <div id="myDiv"></div>
  </body>
</html>
var updatemenus = [{
  buttons: [
    {
      args: [{
        showlegend: [true, true]
      }],
      label: '+',
      method: 'restyle'
    },
    {
      args: [{
        showlegend: [true, false]
      }],
      label: '-',
      method: 'restyle'
    }
  ],
  direction: 'left',
  showactive: true,
  type: 'buttons',
  xanchor: 'left',
  yanchor: 'top',
  x: 1,
  y: 0.8
}]
var trace1 = {
  x: [0, 1, 2, 3],
  y: [1, 2, 3, 4],
  name: 'First Trace',
  showlegend: true,
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3],
  y: [8, 4, 2, 0],
  name: 'Second Trace',
  showlegend: true,
  type: 'scatter'
};
var data = [trace1, trace2]
Plotly.newPlot('myDiv', data, {updatemenus}, {
  responsive: true,
  modeBarButtonsAdd: ["drawline"]
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.