bar events fixes

src/index.ts

@@ -65,7 +65,6 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
         .data(d.values)
         .enter().append('rect')
         .style('fill', (val, i) => d.colors[i])
-        .style('pointer-events', this.options.contextMenu ? 'all' : 'none')
         .attr('opacity', () => this.getBarOpacity(d))
         .attr('x', (val: number, idx: number) => {
           return this.getBarPositionX(d.key, idx);
@@ -75,7 +74,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
         })
         .attr('width', this.barWidth)
         .attr('height', (val: number) => this.getBarHeight(val))
-        .on('contextmenu', this.contextMenu.bind(this));
+        .on('contextmenu', this.contextMenu.bind(this))
+        .on('mouseover', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+        .on('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+        .on('mousedown', () => { d3.event.stopPropagation(); });
 
         // render bar annotations, its all hardcoded
         if(_.isEmpty(this.options.barOptions.annotations)) {
@@ -101,7 +103,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
             const options = { max: this.options.barOptions.maxAnnotationSize, min: this.options.barOptions.minAnnotationSize };
             return this.getTrianglePath(x, y, this.barWidth, options);
           })
-          .attr('fill', annotation.color);
+          .attr('fill', annotation.color)
+          .on('mouseover', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousedown', () => { d3.event.stopPropagation(); });
       });
   }