annotations: fix colors and spacing

src/index.ts

@@ -88,16 +88,22 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
         container.append('path')
           .attr('d', () => {
             const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
-            const y = Math.max(Math.ceil(_.toNumber(rectSelection.attr('y'))) - this.barWidth, 0);
+            const y = Math.ceil(_.toNumber(rectSelection.attr('y'))) - this.barWidth;
             return this.getTrianglePath(x, y, this.barWidth);
           })
-          .attr('fill', annotation.color);
+          .attr('fill', annotation.color)
+          .attr('stroke', '#565862')
+          .attr('stroke-width', '1px');
       });
   }
 
   getTrianglePath(x: number, y: number, length: number): string {
     // (x, y) - top left corner
-    return `M ${x - 2} ${y - 2} L ${x + length + 2} ${y - 2} L ${x + length / 2 } ${y + length - 2} z`;
+    const Y_OFFSET = 2;
+    const correctedY = Math.max(y, Y_OFFSET);
+    return `M ${x - Y_OFFSET} ${correctedY - Y_OFFSET}
+      L ${x + length + Y_OFFSET} ${correctedY - Y_OFFSET}
+      L ${x + length / 2} ${correctedY + length - Y_OFFSET} z`;
   }
 
   getBarOpacity(rowValues: RowValues): number {