crosshair behavior after zoom out

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Chartwerk line chart",
   "main": "dist/index.js",
   "scripts": {

src/index.ts

@@ -176,6 +176,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   updateCrosshair(): void {
+    this.crosshair.selectAll('circle').remove();
     // Core doesn't know anything about crosshair circles, It is only for line pod
     this.appendCrosshairCircles();
   }
@@ -188,9 +189,12 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   appendCrosshairCircle(serieIdx: number): void {
+    // TODO: cx, cy - hacks to hide circles after zoom out(can be replaced with display: none)
     this.crosshair.append('circle')
       .attr('class', `crosshair-circle-${serieIdx} crosshair-background`)
       .attr('r', CROSSHAIR_BACKGROUND_RAIDUS)
+      .attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS)
+      .attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS)
       .attr('clip-path', `url(#${this.rectClipId})`)
       .attr('fill', this.getSerieColor(serieIdx))
       .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
@@ -198,6 +202,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
     this.crosshair
       .append('circle')
+      .attr('cx', -CROSSHAIR_CIRCLE_RADIUS)
+      .attr('cy', -CROSSHAIR_CIRCLE_RADIUS)
       .attr('class', `crosshair-circle-${serieIdx}`)
       .attr('clip-path', `url(#${this.rectClipId})`)
       .attr('fill', this.getSerieColor(serieIdx))
@@ -469,7 +475,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     this.renderMetrics();
     this.renderXAxis();
     this.renderYAxis();
-    this.renderGrid()
+    this.renderGrid();
+    this.onMouseOver();
     
     if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) {
       let xAxisMiddleValue: number = this.xScale.invert(this.width / 2);