<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var myPlot = document.getElementById('myDiv'),
    x = [1, 2, 3, 4, 5, 6],
    y = [1, 2, 3, 2, 3, 4],
    y2 = [1, 4, 7, 6, 1, 5],
    colors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
              ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']],
    data = [{x:x, y:y, type:'scatter',
             mode:'line', line:{ color:'#5C636E'},marker:{size:16, color:colors[0]}},
            {x:x, y:y2, type:'scatter',
             mode:'line',line:{ color:'#393e46'}, marker:{size:16, color:colors[1]}}],
    layout = {
        showlegend: true,
        hovermode:'closest',
        title:'Click on a Point to Change Color <br> Click on a Trace in the Legend to Change Back One Trace Only'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
  var pn='',
      tn='',
      colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
  var update = {'marker':{color: colors, size:16}};
  Plotly.restyle('myDiv', update,[tn]);
});

myPlot.on('plotly_legendclick', function(data){
  var trColors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
              ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']];
  var update = {'marker':{color: trColors[data.curveNumber], size:16}};
  Plotly.restyle('myDiv', update,[data.curveNumber]);
  return false;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.