onclick

examples/mouse_click.html

@@ -16,7 +16,11 @@
       let options = {
         renderLegend: false, usePanning: false,
         axis: { y: { range: [0, 50] } },
-        eventsCallbacks: { mouseMove: console.log }
+        zoomEvents: { mouse: { 
+          zoom: { isActive: false },
+          pan: { isActive: false },
+        } },
+        eventsCallbacks: { mouseClick: console.log }
       }
       var pod = new LinePod(
         document.getElementById('chart'),

src/index.ts

@@ -291,10 +291,12 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   getMouseObj(): MouseObj {
+
     const eventX = d3.mouse(this.chartContainer.node())[0];
     const eventY = d3.mouse(this.chartContainer.node())[1];
     const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
     const yValue = this.state.yScale.invert(eventY);
+    this.moveCrosshairLine(eventX, eventY);
 
     const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
 
@@ -309,20 +311,21 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       chartX: eventX,
       chartWidth: this.width
     };
+
   }
 
   override onMouseMove(): void {
     const obj = this.getMouseObj();
-    this.moveCrosshairLine(obj.x, obj.y);
+    const eventX = d3.mouse(this.chartContainer.node())[0];
+    const eventY = d3.mouse(this.chartContainer.node())[1];
+    this.moveCrosshairLine(eventX, eventY);
     // TODO: is shift key pressed
     // TODO: need to refactor this object
     this.options.callbackMouseMove(obj);
   }
 
-  // TODO: add override
-  onMouseClick(): void {
-    const obj = this.getMouseObj();
-    console.log(obj);
+  override onMouseClick(): void {
+    this.options.callbackMouseClick(this.getMouseObj());
   }
 
   findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {