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);
If "x unified" (or "y unified"), a single hoverlabel will appear for multiple points at the closest x- (or y-) coordinate within the hoverdistance
with the caveat that no more than one hoverlabel will appear per trace.
var data = [
{
x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
y: [10, 15, 12, 18],
mode: 'markers+lines',
name: 'Series A',
hovertemplate: null,
type: 'scatter'
},
{
x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
y: [8, 12, 16, 14],
mode: 'markers+lines',
name: 'Series B',
hovertemplate: null,
type: 'scatter'
}
];
var layout = {
title: {
text: "layout.hovermode='x unified'"
},
hovermode: 'x unified',
xaxis: {
title: 'Date'
},
yaxis: {
title: 'Value'
}
};
Plotly.newPlot('myDiv', data, layout);
New in 3.1
Customize the title shown in unified hovermode by specifying unifiedhovertitle.text
. The unified hover title is a template string that supports using variables from the data. Numbers are formatted using d3-format's syntax %{variable:d3-format}
, for example "Price: %{y:$.2f}"
. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}
, for example "Day: %{x|%A}"
.
var data = [
{
x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
y: [150.25, 165.50, 142.75, 178.90],
mode: 'lines+markers',
name: 'Stock A',
type: 'scatter'
},
{
x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
y: [85.30, 92.15, 88.45, 95.20],
mode: 'lines+markers',
name: 'Stock B',
type: 'scatter'
}
];
var layout = {
title: {
text: "Stock Prices with Custom Unified Hover Title"
},
hovermode: 'x unified',
xaxis: {
title: 'Date',
unifiedhovertitle: {
text: '<b>%{x|%A, %B %d, %Y}</b>'
}
},
yaxis: {
title: 'Price (USD)',
tickprefix: '$'
}
};
Plotly.newPlot('myDiv', data, layout);
