Tooltips for each point in the plot

[masalinas]

Add 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