Show the x value by placing my cursor over any point on the graph

đź“Š Plotly Python
1

I am using Plotly to plot my graphs, but I am not able to filter the graph data by putting my cursor anywhere on the graph.

I can only filter if I click on the markers on the graph, like the following example, where I put my cursor over the circled marker.

1
1885Ă—533 29.3 KB

Lets say I put my cursor over this point:

2
2897Ă—529 28.3 KB

I want it to look like this. I mean, I want to display the x value in this point and get its value if I click there:

3
3897Ă—529 28.5 KB

I tried to set the type property of the x axis to “category”, but the graph gets all messed up, and that is not the idea.

category
category885Ă—529 36.1 KB

Here I have the my code:

<Plot
          data={[
            {
              x: temperature.x,
              y: temperature.y,
              type: "scatter",
              mode: "lines+markers",
              marker: { color: "red" },
              name: "Temperature",
            },
            {
              x: force.x,
              y: force.y,
              yaxis: "y2",
              type: "scatter",
              mode: "lines+markers",
              marker: { color: "green" },
              name: "Force",
            },
            {
              x: position.x,
              y: position.y,
              yaxis: "y3",
              type: "scatter",
              mode: "lines+markers",
              marker: { color: "darkblue" },
              name: "Position",
            },
          ]}
          layout={{
            width: 800,
            height: 550,
            hovermode: "x",
            showlegend: true,                      
            legend: {
              x: 0.88,
              xanchor: "right",
              y: 0.99,
              orientation: "h",
            },
            xaxis: {
              title: {
                text: "Time [sec]",
                font: {
                  family: "Sans-serif, monospace",
                  size: 15,
                },
              },
              type: "category",
              overlaying: "x",
              domain: [0.02, 0.88],
            },
            yaxis: {
              title: {
                text: "Temperature [ÂşC]",
                font: {
                  family: "Sans-serif, monospace",
                  size: 15,
                  color: "red",
                },
              },
              linecolor: "red",
              showline: true,
              range: [0, maxT],
              tickfont: { color: "red" },
              position: 0.02,
            },
            yaxis2: {
              title: {
                text: "Press Force [kN]",
                font: {
                  family: "Sans-serif, monospace",
                  size: 15,
                  color: "green",
                },
              },
              showline: true,
              linecolor: "green",
              range: [0, maxF],
              tickfont: { color: "green" },
              anchor: "free",
              overlaying: "y",
              side: "right",
              position: 0.88,
            },
            yaxis3: {
              title: {
                text: "Z Position [mm]",
                font: {
                  family: "Sans-serif, monospace",
                  size: 15,
                  color: "darkblue",
                },
              },
              showline: true,
              linecolor: "darkblue",
              range: [0, maxP],
              tickfont: { color: "darkblue" },
              anchor: "free",
              overlaying: "y",
              side: "right",
              position: 1,
            },
          }}
          onClick={(data) => {
            if (data.points[0].x >= temperature.x[1]) {
              setTimePass(Math.round(data.points[0].x) - temperature.x[1]);
              fetchNodeData(Math.round(data.points[0].x) - temperature.x[1]);
            }
          }}
          onHover={(data) => {}}
   />

If there is a lot of information in this code, I have a simpler example that has the same issue here:

https://codepen.io/r-polas-lisboa/pen/poEoBpx

2

Hi @polalas,

plotly.js only shows hover labels in the vicinity of the data you provide. That is, it doesn’t interpolate between data points to make the hover labels match across all traces.

Alex -