<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]);
});
This Pen doesn't use any external CSS resources.