<head>
  <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>
</head>
<html>
  <body>
    <button onclick="show()">+</button>
    <button onclick="hide()">-</button>
    <div id="myDiv"></div>
  </body>
</html>
button {
  width: 24px;
  height: 24px;
}
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, {responsive: true});

function show() {
  Plotly.update("myDiv", {showlegend: true}, {}, [0,1])
}

function hide() {
  Plotly.update("myDiv", {showlegend: false}, {}, [1])
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.