diff --git a/src/components/markers.ts b/src/components/markers.ts index 9d9c290..2f50627 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -1,7 +1,7 @@ import { MarkerElem, MarkersConf, MarkerSerie } from '../models/marker'; import { LineTimeSerie, LineOptions } from '../types'; -import { PodState } from '@chartwerk/core'; +import { Margin, PodState } from '@chartwerk/core'; import d3 from 'd3'; @@ -12,7 +12,8 @@ export class Markers { constructor( private _chartContainer: d3.Selection, private _markerConf: MarkersConf, - private _state: PodState + private _state: PodState, + private _margin: Margin, ) { } clear() { @@ -106,11 +107,10 @@ export class Markers { this._chartContainer .append('div') - .attr('class', 'marker-content') - .attr('class', `marker-content-${marker.x}`) + .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 + 50}px`) + .style('left', `${linePosition + this._margin.left + 10}px`) .style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden') .style('position', 'absolute') .style('border', '1px solid black') diff --git a/src/index.ts b/src/index.ts index ce5fc5d..27e0c59 100644 --- a/src/index.ts +++ b/src/index.ts @@ -51,7 +51,7 @@ class LinePod extends ChartwerkPod { this._renderMetric(serie); } if(this._markersConf !== undefined) { - this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state); + this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin); this._markersLayer.render(this.metricContainer, this.height); }