Heatmaps with hovertemplate with %{text} is not working

jan119 commented 1 year ago

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.

DarshanDixit05 commented 1 year ago

Hey , i wanted to work on this issue . Can you please assign it to me ? I'll fix it asap.

anaestheramaral commented 1 year ago

It works fine for me when I use text with the same dimension and length as z

plotly / plotly.js

Heatmaps with hovertemplate with %{text} is not working #6689