how to customize hover tooltip

Question

I have a plot that has multiple curves as shown in the attached.

var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
        showlegend: false
    },
    {
        x: [1,2,3,4,5],
        y: [3.02825,2.63728,4.83839,3.8485,1.73463],
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.different',
        showlegend: false
    },
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown',
        x: [1,2,3,4,5],
        y: [5.02825,4.63728,3.83839,2.8485,0.73463],
        hovertemplate: '(%{x},%{y})',
        showlegend: false
    },

]; 

var layout = {
    title: "Set hover text with hovertemplate",
};

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

https://codepen.io/mmakrzem/pen/mdOpWLd

Each of the curves have a really long name so I'd like to customize the hovertemplate so that it shows (x,y) ...

For for my example I'd expect to see something like ...bel6.nameA or ...different or ...l6.unknown. Whereas right now I'm getting Main.app.fol... for all the plots so I can't differentiate between them. I also tried setting the hovertemplate to just (x,y) but then the whole name is shown and that is just ridiculously long.

user_5327068 · Answer

For each trace, you can add the string you want to display using the customdata argument and setting it equal to an array of strings the same length as the x and y arrays you pass to each trace (for example, customdata: Array(5).fill('...nameA')).

Then you can modify the hovertemplate to include %{customdata} and hide the long trace name completely by adding the string .

Your hovertemplate will look like this: '%{x},%{y} %{customdata}'

My codepen is here if you want to take a look.

var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
        customdata:Array(5).fill('...nameA'),
        hovertemplate: '%{x},%{y} %{customdata}',
        showlegend: false
    },
    {
        x: [1,2,3,4,5],
        y: [3.02825,2.63728,4.83839,3.8485,1.73463],
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.different',
        customdata:Array(5).fill('...different'),
        hovertemplate: '%{x},%{y} %{customdata}',
        showlegend: false
    },
  {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown',
        x: [1,2,3,4,5],
        y: [5.02825,4.63728,3.83839,2.8485,0.73463],
        customdata:Array(5).fill('...unknown'),
        hovertemplate: '%{x},%{y} %{customdata}',
        showlegend: false
    },
  
];

var layout = {
    title: "Set hover text with hovertemplate",
};

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

how to customize hover tooltip

1 Answers