diff --git a/giraffe/package.json b/giraffe/package.json
index 750325f1..5031de79 100644
--- a/giraffe/package.json
+++ b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.18.8",
+  "version": "2.18.9",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",
diff --git a/giraffe/src/components/AnnotationLine.tsx b/giraffe/src/components/AnnotationLine.tsx
index 04007ca1..81b18fd9 100644
--- a/giraffe/src/components/AnnotationLine.tsx
+++ b/giraffe/src/components/AnnotationLine.tsx
@@ -91,6 +91,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
         {pin === 'circle' &&
           createElement('circle', {
             r: PIN_CIRCLE_RADIUS,
+            className: 'giraffe-annotation-click-target',
             fill: color,
             cx: length - PIN_CIRCLE_RADIUS,
             cy: clampedStart,
@@ -100,10 +101,10 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
             points: `${length - PIN_TRIANGLE_HEIGHT}, ${clampedStart} ${length -
               PIN_TRIANGLE_HEIGHT / 2}, ${clampedStart +
               PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
+            className: 'giraffe-annotation-click-target',
             fill: color,
-            style: {cursor: 'pointer'},
             id: props.id,
-            className: 'giraffe-annotation-click-target',
+            style: {cursor: 'pointer'},
           })}
         {pin === 'stop' &&
           createElement('polygon', {
@@ -133,6 +134,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
           ${clampedEnd + pixelMargin}, 0
           ${clampedEnd + pixelMargin}, ${RANGE_HEIGHT}
           ${clampedStart - pixelMargin}, ${RANGE_HEIGHT}`,
+      className: 'giraffe-annotation-click-target',
       fill: color,
       id: props.id,
       style: {cursor: 'pointer', opacity: '60%'},
@@ -167,6 +169,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
       case 'circle':
         return createElement('circle', {
           r: PIN_CIRCLE_RADIUS,
+          className: 'giraffe-annotation-click-target',
           fill: color,
           cx: clampedStart,
           cy: PIN_CIRCLE_RADIUS,
@@ -176,10 +179,10 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
           points: `${clampedStart - PIN_TRIANGLE_WIDTH}, 0
           ${clampedStart + PIN_TRIANGLE_WIDTH}, 0
           ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
+          className: 'giraffe-annotation-click-target',
           fill: color,
-          style: {cursor: 'pointer'},
           id: props.id,
-          className: 'giraffe-annotation-click-target',
+          style: {cursor: 'pointer'},
           onMouseEnter: () => {
             onHover(true)
           },
diff --git a/stories/package.json b/stories/package.json
index 8b343f8d..ff12fbfc 100644
--- a/stories/package.json
+++ b/stories/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.18.7",
+  "version": "2.18.9",
   "license": "MIT",
   "scripts": {
     "lint": "eslint '{src,../giraffe/src}/**/*.{ts,tsx}'",