How to create a horizontal or vertical hover line?

[muuvmuuv]

I want to update the annotations plugin to have a vertical line following the users cursor but in v4 I cannot access the plugin within onHover context.

[stockiNail]

@muuvmuuv you need to create a plugin and use beforeDraw hook of plugin annotation.

let cursor;
const annotation = {
  type: 'line',
  scaleID: 'y',
  value: 0,
  borderWidth: 0,
  beforeDraw({chart, element}) {
    if (cursor) {
      element.options.borderWidth = 3;
      element.y = cursor.y;
      element.y2 = cursor.y + element.height;
      return;
    }
    element.options.borderWidth = 0;
  }
};

const myplugin = {
  id: 'cursor',
  afterEvent(chart, args) {
    const {event, inChartArea} = args;
    if (!inChartArea) {
      cursor = undefined;
    } else {
      cursor = event;
    }
    args.changed = true;
    return
  }
};

Here is codepen: https://codepen.io/stockinail/pen/XWxRPGy

[muuvmuuv]

Nice, thank you!

[muuvmuuv]

Here, an example to stick it to the nearest X pointer:

{
            type: "line",
            scaleID: "x",
            value: 0,
            borderWidth: 0,
            borderColor: "#7c7c85",
            beforeDraw({ chart, element }) {
              if (cursor?.native) {
                const nearestItems = chart.getElementsAtEventForMode(
                  cursor.native,
                  "nearest",
                  {
                    intersect: false,
                    axis: "x",
                  },
                  false,
                )
                const nearest = nearestItems[0]
                if (nearest) {
                  element.options.borderWidth = 1
                  element.y = 0
                  element.x = nearest.element.x
                  element.x2 = element.x

                  return
                }
              }
              element.options.borderWidth = 0
            },
          }