fix triangles sizes

demo.html

@@ -26,7 +26,8 @@
           },
           stacked: true,
           matching: true,
-          maxBarWidth: 20,
+          // maxBarWidth: 2,
+          minBarWidth: 40,
           zoomEvents: {
             scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
           },

dist/index.d.ts

@@ -7,6 +7,7 @@ export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptio
     protected renderMetrics(): void;
     setBarPodScales(): void;
     renderSerie(data: any): void;
+    getTrianglePath1(x: number, y: number, length: number): string;
     getTrianglePath(x: number, y: number, length: number): string;
     getBarOpacity(rowValues: RowValues): number;
     mergeMacthedSeriesAndSort(matchedSeries: any[]): any;

src/index.ts

@@ -88,15 +88,40 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
         container.append('path')
           .attr('d', () => {
             const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
-            const y = Math.ceil(_.toNumber(rectSelection.attr('y'))) - this.barWidth;
-            return this.getTrianglePath(x, y, this.barWidth);
+            const y = Math.ceil(_.toNumber(rectSelection.attr('y')));
+            return this.getTrianglePath1(x, y, this.barWidth);
           })
-          .attr('fill', annotation.color)
-          .attr('stroke', '#565862')
-          .attr('stroke-width', '1px');
+          .attr('fill', annotation.color);
       });
   }
 
+  getTrianglePath1(x: number, y: number, length: number): string {
+    // (x, y) - top left corner of bar
+    const minTriangleSize = 6;
+    const maxTriagleSize = 10;
+    const yOffset = 4; // offset between triangle and bar
+    const centerX = x + length / 2;
+    const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
+  
+    const topY = Math.max(y - correctedLength - yOffset, 4); 
+    const topLeftCorner = {
+      x: centerX - correctedLength / 2,
+      y: topY,
+    };
+    const topRightCorner = {
+      x: centerX + correctedLength / 2,
+      y: topY,
+    };
+    const bottomMiddleCorner = {
+      x: centerX,
+      y: topY + correctedLength,
+    };
+
+    return `M ${topLeftCorner.x} ${topLeftCorner.y}
+      L ${topRightCorner.x} ${topRightCorner.y}
+      L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
+  }
+
   getTrianglePath(x: number, y: number, length: number): string {
     // (x, y) - top left corner
     const Y_OFFSET = 2;