From ebb49adf8248f56d190821daba6589498cd4f65c Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Mon, 22 Jul 2024 19:05:40 +0300
Subject: [PATCH] markers: render tooltip in center

---
 src/components/markers.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/markers.ts b/src/components/markers.ts
index 2f50627..0a79ace 100644
--- a/src/components/markers.ts
+++ b/src/components/markers.ts
@@ -105,12 +105,11 @@ export class Markers {
 
     const linePosition = this._getLinePosition(marker);
 
-    this._chartContainer
+    const div = this._chartContainer
       .append('div')
       .attr('class', `marker-content marker-content-${marker.x}`)
       // @ts-ignore // TODO: remove ignore but boxParams are protected
       .style('top', `${this._state.boxParams.height - this._chartHeight}px`)
-      .style('left', `${linePosition + this._margin.left + 10}px`)
       .style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden')
       .style('position', 'absolute')
       .style('border', '1px solid black')
@@ -125,6 +124,10 @@ export class Markers {
       .style('pointer-events', 'none')
       .style('z-index', 1)
       .html(marker.html);
+
+    // align tooltip: center (we need it to be rendered first)
+    // PS: 8px is the empiric constant to center the div ideally
+    div.style('left', `${linePosition + this._margin.left - div.node().getBoundingClientRect().width / 2 + 8}px`)
   }
 
   protected renderSerie(serie: MarkerSerie) {