diff --git a/examples/markers_select.html b/examples/markers_select.html
index fd18e81..48a1623 100644
--- a/examples/markers_select.html
+++ b/examples/markers_select.html
@@ -34,7 +34,11 @@
{
series: [
{ data: markersData, color: 'red' },
- ]
+ ],
+ events: {
+ onMouseMove: (el) => { console.log(el); },
+ onMouseOut: () => { console.log('mouse out'); }
+ }
}
);
pod.render();
diff --git a/src/components/markers.ts b/src/components/markers.ts
index 285e9d6..a481059 100644
--- a/src/components/markers.ts
+++ b/src/components/markers.ts
@@ -37,15 +37,22 @@ export class Markers {
// @ts-ignore // TODO: remove ignore but boxParams are protected
.attr('y2', this._state.boxParams.height)
.attr('pointer-events', 'none');
- this._d3Holder.append('circle')
+ let circle = this._d3Holder.append('circle')
.attr('class', 'gap-circle')
.attr('stroke', serie.color)
.attr('stroke-width', '2px')
.attr('r', 4)
.attr('cx', linePosition)
.attr('cy', 5)
- .attr('pointer-events', 'none') // TODO: make all on implementation of Events
- .style('cursor', 'pointer')
+
+ if(this._markerConf !== undefined) {
+ circle
+ .attr('pointer-events', 'all')
+ .style('cursor', 'pointer')
+ .on('mousemove', () => this._markerConf.events.onMouseMove(d))
+ .on('mouseout', () => this._markerConf.events.onMouseOut())
+ }
+
});
}
diff --git a/src/models/marker.ts b/src/models/marker.ts
index a9925ea..bbfd617 100644
--- a/src/models/marker.ts
+++ b/src/models/marker.ts
@@ -8,5 +8,8 @@ export type MarkerSerie = {
export type MarkersConf = {
series: MarkerSerie[],
- onSelect?: (el: MarkerElem[]) => void;
-}
\ No newline at end of file
+ events?: {
+ onMouseMove?: (el: MarkerElem[]) => void;
+ onMouseOut?: () => void;
+ }
+}