init overlay in other order

src/index.ts

@@ -32,6 +32,7 @@ import * as d3 from 'd3';
 import first from 'lodash/first';
 import last from 'lodash/last';
 import debounce from 'lodash/debounce';
+import isNil from 'lodash/isNil';
 
 
 const DEFAULT_TICK_COUNT = 4;
@@ -334,6 +335,18 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
 
     setTimeout(() => {
       this.overlay = this.chartContainer.select('.overlay');
+      // init cumstom overlay to handle all events
+      if(isNil(this.overlay)) {
+        this.overlay = this.chartContainer.append('rect')
+          .attr('class', 'overlay')
+          .attr('width', this.width)
+          .attr('height', this.height)
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('pointer-events', 'all')
+          .attr('cursor', 'crosshair')
+          .attr('fill', 'none');
+      }
 
       this.overlay
         .on('mouseover', this.onMouseOver.bind(this))
@@ -415,18 +428,6 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     ) {
       return;
     }
-    if(this.options.mouseZoomEvent.isActive === false) {
-      // init cumstom overlay to handle all events
-      this.overlay = this.chartContainer.append('rect')
-        .attr('class', 'overlay')
-        .attr('width', this.width)
-        .attr('height', this.height)
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('pointer-events', 'all')
-        .attr('cursor', 'crosshair')
-        .attr('fill', 'none');
-    }
 
     this.initScaleX = this.state.xScale.copy();
     this.initScaleY = this.state.yScale.copy();