<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 trace1 = {
  x: [1, 2, 3],
  y: [2, 1, 3],
  legendgroup: 'group',
  legendgrouptitle: {
    text: "Red",
    font: {
      color: "red"
    }
  },
  marker: {color: 'red'},
  mode: 'lines',
  name: 'first legend group',
  type: 'scatter'
}
var trace2 = {
  x: [1, 2, 3],
  y: [2, 2, 2],
  legendgroup: 'group',
  line: {color: 'red'},
  mode: 'lines',
  name: 'first legend group - average',
  type: 'scatter'
}
var trace3 = {
  x: [1, 2, 3],
  y: [4, 9, 2],
  legendgroup: 'group2',
  legendgrouptitle: {
    text: "Blue",
    font: {
      color: "blue"
    }
  },
  marker: {color: 'blue'},
  mode: 'lines',
  name: 'second legend group',
  type: 'scatter'
}
var trace4 = {
  x: [1, 2, 3],
  y: [5, 5, 5],
  legendgroup: 'group2',
  line: {color: 'blue'},
  mode: 'lines',
  name: 'second legend group - average',
  type: 'scatter'
}
var data = [trace1, trace2, trace3, trace4]
var layout = {
  legend: {
    orientation: "h"
  }
}
var config = {
  responsive: true
}
var layer = document.getElementById("myDiv")

Plotly.newPlot(layer, data, layout, config)

layer.on("plotly_legendclick", data => {
  if(data.curveNumber !== undefined)
    return false
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.