Heatmaps with hovertemplate with %{text} is not working
Open
Nobody has claimed this yet.
bug
P3
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
The following works for scatter plot where you can see %{text} is being populated from the provided text:
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
{
type: 'scatter',
mode: 'lines+markers',
x: [1, 2, 3],
y: [2, 4, 6],
z: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
hovertemplate: '<i>Price</i>: $%{y:.2f}' +
'<br><b>X</b>: %{x}<br>' +
'<b>%{text}</b>',
text: ["Text A", "Text B", "Text C"],
showlegend: false
}
];
var layout = {
title: "Set hover text with hovertemplate",
};
Plotly.newPlot('myDiv', data, layout);
But the same doesn't work you generate a heatmap (the code is the same, except changed the type to heatmap):
var data = [
{
type: 'heatmap',
mode: 'lines+markers',
x: [1, 2, 3],
y: [2, 4, 6],
z: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
hovertemplate: '<i>Price</i>: $%{y:.2f}' +
'<br><b>X</b>: %{x}<br>' +
'<b>%{text}</b>',
text: ["Text A", "Text B", "Text C"],
showlegend: false
}
];
var layout = {
title: "Set hover text with hovertemplate",
};
Plotly.newPlot('myDiv', data, layout);
Would really appreciate some help on this.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the supplied HTML and JavaScript reproduction with Plotly 2.24.1, then compare hovertemplate handling for the scatter and heatmap traces. Trace the heatmap hover behavior and its %{text} data mapping; done means the provided text appears in the heatmap hover labels without regressing scatter behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100