diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index a900949c39..70db7e35d5 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/ui/src/shared/components/Dygraph.js
@@ -7,89 +7,7 @@ import _ from 'lodash'
 import Dygraphs from 'src/external/dygraph'
 import getRange from 'shared/parsing/getRangeForDygraph'
 
-const LINE_COLORS = [
-  '#00C9FF',
-  '#9394FF',
-  '#4ED8A0',
-  '#ff0054',
-  '#ffcc00',
-  '#33aa99',
-  '#9dfc5d',
-  '#92bcc3',
-  '#ca96fb',
-  '#ff00f0',
-  '#38b94a',
-  '#3844b9',
-  '#a0725b',
-]
-
-const darkenColor = colorStr => {
-  // Defined in dygraph-utils.js
-  const color = Dygraphs.toRGB_(colorStr)
-  color.r = Math.floor((255 + color.r) / 2)
-  color.g = Math.floor((255 + color.g) / 2)
-  color.b = Math.floor((255 + color.b) / 2)
-  return `rgb(${color.r},${color.g},${color.b})`
-}
-// Bar Graph code below is from http://dygraphs.com/tests/plotters.html
-const multiColumnBarPlotter = e => {
-  // We need to handle all the series simultaneously.
-  if (e.seriesIndex !== 0) {
-    return
-  }
-
-  const g = e.dygraph
-  const ctx = e.drawingContext
-  const sets = e.allSeriesPoints
-  const yBottom = e.dygraph.toDomYCoord(0)
-
-  // Find the minimum separation between x-values.
-  // This determines the bar width.
-  let minSep = Infinity
-  for (let j = 0; j < sets.length; j++) {
-    const points = sets[j]
-    for (let i = 1; i < points.length; i++) {
-      const sep = points[i].canvasx - points[i - 1].canvasx
-      if (sep < minSep) {
-        minSep = sep
-      }
-    }
-  }
-
-  const barWidth = Math.floor(2.0 / 3 * minSep)
-
-  const fillColors = []
-  const strokeColors = g.getColors()
-  for (let i = 0; i < strokeColors.length; i++) {
-    fillColors.push(darkenColor(strokeColors[i]))
-  }
-
-  for (let j = 0; j < sets.length; j++) {
-    ctx.fillStyle = fillColors[j]
-    ctx.strokeStyle = strokeColors[j]
-    for (let i = 0; i < sets[j].length; i++) {
-      const p = sets[j][i]
-      const centerX = p.canvasx
-      const xLeft = sets.length === 1
-        ? centerX - barWidth / 2
-        : centerX - barWidth / 2 * (1 - j / (sets.length - 1))
-
-      ctx.fillRect(
-        xLeft,
-        p.canvasy,
-        barWidth / sets.length,
-        yBottom - p.canvasy
-      )
-
-      ctx.strokeRect(
-        xLeft,
-        p.canvasy,
-        barWidth / sets.length,
-        yBottom - p.canvasy
-      )
-    }
-  }
-}
+import {LINE_COLORS, multiColumnBarPlotter} from 'src/shared/graphs/helpers'
 
 export default class Dygraph extends Component {
   constructor(props) {
diff --git a/ui/src/shared/graphs/helpers.js b/ui/src/shared/graphs/helpers.js
new file mode 100644
index 0000000000..5355c772a2
--- /dev/null
+++ b/ui/src/shared/graphs/helpers.js
@@ -0,0 +1,87 @@
+/* eslint-disable no-magic-numbers */
+import Dygraphs from 'src/external/dygraph'
+
+export const LINE_COLORS = [
+  '#00C9FF',
+  '#9394FF',
+  '#4ED8A0',
+  '#ff0054',
+  '#ffcc00',
+  '#33aa99',
+  '#9dfc5d',
+  '#92bcc3',
+  '#ca96fb',
+  '#ff00f0',
+  '#38b94a',
+  '#3844b9',
+  '#a0725b',
+]
+
+export const darkenColor = colorStr => {
+  // Defined in dygraph-utils.js
+  const color = Dygraphs.toRGB_(colorStr)
+  color.r = Math.floor((255 + color.r) / 2)
+  color.g = Math.floor((255 + color.g) / 2)
+  color.b = Math.floor((255 + color.b) / 2)
+  return `rgb(${color.r},${color.g},${color.b})`
+}
+
+// Bar Graph code below is from http://dygraphs.com/tests/plotters.html
+export const multiColumnBarPlotter = e => {
+  // We need to handle all the series simultaneously.
+  if (e.seriesIndex !== 0) {
+    return
+  }
+
+  const g = e.dygraph
+  const ctx = e.drawingContext
+  const sets = e.allSeriesPoints
+  const yBottom = e.dygraph.toDomYCoord(0)
+
+  // Find the minimum separation between x-values.
+  // This determines the bar width.
+  let minSep = Infinity
+  for (let j = 0; j < sets.length; j++) {
+    const points = sets[j]
+    for (let i = 1; i < points.length; i++) {
+      const sep = points[i].canvasx - points[i - 1].canvasx
+      if (sep < minSep) {
+        minSep = sep
+      }
+    }
+  }
+
+  const barWidth = Math.floor(2.0 / 3 * minSep)
+
+  const fillColors = []
+  const strokeColors = g.getColors()
+  for (let i = 0; i < strokeColors.length; i++) {
+    fillColors.push(darkenColor(strokeColors[i]))
+  }
+
+  for (let j = 0; j < sets.length; j++) {
+    ctx.fillStyle = fillColors[j]
+    ctx.strokeStyle = strokeColors[j]
+    for (let i = 0; i < sets[j].length; i++) {
+      const p = sets[j][i]
+      const centerX = p.canvasx
+      const xLeft = sets.length === 1
+        ? centerX - barWidth / 2
+        : centerX - barWidth / 2 * (1 - j / (sets.length - 1))
+
+      ctx.fillRect(
+        xLeft,
+        p.canvasy,
+        barWidth / sets.length,
+        yBottom - p.canvasy
+      )
+
+      ctx.strokeRect(
+        xLeft,
+        p.canvasy,
+        barWidth / sets.length,
+        yBottom - p.canvasy
+      )
+    }
+  }
+}