Browse Source

markers: render tooltip in center

pull/69/head
rozetko 4 months ago
parent
commit
ebb49adf82
  1. 7
      src/components/markers.ts

7
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) {

Loading…
Cancel
Save