Tooltip to show all y values on shared axis

plotly.js
1

Hello all,

I have a plot that has some y-axes which share an x-axis.

One of the y-axes is overlaid over all of the other y-axes. See image.

newplot
newplot1900×1040 150 KB

Current Functionality:
The y-axis which is overlaid (the bar traces)
over the other y-axes (top and bottom scatter traces)
is taking precedence over the tooltip.
(i.e. in the image, the 3 bar traces assigned to the overlaid y-axis (yaxis100) always show up on the tooltip).

Desired Functionality:
I’d like the tooltip to show all y-values of all traces belonging to all y-axes at the cursor position.

note: I have implemented by simply setting the domain of the overlaid y-axis (‘yaxis100’) = [0,1]

2

Hi,

Would hovermode = "x unified" do the trick in your case?

I don’t think I ever tried it with multiple y-axis, but it is worth the shot…

3

Thanks for the response.
hovermode = "x unified" is what I am currently using.

I have somewhat of an edge case that I’m trying to smash together.

Here’s a look at relevant properties from data and layout objects…
data

     {
        name: "Faults",
        x: [], y: [],
        xaxis: "x",
        yaxis: "y100",
        type: "bar",
    },
      {
        name: "Diameter",
        x: [], y: [],
        xaxis: "x",
        yaxis: "y3",
        type: "scattergl"
      },
 {
        name: "Wire Speed",
        x: [], y: [],
        xaxis: "x",
        yaxis: "y2",
        type: "scattergl"
      },

funny note: scatter traces don’t show on top of bar y-axis unless scattergl… (scatter does not work)

layout

{
    hovermode: "x unified",

    xaxis: {
        title: "Distance (feet)",
        showgrid: true,
    },

    /* faults must be last axis to show on top */
    yaxis100: {
        title: 'Faults',
        visible: true,
        anchor: 'x',
        domain: [0, 1],
        // layer: "above traces",
        // overlaying: 'free',
        side: 'right',
    },
    yaxis2: {
        domain: [0, 0.5],
        anchor: 'x',
        title: { text: "Wire Speed" },
        range: [0, 200],
        // overlaying: 'y',
    },
    yaxis3: {
        domain: [0.5, 1],
        anchor: 'x',
        title: { text: "Diameter" },
        // overlaying: 'y',
    },
};

notes:

  • I cannot use the overlaying property, because you can only overlay onto a single axis
  • I am not sure that a grid would work to achieve this layout, because you cannot overlay a single y-axis over two rows? (please correct me if wrong)
5

Regarding the desired functionality:

Is a custom tooltip via the hover event a solution?
Is the data of all y axes available to the hover event callback?

6

That’s an old post so you probably don’t need help anymore, but for anyone finding this through google:
hovermode = "x" or hovermode = "x unified" should work here, if you’ll also set the new setting: hoversubplots = "axis"