Javascript Plotly hovertemplate additional data

plotly.js
1

Hi everyone,

So for a project I’m currently working on at work were going to be building some hover functionality for the markers, however I’m wondering how I can custom data in the form of an object or nested array.

Based on what I have found so far I can use the customdata property, though this only seems to be a simple array of data unless I’m missing something.

What I want to be able to do is pass it some object properties which it can interpret like property.fullName.

Does Plotly offer a flexible way to inject additional data besides the x and y properties ?

Any comments or feedback would be greatly appreciated :smile:

Thank’s,

Alex

2

I think I might have answered my own question.

I managed to find an example online and it look’s like you can pass an array of strings like in the example below.

So Instead of passing an array of objects I can just pass the properties in.

var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
      customdata: [['A', 'B', 'C'], 2,3,4,5],
      hovertemplate: '<i>Price</i>: $%{y:.2f}' +
                        '<br><b>X</b>: %{x}<br>' +
                        '<b>%{customdata[0]}</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: "Set hover text with hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);