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.