Ability to determine precise y-axis mouse position on the stacked bar chart and represent it in the crosshair label

[paulb-elastic]

We are using the Elastic Stacked Bar Chart in Uptime to generate a waterfall chart for Synthetic monitors. We are doing this by rotating the standard chart by 90 degrees, so it becomes a horizontal bar chart.

We have a requirement to provide time based information to the user as they move their mouse across the chart. This is based on their mouse position horizontally, which relates to the y-axis on the chart because we have rotated in by 90 degrees.

It is not currently possible to get the precise y-axis position that the user’s mouse is on, which is what we are requesting in this issue.

In addition, we want to label the position of the precise position of the mouse in the crosshair label (https://elastic.github.io/elastic-charts/?path=/story/interactions--crosshair-with-time-axis).

Further details

onPointerUpdate provides this:{chartId: "51881c65-149a-487c-872a-72de61222410", type: "Over", unit: undefined, scale: "linear", value: CLOSEST_X_VALUE} so the closest we can get is the closest x value

onElementOver provides:

[
  [
    {
      "x": 0,
      "y": 165.225,
      "mark": null,
      "accessor": "y1",
      "datum": {
        "x": 0,
        "y0": 31.366999999999994,
        "y": 165.225,
        "config": {
          "colour": "#edc5a2",
          "tooltipValue": "ssl: 133.858ms"
        }
      }
    },
    {
      "key": "spec{waterfallItems}yAccessor{y}splitAccessors{}",
      "specId": "waterfallItems",
      "yAccessor": "y",
      "splitAccessors": {},
      "seriesKeys": [
        "y"
      ]
    }
  ]
]

Which gets us the x,y0 and y of the closest bar, but not the cursor position.

The props passed to the customTooltip component also provide information pertaining to the relevant bar, but not the current cursor position.

[markov00]

Hi @paulb-elastic we released this new listener at the moment onProjectionClick that is doing something similar to what you are looking for but on the click event (#913).
If the information provided by that listener during the click events are good for you, we can implement a similar thing on mouse move if you need continuous information when moving the mouse

[paulb-elastic]

Thanks for the update @markov00, that sounds very promising.

@Kerry350 does this sound like what you'd need (the mouse move version of it)?

[Kerry350]

@paulb-elastic @markov00 Just tested this out. If it was exposed via a mouseMove this would do exactly what we need 👌

[shahzad31]

Hi team, any update on this?

[nickofthyme]

🎉 This issue has been resolved in version 31.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀