diff --git a/ui/spec/shared/annotations/helpersSpec.js b/ui/spec/shared/annotations/helpersSpec.js
index e925bc5a55..d92926be63 100644
--- a/ui/spec/shared/annotations/helpersSpec.js
+++ b/ui/spec/shared/annotations/helpersSpec.js
@@ -1,12 +1,15 @@
 import {getAnnotations} from 'shared/annotations/helpers'
 import Dygraph from 'src/external/dygraph'
+
+const start = 1515628800000
+const end = 1516060800000
 const timeSeries = [
-  [1515628800000, 25],
+  [start, 25],
   [1515715200000, 13],
   [1515801600000, 10],
   [1515888000000, 5],
   [1515974400000, null],
-  [1516060800000, 14],
+  [end, 14],
 ]
 
 const labels = ['time', 'test.label']
@@ -14,17 +17,19 @@ const labels = ['time', 'test.label']
 const div = document.createElement('div')
 const graph = new Dygraph(div, timeSeries, {labels})
 
+const oneHourMs = '3600000'
+
 const a1 = {
   group: '',
-  name: 'anno1',
-  time: '1515716169000',
-  duration: '', // 1 hour
+  name: 'a1',
+  time: '1515716160000',
+  duration: '',
   text: 'you have no swoggels',
 }
 
 const a2 = {
   group: '',
-  name: 'anno1',
+  name: 'a2',
   time: '1515716169000',
   duration: '3600000', // 1 hour
   text: 'you have no swoggels',
@@ -32,7 +37,7 @@ const a2 = {
 
 const annotations = [a1]
 
-describe.only('Shared.Annotations.Helpers', () => {
+describe('Shared.Annotations.Helpers', () => {
   describe('getAnnotations', () => {
     it('returns an empty array with no graph or annotations are provided', () => {
       const actual = getAnnotations(undefined, annotations)
@@ -47,5 +52,52 @@ describe.only('Shared.Annotations.Helpers', () => {
 
       expect(actual).to.deep.equal(expected)
     })
+
+    it('removes an annotation if it is out of the time range', () => {
+      const outOfBounds = {
+        group: '',
+        name: 'not in time range',
+        time: '2515716169000',
+        duration: '',
+      }
+
+      const newAnnos = [...annotations, outOfBounds]
+      const actual = getAnnotations(graph, newAnnos)
+      const expected = annotations
+
+      expect(actual).to.deep.equal(expected)
+    })
+
+    describe('with a duration', () => {
+      it('it adds an annotation', () => {
+        const withDurations = [...annotations, a2]
+        const actual = getAnnotations(graph, withDurations)
+        const expectedAnnotation = {
+          ...a2,
+          time: `${Number(a2.time) + Number(a2.duration)}`,
+          duration: '',
+        }
+
+        const expected = [...withDurations, expectedAnnotation]
+        expect(actual).to.deep.equal(expected)
+      })
+
+      it('does not add a duration annotation if it is out of bounds', () => {
+        const annotationWithOutOfBoundsDuration = {
+          ...a2,
+          duration: a2.time,
+        }
+
+        const withDurations = [
+          ...annotations,
+          annotationWithOutOfBoundsDuration,
+        ]
+
+        const actual = getAnnotations(graph, withDurations)
+        const expected = withDurations
+
+        expect(actual).to.deep.equal(expected)
+      })
+    })
   })
 })
diff --git a/ui/src/shared/annotations/helpers.js b/ui/src/shared/annotations/helpers.js
index 0cf2b10470..9b36d0b080 100644
--- a/ui/src/shared/annotations/helpers.js
+++ b/ui/src/shared/annotations/helpers.js
@@ -6,18 +6,30 @@ export const getAnnotations = (graph, annotations = []) => {
   const [xStart, xEnd] = graph.xAxisRange()
   return annotations.reduce((acc, a) => {
     // Don't render if annotation.time is outside the graph
-    if (+a.time < xStart || +a.time > xEnd) {
+    const time = +a.time
+    const duration = +a.duration
+
+    if (time < xStart) {
+      const endPoint = time + duration
+      if (endPoint > xStart) {
+        return [...acc, a, {...a, time: `${endPoint}`, duration: ''}]
+      }
+
+      return acc
+    }
+
+    if (time > xEnd) {
       return acc
     }
 
     // If annotation does not have duration, include in array
-    if (!a.duration) {
+    if (!duration) {
       return [...acc, a]
     }
 
     const annotationEndpoint = {
       ...a,
-      time: String(Number(a.time) + Number(a.duration)),
+      time: `${time + duration}`,
       duration: '',
     }