leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.83k stars 385 forks source link

the tooltip stick to points #930

Open Sam-tech94 opened 9 months ago

Sam-tech94 commented 9 months ago
Screenshot 2024-02-29 at 11 34 11

How to make the tooltip stick to points

<!doctype html>

Measure / Datums
poetrasapoetra commented 5 months ago

Hi Sam, I was implementing same feature to lock tooltip when user click inside uPlot and i want to share my solution.

funtion initTooltip(){
  // first we make variable to track if tooltip should be locked
  let locked = false;
  // initalize tooltip plugin
  const tooltip = {
    init: (u)=>{
      // initialize overlay like yours
      // add click listener on u.over
      u.over.addEventListener("click", ()=>{
        // toogle locked variable
        locked = !locked;
        // here to lock uPlot, user cannot interact to uPlot instance until lock is released (next click).
        // this is from option uPlot.Cursor after initialization
        u.cursor._lock = locked;
      })
    },
    setCursor: (u)=>{
      if(locked) return;
      // the rest of your update function
    }
  }
  return tooltip;
}

capture