how to make an y-value annotation along the y-axis while the cursor is moving?

[ileadu]

for example

The below example is a little similar. i don't know how to make the tooltip along the y-axis. https://leeoniya.github.io/uPlot/demos/tooltips.html

[ruisheng95]

Hey there, I had the same question as you but I couldn't find any existing solution for this. So I tried to implement it using the hooks API based on demo/tooltips.html with some minor tweaks.

const data = [
  [0.8, 2, 3, 4, 5],
  [-30, 10, 12, 40, 100],
  [5, 10, 20, 30, 40]
];

let focusedMin;
let focusedMax;

const opts = {
  width: 800,
  height: 500,
  focus: {
    alpha: 0.5,
  },
  cursor: {
    focus: {
      prox: 30,
    },
  },
  scales: {
    x: {
      time: false,
    },
  },
  series: [{},
    {
      stroke: '#059',
    },
    {
      stroke: 'red',
    },
  ],
  hooks: {
    init: [(u) => {
      let over = u.over;

      let ttc = (u.cursortt = document.createElement("div"));
      ttc.className = "tooltip";
      ttc.textContent = "(x,y)";
      ttc.style.pointerEvents = "none";
      ttc.style.position = "absolute";
      ttc.style.color = "#000";
      ttc.style.background = "#ff0";
      ttc.style.fontSize = "14px";
      ttc.style.padding = "0px 1px";
      over.appendChild(ttc);

      const hideTips = () => {
        ttc.style.display = "none";
      };

      const showTips = () => {
        ttc.style.display = "";
      };

      over.addEventListener("mouseleave", () => {
        if (!u.cursor.lock) {
          hideTips();
        }
      });

      over.addEventListener("mouseenter", () => {
        showTips();
      });

      hideTips();
    }],
    setCursor: [(u) => {
      const {
        left,
        top
      } = u.cursor;
      if (u.cursortt && left && top) {
        // Left side
        u.cursortt.style.left = "-50px";

        // Right side
        /* u.cursortt.style.left =
                  (parseInt(u.over.style.width, 10) + 10).toString() + "px"; */
        u.cursortt.style.top =
          Math.round(
            top - u.cursortt.getBoundingClientRect().height / 2
          ) + "px";
        u.cursortt.textContent = u.posToVal(top, "y").toFixed(2);
      }
    }]
  }
};


let plot = new uPlot(opts, data, document.body);

Here is jsfiddle link: https://jsfiddle.net/ruisheng95/uns9gpk6/9/