Menu
I'd like to increase the width of the line and its points when hovering the mouse cursor over a line. Animate parameters such as marker size and line width somehow when the mouse cursor is over them. How can I do that?
<head>
<script src="https://cdn.plot.ly/plotly-2.24.2.min.js" charset="utf-8"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
var data = [
{
x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
y: [1, 3, 6],
type: 'scatter',
mode: "lines+markers",
marker: {
size: 10
},
line: {
width: 4
}
}
];
Plotly.newPlot('myDiv', data);
</script>
</body>
795
asked Sep 16 '25 05:09
The plotly_hover event is only triggered on hovering the markers (datapoints):
<head>
<script src="https://cdn.plot.ly/plotly-2.24.2.min.js" charset="utf-8"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
var data = [
{
x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
y: [1, 3, 6],
type: 'scatter',
mode: "lines+markers",
marker: {
size: 10
},
line: {
width: 4
}
}
];
var layout = {
title: 'plotly_hover',
autorange: false,
xaxis: {
range: ['2013-10-04 00:00:00', '2013-12-06 00:00:00']
},
yaxis: {
range: [0, 7]
}
};
Plotly.newPlot('myDiv', data, layout);
var myPlot = document.getElementById('myDiv')
myPlot.on('plotly_hover', function(){
var update = {'line.width': 10, 'marker.size': 20};
Plotly.restyle(myPlot, update, 0);
});
myPlot.on('plotly_unhover', function(){
var update = {'line.width': 4, 'marker.size': 10};
Plotly.restyle(myPlot, update, 0);
});
</script>
</body>Please also check plotly's function reference on Plotly.restyle.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
