| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Mon, 28 Jul 2025 20:15:49 GMT
etag: W/"687e6266-8eec"
expires: Mon, 28 Jul 2025 20:25:49 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 214f156f3542d7e4f766a896fa142a3295208c82
x-github-request-id: FBAD:B0887:77B4:969A:6887DA73
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210056-BOM
x-timer: S1753733749.465124,VS0,VE208
x-vercel-cache: MISS
x-vercel-id: bom1::bqvt4-1753733749446-16639d106b08
content-length: 8762
Hover events in JavaScript
Hover Events in JavaScript
How to bind callback functions to hover events in D3.js-based JavaScript charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
{
points: [{
curveNumber: 2, // index in data of the trace associated with the selected point
pointNumber: 2, // index of the selected point
x: 5, // x value
y: 600, // y value
data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
fullData: {/* */}, // ref to the trace including all the defaults
xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
yaxis: {/* */} // ref to y-axis object " "
}, {
/* similarly for other selected points */
}]
}
var myPlot = document.getElementById('myDiv'),
hoverInfo = document.getElementById('hoverinfo'),
N = 16,
x = d3.range(N),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal() ),
data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
mode:'markers', marker:{size:16} },
{ x:x, y:y2, type:'scatter', name:'Trial 2',
mode:'markers', marker:{size:16} } ];
layout = {
hovermode:'closest',
title: {text: 'Hover on Points'}
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_hover', function(data){
var infotext = data.points.map(function(d){
return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
})
.on('plotly_unhover', function(data){
hoverInfo.innerHTML = '';
});
var myPlot = document.getElementById('myDiv'),
hoverInfo = document.getElementById('hoverinfo'),
N = 16,
x = d3.range(N),
y1 = d3.range(N).map(d3.random.normal()),
y2 = d3.range(N).map(d3.random.normal()),
data = [{x:x, y:y1, type:'scatter', name:'Trial 1',
mode:'markers', marker:{size:16}},
{x:x, y:y2, type:'scatter', name:'Trial 2',
mode:'markers', marker:{size:16}}],
layout = {hovermode:'closest',
title: {text: 'Hover on Points to see<br>Pixel Coordinates'}};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_hover', function(data){
var xaxis = data.points[0].xaxis,
yaxis = data.points[0].yaxis;
var infotext = data.points.map(function(d){
return ('width: '+xaxis.l2p(d.x)+', height: '+yaxis.l2p(d.y));
});
hoverInfo.innerHTML = infotext.join('<br/>');
})
.on('plotly_unhover', function(data){
hoverInfo.innerHTML = '';
});
var myPlot = document.getElementById('myDiv'),
hoverButton = document.getElementById('hoverbutton'),
N = 16,
x = d3.range(N),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal() ),
data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
mode:'markers', marker:{size:16} },
{ x:x, y:y2, type:'scatter', name:'Trial 2',
mode:'markers', marker:{size:16} } ];
layout = {
hovermode:'closest',
title: {text: 'Click "Go" button to trigger hover'}
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_beforehover',function(){
return false;
});
hoverButton.addEventListener('click', function(){
var curve1 = Math.floor(Math.random()*2),
curve2 = Math.floor(Math.random()*2),
point1 = Math.floor(Math.random()*14),
point2 = Math.floor(Math.random()*14);
Plotly.Fx.hover('myDiv',[
{curveNumber:curve1, pointNumber:point1},
{curveNumber:curve2, pointNumber:point2}
]);
});
var myPlot = document.getElementById('myDiv'),
N = 12,
x1 = d3.range(N).map( d3.random.normal() ),
x2 = d3.range(N).map( d3.random.normal() ),
x3 = d3.range(N).map( d3.random.normal() ),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal() ),
y3 = d3.range(N).map( d3.random.normal() ),
months = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December']
data = [{ x: x1, y: y1, text: months, type: 'scatter', name: '2014', hoverinfo: 'text+x+y',
mode: 'markers', marker: {color: 'rgba(200, 50, 100, .7)', size: 16}
},
{ x: x2, y: y2, text: months, type: 'scatter', name: '2015', hoverinfo: 'text+x+y',
mode: 'markers', marker: {color: 'rgba(120, 20, 130, .7)', size: 16}
},
{ x: x3, y: y3, text: months, type: 'scatter', name: '2016', hoverinfo: 'text+x+y',
mode: 'markers', marker: {color: 'rgba(10, 180, 180, .8)', size: 16}
}];
layout = {
hovermode:'closest',
title: {text: 'Display Hover Info for Related Points'},
xaxis:{zeroline:false, hoverformat: '.2r'},
yaxis:{zeroline:false, hoverformat: '.2r'}
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_hover', function (eventdata){
var points = eventdata.points[0],
pointNum = points.pointNumber;
Plotly.Fx.hover('myDiv',[
{ curveNumber:0, pointNumber:pointNum },
{ curveNumber:1, pointNumber:pointNum },
{ curveNumber:2, pointNumber:pointNum },
]);
});
This is a more complex example that uses both hover, and click events to display traces. Take a look in the codepen javascript!