add hover text to plotly.js boxplot

3
votes

I'm creating a graph of boxplots, and I'd like to have hover text (similar to what can be done in a plotly scatter plot) appear over an individual boxplot. In this specific case I'd like to display the number of points that went into the distribution, but I'm more interested in the general solution.

In the trace dictionary I've tried using the key "text" and a value that is a list of the text I want:

for (var i = 0; i < genes.length; i++) {
    var d = distributions[i];
    var g = genes[i];

    var x = [];
    var text = [];
    for (var j = 0; j < d.length; j++) {
        x.push(g);
        text.push("N=" + d.length);
    }
    trace = {x: x, y:d, type: 'box', name: g, text:text};

    data.push(trace);
}

Is there a keyword or mechanism that will allow me to display meta data when the user hovers over an individual boxplot? Thank you in advance.

2
javascriptboxplotplotly

2 Answers

0
votes

Bind the data to hidden elements. Then have a :hover class change its display and position properties.

You might need to play with the positioning a bit, but making it absolute or fixed might work for you.

0
votes

You can add a custom tooltip at chosen Y value using the following tip :

  • Add a bar trace with the Y value you want
  • Hide its legend
  • Set its opacity at 0
  • Customize the tooltip text

Example :

let hover = {
    type: 'bar',
    x: ['col1', 'col2', 'col3'],
    y: [1,2,3],
    hovertext: ['text1', 'text2', 'text3'],
    marker: {
        color: '#333',
    },
    hoverinfo: 'text', // show only hovertext in tooltip
    showlegend: false, // hide legend
    opacity: 0, // hide bars
    width: .5, // align tooltips (have same width for boxplot and bars to)
};
data.push(hover);

Demo : https://codepen.io/kiruahxh/pen/PoNYvWw