| 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: Tue, 29 Jul 2025 05:16:58 GMT
etag: W/"687e6266-7b26"
expires: Tue, 29 Jul 2025 05:26:58 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: 24915159f982beb54f8ccca4426d6d457121138f
x-github-request-id: 2F9C:3A5B8B:34B11:44A6A:6888594A
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210029-BOM
x-timer: S1753766219.521818,VS0,VE224
x-vercel-cache: MISS
x-vercel-id: bom1::kk467-1753766218505-1c2206fb9cda
content-length: 8154
Click events in JavaScript
Click Events in JavaScript
How to bind callback functions to click 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'),
N = 16,
x = d3.range(N),
y = d3.range(N).map( d3.random.normal() ),
data = [ { x:x, y:y, type:'scatter',
mode:'markers', marker:{size:16} } ],
layout = {
hovermode:'closest',
title: {text: 'Click on Points'}
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_click', function(data){
var pts = '';
for(var i=0; i < data.points.length; i++){
pts = 'x = '+data.points[i].x +'\ny = '+
data.points[i].y.toPrecision(4) + '\n\n';
}
alert('Closest point clicked:\n\n'+pts);
});
var myPlot = document.getElementById('myDiv'),
N = 100,
x = d3.range(N),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal(-2) ),
y3 = d3.range(N).map( d3.random.normal(2) ),
trace1 = { x:x, y:y1, type:'scatter', mode:'lines', name:'Jeff' },
trace2 = { x:x, y:y2, type:'scatter', mode:'lines', name:'Terren' },
trace3 = { x:x, y:y3, type:'scatter', mode:'lines', name:'Arthur' },
data = [ trace1, trace2, trace3 ],
layout = {
hovermode:'closest',
title: {text: 'Click on Points to add an Annotation on it'}
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_click', function(data){
var pts = '';
for(var i=0; i < data.points.length; i++){
annotate_text = 'x = '+data.points[i].x +
'y = '+data.points[i].y.toPrecision(4);
annotation = {
text: annotate_text,
x: data.points[i].x,
y: parseFloat(data.points[i].y.toPrecision(4))
}
annotations = self.layout.annotations || [];
annotations.push(annotation);
Plotly.relayout('myDiv',{annotations: annotations})
}
});