hovertemplate in HeatMap

Hi Experts, Regarding HeatMap MouseOver (tooltip): HeatMap shows value of x,y and z on mouse over by default, Also additionally it shows text information if we add data configuration for same.  But in my case, i need to use some labels for x,y and z so  i made some data configuration using hovertemplate. and it works for me. But the problem is, when i try to configure additional text information  it doesn’t show/render that text information dynamically, i it doesn’t show me the text value.  WHEN I DONT USE HOVERTEMPLATE , IT SHOWS VALUE FOR X,Y,Z,TEXT. WHEN I USE HOVERTEMPLATE , I AM ABLE TO DISPLAY labels for each axis like, X AS EMPLOYEE, Y AS MANAGER , Z AS SALARY AS PER HOVERTEMPLATE FORMAT BUT IT DOESN’T RENDER TEXT VALUE.         tried hovertemplate with hoverinfo and hovetext as well… is there anything which i need to consider while defining hovertemplate.
4 answers

hovertemplate should be defined within the data object. it overrides possible hoverinfo data.

You can use HTML tags and dynamic variables from your chart.


'<b>Grootte: %{marker.size}</b><br>Datum: %{x|%d %b}<br>Waarde: %{y} <extra></extra>'

Example data object:

    "x": [
      "2020-01-14 01:00:00",
      "2020-01-31 01:00:00"
    "y": [
      "1900-01-01 08:33",
      "1900-01-01 08:13"
    "marker": {
      "color": "#F0F0F0",
      "sizeref": 1,
      "sizemode": "area",
      "line": {
        "shape": "spline"
    "connectgaps": true,
    "hoveron": "points",
    "hoverlabel": {
      "bgcolor": "#484848",
      "bordercolor": "#FFFFFF",
      "font": {
        "family": "Agenda, sans-serif",
        "size": 15,
        "color": "#FFFFFF"
    "hovertemplate": "<b>%{x|%d %b}</b><br>Zonsopkomst: %{y}<extra></extra>",
    "mode": "lines",
    "name": "",
    "type": "scatter",
    "visible": "true",
    "showlegend": false

For more info look here (search for ‘hovertemplate’): https://plot.ly/javascript/reference/

Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plot.ly/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Anything contained in tag `<extra>` is displayed in the secondary box, for example "<extra>{fullData.name}</extra>". To hide the secondary box completely, use an empty tag `<extra></extra>`.



Hello Ruud Fleskens,

, Thanks for your reply.

I face problem when I render text value other than x,y,z. as shown below. Here I wanted to show text value dynamically. but it just returns/renders %{text}. I am able to render other information as shown below.


But When I remove ‘hovertemplate’ from ‘data’ configuration then,it renders  value of ‘text’ properly/dynamically as per association with axises.  as shown below(TextValue4 after z).


Thank you very much for your prompt reply !!.

yes...my text is in layout and not in data….but had hardcoded thoses values(text) in data configuration through Toggle editor...

Also have tried with suggested option in different different way...but result is same, it shows me as it is %{fullData.text}….

tried options are..

"hovertemplate": "<i>Country</i>: %{x}<br><i>Solution Domain</i>: %{y}<br><i>Score</i>: %{z}<br><extra>%{fullData.text}</extra>",

"hovertemplate": "<i>Country</i>: %{x}<br><i>Solution Domain</i>: %{y}<br><i>Score</i>: %{z}<br>%{fullData.text}<extra></extra>",

"hovertemplate": "<i>Country</i>: %{x}<br><i>Solution Domain</i>: %{y}<br><i>Score</i>: %{z}<br>%{fullData.text}",

Thanks in advance !!


Dynamic JSON

{ "annotations": [

{ "x": "UK", "y": "TestValues1", "text": "TestValuee1", "font": { "color": "yellow" }, "showarrow": false },

{ "x": "UK", "y": "TestValues2", "text": "TestValuee2", "font": { "color": "white" }, "showarrow": false },



] }

Static JSON



     { "family": "Open Sans", "size": 14, "color": "#222" },

     "autosize": true, "showarrow": false,

"xaxis": {

"fixedrange": true,

"title": "",

"ticks": "", "side": "top" },

"yaxis": { "autorange": "reversed", "fixedrange": true, "title": "", "ticks": "" },

"margin": { "l": 150, "b": 150, "r": 100, "t": 40, "pad": 10 }



Currently, I am trying to read(display) above values(TestValuee1,TestValuee2)  in tooltip as a testing purpose from above key "text" from Layout configuration, which I am not able to display there... This is my the actual problem…

After above is done, will display more values on tooltip if possible, because my actual requirement is to retrieve three different attributes from entity and show them on tooltip....