Tooltips for each point in the plot

[masalinas]

Tooltips for each point in the plot

[masalinas]

Right now I tryed to resolve using this piece of code:

scatterplot.subscribe("pointOver", (point) => {
     // set the index hovered point
     this.pointHover = this.dataset[point];

     // get position of the hovered point
     this.pointPosition = scatterplot.getScreenPosition(point)

     // show the tooltip
     this.tooltip.nativeElement.style.visibility = 'visible';
     this.tooltip.nativeElement.style.position = 'absolute';
     this.tooltip.nativeElement.style.left = this.pointPosition[0] + 170 + "px";
     this.tooltip.nativeElement.style.top = this.pointPosition[1] + 10 + "px";
   }); 

   scatterplot.subscribe("pointOut", (point) => {
     // hide the tooltip
     this.tooltip.nativeElement.style.visibility = 'hidden';
   }); 

I have a problem positioning the tooltip as you see, setting this value for a particular resolution, so I have this problem. Exist other way to set the location of the tooltip relative to the canvas?

[flekschas]

Not sure what you mean with "tooltip for each point" but you can easily implement tooltips with your favorite UI library using scatterplot.subscribe('pointover', pointoverHandler);, scatterplot.subscribe('pointout', pointoutHandler);, and const [x, y] = scatterplot.getScreenPosition(pointIdx);

[flekschas]

The screen position is relative to canvas element. So depending on your setup you might need to do something like const { top, left } = scatterplot.get('canvas').getBoundingClientRect() and subtract the scroll offset from top and left.

[masalinas]

Ok fine, with your the piece of code: const { top, left } = scatterplot.get('canvas').getBoundingClientRect() I can recover this offset and apply it to my tooltip location for any resolution, thanks