| 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: Wed, 15 Oct 2025 17:13:34 GMT
etag: W/"68e952e4-93a2"
expires: Wed, 15 Oct 2025 16:32:53 GMT
last-modified: Fri, 10 Oct 2025 18:39:32 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: HIT
x-cache-hits: 0
x-fastly-request-id: b74e27488c84905971d3d9046b5781e4a8398f22
x-github-request-id: 8E40:157BFB:19970:1D66E:68EFCA5D
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210095-BOM
x-timer: S1760548414.168586,VS0,VE300
x-vercel-cache: MISS
x-vercel-id: bom1::9cgrw-1760548414152-b3ac9c00056e
content-length: 8876
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. Try Plotly Studio 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!