How to get value from an array on hovertemplate

plotly.js
1

Hello everyone,

I’m here trying to plot a 3d chart using plotly.js, and a have the following issue:

If I use directly the array, I can get some value:

var data = [{
            z: z_data,
            type: 'surface',
            hovertemplate: '<b>Data:</b> ' + datas[0]+
                '<br><b>Frequência:</b> %{x:.2f} (Hz)<br>' +
                '<b>Amplitude: </b>%{z:.3f} (mm/s)<extra></extra>',
            contours: {
                z: {
                    show: false,
                    usecolormap: false,
                    highlightcolor: "#0000ff",
                    project: { z: true }
                }
            }
        }];

image
image750×546 56.6 KB

But if I try to get the ‘y’ value on that array, it is not working, I don’t know if there is a good approach for that:

        var data = [{
            z: z_data,
            type: 'surface',
            hovertemplate: '<b>Data:</b> ' + data['%{y}'] +
                '<br><b>Frequência:</b> ' + freq['%{x}'] +
                '<b>Amplitude: </b>%{z:.3f} (mm/s)<extra></extra>',
            contours: {
                z: {
                    show: false,
                    usecolormap: false,
                    highlightcolor: "#0000ff",
                    project: { z: true }
                }
            }
        }];

image
image758×583 54.9 KB

If someone has some tip or some idea what I could do, it would be a pleasure.

3

Hey, how are you doing?

You can use the on 'plotly_hover' event to set the hover template property of the hovered point:

 myPlot.on('plotly_hover', function(data) {

            let x = data.points[0].x,
                y = data.points[0].y

            data.points[0].fullData.hovertemplate = '<b>Data: </b>' + data[y] +
                '<br><b>Frequência:</b> ' + freq[x] + ' (Hz)<br>' +
                '<b>Amplitude: </b>%{z:.3f} (mm/s)<extra></extra>'
        })

Hope it helps you.

1 Like
4

Amazing, exactly what I was looking for. Thanks.

1 Like
5

Just in case anyone does not want to use plotly_hover (e.g. if they are doing it on React-Plotly), another approach to do this is to define text (on the same level as you are defining your x and y) as an array, doing something like:

text: custom_hover_array1.map((a, i) => `custom data: ${custom_hover_array1[i], more data: ${custom_hover_array2[i]}, etc...`),

And then do something like:

hovertemplate: "x.: %{x:.2f}<br />y: %{y:.2f}<br />%{text}",
6

I am using react-plotly.js with typescript. I have multiple normalized traces in a scattergl plot. I have a normalized y-value and have stored the actual value in the customdata array. Now I am trying to access that. I tried in the hovertemplate, using the data and fullData attributes, but I cannot get the syntax right, as it gives me my literal template back. Then I tried onHover with:

  const onHover = (event: Readonly<Plotly.PlotHoverEvent>) => {
    if (event.points[0].customdata) {
      event.points[0].data.hovertemplate = `${event.points[0].customdata}(%{y})`
    }
  }

But this shows the default implementation.

So, I am left with the text suggestion, but I do not understand where the custom_hover_array1 comes from. Could you elaborate?

7

To answer my own question: just use %{customdata} on the hovertemplate of the trace.