diff --git a/ui/src/shared/annotations/styles.js b/ui/src/shared/annotations/styles.js
index 3b504852c8..198ddbc878 100644
--- a/ui/src/shared/annotations/styles.js
+++ b/ui/src/shared/annotations/styles.js
@@ -154,22 +154,10 @@ export const tooltipFormStyle = {
 export const tooltipInputButton = {marginLeft: '2px'}
 export const tooltipInput = {flex: '1 0 0'}
 
-export const annotationStyle = (
-  {startTime},
-  dygraph,
-  isMouseOver,
-  isDragging
-) => {
+export const annotationStyle = (time, dygraph, isMouseOver, isDragging) => {
   // TODO: export and test this function
-  const [startX, endX] = dygraph.xAxisRange()
-  let visibility = 'visible'
-
-  if (startTime < startX || startTime > endX) {
-    visibility = 'hidden'
-  }
-
   const containerLeftPadding = 16
-  const left = `${dygraph.toDomXCoord(startTime) + containerLeftPadding}px`
+  const left = `${dygraph.toDomXCoord(time) + containerLeftPadding}px`
   const width = 2
 
   return {
@@ -183,7 +171,7 @@ export const annotationStyle = (
     width: `${width}px`,
     transition: 'background-color 0.25s ease',
     transform: `translateX(-${width / 2}px)`, // translate should always be half with width to horizontally center the annotation pole
-    visibility,
+    visibility: 'visible',
     zIndex:
       isDragging || isMouseOver ? zIndexAnnotationActive : zIndexAnnotation,
   }
diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
index 62b5dca12e..4263e85c83 100644
--- a/ui/src/shared/components/Annotation.js
+++ b/ui/src/shared/components/Annotation.js
@@ -85,45 +85,180 @@ class Annotation extends Component {
     e.stopPropagation()
   }
 
+  renderPoint(
+    annotation,
+    dygraph,
+    isMouseOver,
+    isDragging,
+    humanTime,
+    isEditing
+  ) {
+    return (
+      <div
+        className="dygraph-annotation"
+        style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
+        data-time-ms={annotation.startTime}
+        data-time-local={humanTime}
+      >
+        <div
+          style={clickAreaStyle(isDragging, isEditing)}
+          onMouseMove={this.handleDrag}
+          onMouseDown={this.handleStartDrag}
+          onMouseUp={this.handleStopDrag}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        />
+        <div style={flagStyle(isMouseOver, isDragging, false, false)} />
+        <AnnotationTooltip
+          isEditing={isEditing}
+          annotation={annotation}
+          onMouseLeave={this.handleMouseLeave}
+          annotationState={this.state}
+        />
+      </div>
+    )
+  }
+
+  renderLeftMarker(
+    annotation,
+    dygraph,
+    isMouseOver,
+    isDragging,
+    humanTime,
+    isEditing
+  ) {
+    return (
+      <div
+        className="dygraph-annotation"
+        style={annotationStyle(
+          annotation.startTime,
+          dygraph,
+          isMouseOver,
+          isDragging
+        )}
+        data-time-ms={annotation.startTime}
+        data-time-local={humanTime}
+      >
+        <div
+          style={clickAreaStyle(isDragging, isEditing)}
+          onMouseMove={this.handleDrag}
+          onMouseDown={this.handleStartDrag}
+          onMouseUp={this.handleStopDrag}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        />
+        <div style={flagStyle(isMouseOver, isDragging, true, false)} />
+        <AnnotationTooltip
+          isEditing={isEditing}
+          annotation={annotation}
+          onMouseLeave={this.handleMouseLeave}
+          annotationState={this.state}
+        />
+      </div>
+    )
+  }
+
+  renderRightMarker(
+    annotation,
+    dygraph,
+    isMouseOver,
+    isDragging,
+    humanTime,
+    isEditing
+  ) {
+    return (
+      <div
+        className="dygraph-annotation"
+        style={annotationStyle(
+          annotation.endTime,
+          dygraph,
+          isMouseOver,
+          isDragging
+        )}
+        data-time-ms={annotation.endTime}
+        data-time-local={humanTime}
+      >
+        <div
+          style={clickAreaStyle(isDragging, isEditing)}
+          onMouseMove={this.handleDrag}
+          onMouseDown={this.handleStartDrag}
+          onMouseUp={this.handleStopDrag}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        />
+        <div style={flagStyle(isMouseOver, isDragging, true, true)} />
+        <AnnotationTooltip
+          isEditing={isEditing}
+          annotation={annotation}
+          onMouseLeave={this.handleMouseLeave}
+          annotationState={this.state}
+        />
+      </div>
+    )
+  }
+
+  renderSpan(
+    annotation,
+    dygraph,
+    isMouseOver,
+    isDragging,
+    humanTime,
+    isEditing
+  ) {
+    return (
+      <div>
+        {this.renderLeftMarker(
+          annotation,
+          dygraph,
+          isMouseOver,
+          isDragging,
+          humanTime,
+          isEditing
+        )}
+        {this.renderRightMarker(
+          annotation,
+          dygraph,
+          isMouseOver,
+          isDragging,
+          humanTime,
+          isEditing
+        )}
+        <AnnotationWindow
+          key={annotation.id}
+          annotation={annotation}
+          dygraph={dygraph}
+        />
+      </div>
+    )
+  }
+
   render() {
     const {dygraph, annotation, mode} = this.props
     const {isDragging, isMouseOver} = this.state
 
     const humanTime = `${new Date(+annotation.startTime)}`
-    const hasDuration = annotation.starTime !== annotation.endTime
 
     const isEditing = mode === EDITING
 
     return (
       <div>
-        <div
-          className="dygraph-annotation"
-          style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
-          data-time-ms={annotation.startTime}
-          data-time-local={humanTime}
-        >
-          <div
-            style={clickAreaStyle(isDragging, isEditing)}
-            onMouseMove={this.handleDrag}
-            onMouseDown={this.handleStartDrag}
-            onMouseUp={this.handleStopDrag}
-            onMouseEnter={this.handleMouseEnter}
-            onMouseLeave={this.handleMouseLeave}
-          />
-          <div style={flagStyle(isMouseOver, isDragging, hasDuration, false)} />
-          <AnnotationTooltip
-            isEditing={isEditing}
-            annotation={annotation}
-            onMouseLeave={this.handleMouseLeave}
-            annotationState={this.state}
-          />
-        </div>
-        {annotation.startTime !== annotation.endTime &&
-          <AnnotationWindow
-            key={annotation.id}
-            annotation={annotation}
-            dygraph={dygraph}
-          />}
+        {annotation.startTime === annotation.endTime
+          ? this.renderPoint(
+              annotation,
+              dygraph,
+              isMouseOver,
+              isDragging,
+              humanTime,
+              isEditing
+            )
+          : this.renderSpan(
+              annotation,
+              dygraph,
+              isMouseOver,
+              isDragging,
+              humanTime,
+              isEditing
+            )}
       </div>
     )
   }