| 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 09:46:52 GMT
etag: W/"687e6266-9a79"
expires: Tue, 29 Jul 2025 09:22:18 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: HIT
x-cache-hits: 0
x-fastly-request-id: c0cb2a8a5ea5b06428fef4202f3a762346fe489f
x-github-request-id: 9278:B90F7:6E1A7:84285:6888906F
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210053-BOM
x-timer: S1753782413.507886,VS0,VE209
x-vercel-cache: MISS
x-vercel-id: bom1::hxp2w-1753782412498-19f5cb29ece4
content-length: 9102
Hover text and formatting in JavaScript
Hover Text and Formatting in JavaScript
How to add hover text and format hover values 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.
var data = [
{
x: [0, .5, 1, 1.5, 2],
y: [1, 3, 2, 4, 2],
mode: 'markers',
marker: {size:16},
text: ['Text A', 'Text B', 'Text C', 'Text D', 'Text E'],
type: 'scatter'
}
];
var layout = {
title: {
text: 'Hover over the points to see the text'
}
};
Plotly.newPlot('myDiv', data, layout);
// Round x and y hover values by setting hoverformat in layout.xaxis and/or layout.yaxis
// using D3 number formatting ( https://github.com/mbostock/d3/wiki/Formatting )
var N = 40,
x = d3.range(N).map( d3.random.normal() ),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal() ),
data = [{ x:x, y:y1, type:'scatter', mode:'markers',
marker:{color:'rgba(200, 50, 100, .7)', size:16},
hoverinfo:"x+y"
},
{ x:x, y:y2, type:'scatter', mode:'markers',
marker:{color:'rgba(10, 180, 180, .8)', size:16},
hoverinfo:"x+y"}];
layout = {
hovermode: 'closest',
title: {
text: 'Formatting X & Y Hover Values'
},
xaxis: {
zeroline: false,
hoverformat: '.2f',
title: {
text: 'Rounded: 2 values after the decimal point on hover'
}
},
yaxis: {
zeroline: false,
hoverformat: '.2r',
title: {
text: 'Rounded: 2 significant values on hover'
}
}
};
Plotly.newPlot('myDiv', data, layout);
var data = [
{
type: 'scatter',
mode: 'lines+markers',
x: [1,2,3,4,5],
y: [2.02825,1.63728,6.83839,4.8485,4.73463],
hovertemplate: '<i>Price</i>: $%{y:.2f}' +
'<br><b>X</b>: %{x}<br>' +
'<b>%{text}</b>',
text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
showlegend: false
},
{
x: [1,2,3,4,5],
y: [3.02825,2.63728,4.83839,3.8485,1.73463],
hovertemplate: 'Price: %{y:$.2f}<extra></extra>',
showlegend: false
}
];
var layout = {
title: {
text: "Set hover text with hovertemplate"
},
};
Plotly.newPlot('myDiv', data, layout);