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

<body>
  
  <div id="myDiv" style="width: 800px; height: 500px;"><!-- 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, 7],
    y = [1, 2, 3, 2, 3, 4, 3],
    colors =['#00000','#00000','#00000',
             '#00000','#00000','#00000', 
             '#00000'],
    data = [{x:x, y:y,       
             type:'scatter',
             mode:'markers', marker:{size:16, color:colors}}],
    layout = {
        hovermode:'closest',
        title:'Hover on a Point<br>to Change Color'
     };

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

myPlot.on('plotly_hover', 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_unhover', 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] = '#00000';
    
  var update = {'marker':{color: colors, size:16}};
  Plotly.restyle('myDiv', update, [tn]);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.plot.ly/plotly-latest.min.js