diff --git a/ui/src/shared/components/ViewTypeSelector.scss b/ui/src/shared/components/ViewTypeSelector.scss
deleted file mode 100644
index eb80b48f7e..0000000000
--- a/ui/src/shared/components/ViewTypeSelector.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
-  Graph Type Selector Styles
-  ------------------------------------------------------------------------------
-*/
-
-$graph-type--card: 190px;
-$graph-type--margin: 4px;
-$graph-type--graphic: 150px;
-
-.graph-type-selector {
-  background-color: $g3-castle;
-}
-
-.graph-type-selector--container {
-  min-width: 200px;
-  padding: 30px;
-}
-
-.graph-type-selector--grid {
-  width: 100%;
-  display: inline-block;
-  margin: 0 (-10px / 2);
-  margin-bottom: -10px;
-}
-
-.graph-type-selector--option {
-  float: left;
-  width: $graph-type--card;
-  padding-bottom: $graph-type--card;
-  position: relative;
-
-  > div > p {
-    margin: 0;
-    font-size: 14px;
-    font-weight: 900;
-    position: absolute;
-    bottom: 7%;
-    left: 10px;
-    width: calc(100% - 20px);
-    text-align: center;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  // Actual "card"
-  > div {
-    background-color: $g2-kevlar;
-    color: $g11-sidewalk;
-    border-radius: $ix-radius;
-    width: $graph-type--card - ($graph-type--margin / 2);
-    height: $graph-type--card - ($graph-type--margin / 2);
-    position: absolute;
-    top: 10px / 2;
-    left: 10px / 2;
-    transition: color 0.25s ease, border-color 0.25s ease,
-      background-color 0.25s ease;
-
-    &:hover {
-      cursor: pointer;
-      background-color: $g4-onyx;
-      color: $g15-platinum;
-    }
-  }
-}
-
-// Active state "card"
-.graph-type-selector--option.active > div,
-.graph-type-selector--option.active > div:hover {
-  background-color: $g5-pepper;
-  color: $g18-cloud;
-}
-
-.graph-type-selector--graphic {
-  width: $graph-type--graphic;
-  height: $graph-type--graphic;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  > svg,
-  > svg * {
-    transform: translate3d(0, 0, 0);
-  }
-  > svg {
-    width: 100%;
-    height: 100%;
-  }
-}
-.graph-type-selector--graphic-line {
-  stroke-width: 1px;
-  fill: none;
-  stroke-linecap: round;
-  stroke-miterlimit: 10;
-
-  &.graphic-line-a {
-    stroke: $g11-sidewalk;
-  }
-  &.graphic-line-b {
-    stroke: $g9-mountain;
-  }
-  &.graphic-line-c {
-    stroke: $g7-graphite;
-  }
-  &.graphic-line-d {
-    stroke: $g13-mist;
-  }
-}
-.graph-type-selector--graphic-fill {
-  opacity: 0.045;
-
-  &.graphic-fill-a {
-    fill: $g11-sidewalk;
-  }
-  &.graphic-fill-b {
-    fill: $g9-mountain;
-  }
-  &.graphic-fill-c {
-    fill: $g7-graphite;
-  }
-  &.graphic-fill-d {
-    fill: $g13-mist;
-    opacity: 1;
-  }
-}
-.graph-type-selector--option.active .graph-type-selector--graphic {
-  .graph-type-selector--graphic-line.graphic-line-a {
-    stroke: $c-pool;
-  }
-  .graph-type-selector--graphic-line.graphic-line-b {
-    stroke: $c-dreamsicle;
-  }
-  .graph-type-selector--graphic-line.graphic-line-c {
-    stroke: $c-rainforest;
-  }
-  .graph-type-selector--graphic-line.graphic-line-d {
-    stroke: $g17-whisper;
-  }
-  .graph-type-selector--graphic-fill.graphic-fill-a {
-    fill: $c-pool;
-  }
-  .graph-type-selector--graphic-fill.graphic-fill-b {
-    fill: $c-dreamsicle;
-  }
-  .graph-type-selector--graphic-fill.graphic-fill-c {
-    fill: $c-rainforest;
-  }
-  .graph-type-selector--graphic-fill.graphic-fill-a,
-  .graph-type-selector--graphic-fill.graphic-fill-b,
-  .graph-type-selector--graphic-fill.graphic-fill-c {
-    opacity: 0.22;
-  }
-  .graph-type-selector--graphic-fill.graphic-fill-d {
-    fill: $g17-whisper;
-    opacity: 1;
-  }
-}
\ No newline at end of file
diff --git a/ui/src/shared/components/ViewTypeSelector.tsx b/ui/src/shared/components/ViewTypeSelector.tsx
deleted file mode 100644
index 5c725980b0..0000000000
--- a/ui/src/shared/components/ViewTypeSelector.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Libraries
-import React, {Component} from 'react'
-import classnames from 'classnames'
-
-// Constants
-import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
-
-// Decorators
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-// Types
-import {ViewType} from 'src/types/v2'
-
-interface Props {
-  type: string
-  onUpdateType: (newType: ViewType) => void
-}
-
-@ErrorHandling
-class ViewTypeSelector extends Component<Props> {
-  public render() {
-    const {type} = this.props
-
-    return (
-      <div className="graph-type-selector--container">
-        <div className="graph-type-selector--grid">
-          {GRAPH_TYPES.map(graphType => (
-            <div
-              key={graphType.type}
-              className={classnames('graph-type-selector--option', {
-                active: graphType.type === type,
-              })}
-            >
-              <div onClick={this.handleSelectType(graphType.type)}>
-                {graphType.graphic}
-                <p>{graphType.menuOption}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  private handleSelectType = (newType: ViewType) => (): void => {
-    this.props.onUpdateType(newType)
-  }
-}
-
-export default ViewTypeSelector
diff --git a/ui/src/shared/components/view_options/ViewTypeDropdown.scss b/ui/src/shared/components/view_options/ViewTypeDropdown.scss
new file mode 100644
index 0000000000..28386c1e85
--- /dev/null
+++ b/ui/src/shared/components/view_options/ViewTypeDropdown.scss
@@ -0,0 +1,107 @@
+@import "src/style/modules";
+
+.view-type-dropdown {
+  .dropdown-item--children, .dropdown--selected {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropdown--selected {
+    .view-type-dropdown--name {
+      margin-left: 8px;
+    }
+
+    .view-type-dropdown--graphic {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.view-type-dropdown--name {
+  margin-left: 10px;
+}
+
+.view-type-dropdown--graphic {
+  width: 40px;
+  height: 40px;
+}
+
+.vis-graphic--line {
+  stroke-width: 1px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+}
+
+.vis-graphic--line-a {
+  stroke: $g11-sidewalk;
+}
+
+.vis-graphic--line-b {
+  stroke: $g9-mountain;
+}
+
+.vis-graphic--line-c {
+  stroke: $g7-graphite;
+}
+
+.vis-graphic--line-d {
+  stroke: $g13-mist;
+}
+
+.vis-graphic--fill-a {
+  fill: $g11-sidewalk;
+}
+
+.vis-graphic--fill-b {
+  fill: $g9-mountain;
+}
+
+.vis-graphic--fill-c {
+  fill: $g7-graphite;
+}
+
+.vis-graphic--fill-d {
+  fill: $g13-mist;
+  opacity: 1;
+}
+
+.vis-graphic--line-a {
+  stroke: $c-pool;
+}
+
+.vis-graphic--line-b {
+  stroke: $c-dreamsicle;
+}
+
+.vis-graphic--line-c {
+  stroke: $c-rainforest;
+}
+
+.vis-graphic--line-d {
+  stroke: $g17-whisper;
+}
+
+.vis-graphic--fill-a {
+  fill: $c-pool;
+}
+
+.vis-graphic--fill-b {
+  fill: $c-dreamsicle;
+}
+
+.vis-graphic--fill-c {
+  fill: $c-rainforest;
+}
+
+.vis-graphic--fill-a,
+.vis-graphic--fill-b,
+.vis-graphic--fill-c {
+  opacity: 0.5;
+}
+
+.vis-graphic--fill-d {
+  fill: $g17-whisper;
+  opacity: 1;
+}
diff --git a/ui/src/shared/components/view_options/ViewTypeDropdown.tsx b/ui/src/shared/components/view_options/ViewTypeDropdown.tsx
index 774aab68dc..448d192944 100644
--- a/ui/src/shared/components/view_options/ViewTypeDropdown.tsx
+++ b/ui/src/shared/components/view_options/ViewTypeDropdown.tsx
@@ -6,13 +6,16 @@ import {connect} from 'react-redux'
 import {setType} from 'src/shared/actions/v2/timeMachines'
 
 // Components
-import {Dropdown} from 'src/clockface'
+import {Dropdown, DropdownMenuColors} from 'src/clockface'
 
 // Utils
 import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
 
 // Constants
-import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
+import {VIS_GRAPHICS} from 'src/shared/constants/visGraphics'
+
+// Styles
+import 'src/shared/components/view_options/ViewTypeDropdown.scss'
 
 // Types
 import {View, NewView, AppState, ViewType} from 'src/types/v2'
@@ -33,7 +36,9 @@ class ViewTypeDropdown extends PureComponent<Props> {
       <Dropdown
         selectedID={this.selectedView}
         onChange={this.handleChange}
-        widthPixels={154}
+        widthPixels={215}
+        customClass="view-type-dropdown"
+        menuColor={DropdownMenuColors.Onyx}
       >
         {this.dropdownItems}
       </Dropdown>
@@ -47,13 +52,14 @@ class ViewTypeDropdown extends PureComponent<Props> {
   }
 
   private get dropdownItems(): JSX.Element[] {
-    return GRAPH_TYPES.map(g => (
+    return VIS_GRAPHICS.map(g => (
       <Dropdown.Item
         key={`view-type--${g.type}`}
         id={`${g.type}`}
         value={g.type}
       >
-        {g.menuOption}
+        <div className="view-type-dropdown--graphic">{g.graphic}</div>
+        <div className="view-type-dropdown--name">{g.name}</div>
       </Dropdown.Item>
     ))
   }
diff --git a/ui/src/dashboards/graphics/graph.tsx b/ui/src/shared/constants/visGraphics.tsx
similarity index 69%
rename from ui/src/dashboards/graphics/graph.tsx
rename to ui/src/shared/constants/visGraphics.tsx
index 592c214400..d3eaf396cd 100644
--- a/ui/src/dashboards/graphics/graph.tsx
+++ b/ui/src/shared/constants/visGraphics.tsx
@@ -2,19 +2,9 @@ import React from 'react'
 
 import {ViewType} from 'src/types/v2/dashboards'
 
-type Graphic = JSX.Element
-
-interface GraphSVGs {
-  [ViewType.XY]: Graphic
-  [ViewType.LinePlusSingleStat]: Graphic
-  [ViewType.SingleStat]: Graphic
-  [ViewType.Gauge]: Graphic
-  [ViewType.Table]: Graphic
-}
-
-const GRAPH_SVGS: GraphSVGs = {
-  xy: (
-    <div className="viz-type-selector--graphic">
+const GRAPHIC_SVGS = {
+  [ViewType.XY]: (
+    <div className="vis-graphic">
       <svg
         width="100%"
         height="100%"
@@ -26,34 +16,34 @@ const GRAPH_SVGS: GraphSVGs = {
         preserveAspectRatio="none meet"
       >
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="vis-graphic--fill vis-graphic--fill-a"
           points="148,40 111.5,47.2 75,25 38.5,90.8 2,111.8 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="vis-graphic--line vis-graphic--line-a"
           points="2,111.8 38.5,90.8 75,25 111.5,47.2 148,40 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="vis-graphic--fill vis-graphic--fill-b"
           points="148,88.2 111.5,95.5 75,61.7 38.5,49.3 2,90.8 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="vis-graphic--line vis-graphic--line-b"
           points="2,90.8 38.5,49.3 75,61.7 111.5,95.5 148,88.2 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="vis-graphic--fill vis-graphic--fill-c"
           points="148,96 111.5,106.3 75,85.7 38.5,116.5 2,115 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="vis-graphic--line vis-graphic--line-c"
           points="2,115 38.5,116.5 75,85.7 111.5,106.3 148,96 	"
         />
       </svg>
     </div>
   ),
-  'single-stat': (
-    <div className="viz-type-selector--graphic">
+  [ViewType.SingleStat]: (
+    <div className="vis-graphic">
       <svg
         width="100%"
         height="100%"
@@ -65,34 +55,34 @@ const GRAPH_SVGS: GraphSVGs = {
         preserveAspectRatio="none meet"
       >
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M35.6,80.4h4.9v1.1h-4.9v7.8h-1.1v-7.8H20.7v-0.6l13.6-20.1h1.3V80.4z M22.4,80.4h12.1V62.1l-1.6,2.7 L22.4,80.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M58.6,75.1c-0.7,1.5-1.8,2.7-3.2,3.6c-1.5,0.9-3.1,1.4-4.9,1.4c-1.6,0-3-0.4-4.2-1.3s-2.2-2-2.9-3.5 c-0.7-1.5-1.1-3.1-1.1-4.8c0-1.9,0.4-3.6,1.1-5.1c0.7-1.6,1.7-2.8,3-3.7c1.3-0.9,2.7-1.3,4.3-1.3c2.9,0,5.2,1,6.7,2.9 c1.5,1.9,2.3,4.7,2.3,8.3v3.3c0,4.8-1.1,8.5-3.2,11c-2.1,2.5-5.3,3.8-9.4,3.9H46l0-1.1h0.8c3.8,0,6.7-1.2,8.7-3.5 C57.6,82.8,58.6,79.5,58.6,75.1z M50.4,79c1.9,0,3.6-0.6,5.1-1.7s2.5-2.6,3-4.5v-1.2c0-3.3-0.7-5.8-2-7.5c-1.4-1.7-3.3-2.6-5.8-2.6 c-1.4,0-2.7,0.4-3.8,1.2s-2,1.9-2.6,3.3c-0.6,1.4-0.9,2.9-0.9,4.5c0,1.5,0.3,3,0.9,4.3c0.6,1.3,1.5,2.4,2.5,3.1 C47.8,78.7,49.1,79,50.4,79z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M81.3,89.2h-17v-1.1L74,77c1.6-1.9,2.8-3.5,3.5-5c0.8-1.4,1.2-2.8,1.2-4c0-2.1-0.6-3.7-1.8-4.9 c-1.2-1.2-2.9-1.7-5.1-1.7c-1.3,0-2.5,0.3-3.6,1c-1.1,0.6-2,1.5-2.6,2.6c-0.6,1.1-0.9,2.4-0.9,3.8h-1.1c0-1.5,0.4-2.9,1.1-4.2 c0.7-1.3,1.7-2.3,2.9-3.1s2.6-1.1,4.2-1.1c2.5,0,4.5,0.7,5.9,2c1.4,1.3,2.1,3.2,2.1,5.6c0,2.2-1.2,4.9-3.7,7.9l-1.8,2.2l-8.6,10 h15.6V89.2z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M85.3,88.3c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,0.8 c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3C85.4,88.8,85.3,88.6,85.3,88.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M92.7,74.3L94,60.8h13.9v1.1H95l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L92.7,74.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M113.8,74.3l1.3-13.6H129v1.1h-12.9l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L113.8,74.3z"
         />
       </svg>
     </div>
   ),
-  'line-plus-single-stat': (
-    <div className="viz-type-selector--graphic">
+  [ViewType.LinePlusSingleStat]: (
+    <div className="vis-graphic">
       <svg
         width="100%"
         height="100%"
@@ -105,43 +95,43 @@ const GRAPH_SVGS: GraphSVGs = {
       >
         <g>
           <polygon
-            className="viz-type-selector--graphic-fill graphic-fill-c"
+            className="vis-graphic--fill vis-graphic--fill-c"
             points="148,88.2 111.5,95.5 75,25 38.5,54.7 2,66.7 2,125 148,125"
           />
           <polyline
-            className="viz-type-selector--graphic-line graphic-line-c"
+            className="vis-graphic--line vis-graphic--line-c"
             points="2,66.7 38.5,54.7 75,25 111.5,95.5 148,88.2"
           />
         </g>
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M35.6,80.4h4.9v1.1h-4.9v7.8h-1.1v-7.8H20.7v-0.6l13.6-20.1h1.3V80.4z M22.4,80.4h12.1V62.1l-1.6,2.7 L22.4,80.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M58.6,75.1c-0.7,1.5-1.8,2.7-3.2,3.6c-1.5,0.9-3.1,1.4-4.9,1.4c-1.6,0-3-0.4-4.2-1.3s-2.2-2-2.9-3.5 c-0.7-1.5-1.1-3.1-1.1-4.8c0-1.9,0.4-3.6,1.1-5.1c0.7-1.6,1.7-2.8,3-3.7c1.3-0.9,2.7-1.3,4.3-1.3c2.9,0,5.2,1,6.7,2.9 c1.5,1.9,2.3,4.7,2.3,8.3v3.3c0,4.8-1.1,8.5-3.2,11c-2.1,2.5-5.3,3.8-9.4,3.9H46l0-1.1h0.8c3.8,0,6.7-1.2,8.7-3.5 C57.6,82.8,58.6,79.5,58.6,75.1z M50.4,79c1.9,0,3.6-0.6,5.1-1.7s2.5-2.6,3-4.5v-1.2c0-3.3-0.7-5.8-2-7.5c-1.4-1.7-3.3-2.6-5.8-2.6 c-1.4,0-2.7,0.4-3.8,1.2s-2,1.9-2.6,3.3c-0.6,1.4-0.9,2.9-0.9,4.5c0,1.5,0.3,3,0.9,4.3c0.6,1.3,1.5,2.4,2.5,3.1 C47.8,78.7,49.1,79,50.4,79z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M81.3,89.2h-17v-1.1L74,77c1.6-1.9,2.8-3.5,3.5-5c0.8-1.4,1.2-2.8,1.2-4c0-2.1-0.6-3.7-1.8-4.9 c-1.2-1.2-2.9-1.7-5.1-1.7c-1.3,0-2.5,0.3-3.6,1c-1.1,0.6-2,1.5-2.6,2.6c-0.6,1.1-0.9,2.4-0.9,3.8h-1.1c0-1.5,0.4-2.9,1.1-4.2 c0.7-1.3,1.7-2.3,2.9-3.1s2.6-1.1,4.2-1.1c2.5,0,4.5,0.7,5.9,2c1.4,1.3,2.1,3.2,2.1,5.6c0,2.2-1.2,4.9-3.7,7.9l-1.8,2.2l-8.6,10 h15.6V89.2z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M85.3,88.3c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,0.8 c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3C85.4,88.8,85.3,88.6,85.3,88.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M92.7,74.3L94,60.8h13.9v1.1H95l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L92.7,74.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M113.8,74.3l1.3-13.6H129v1.1h-12.9l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L113.8,74.3z"
         />
       </svg>
     </div>
   ),
-  gauge: (
-    <div className="viz-type-selector--graphic">
+  [ViewType.Gauge]: (
+    <div className="vis-graphic">
       <svg
         width="100%"
         height="100%"
@@ -154,95 +144,95 @@ const GRAPH_SVGS: GraphSVGs = {
       >
         <g>
           <path
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             d="M110.9,110.9c19.9-19.9,19.9-52,0-71.9s-52-19.9-71.9,0s-19.9,52,0,71.9"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="39.1"
             y1="110.9"
             x2="35"
             y2="115"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="110.9"
             y1="110.9"
             x2="115"
             y2="115"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="122"
             y1="94.5"
             x2="127.2"
             y2="96.6"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="125.8"
             y1="75"
             x2="131.5"
             y2="75"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="122"
             y1="55.5"
             x2="127.2"
             y2="53.4"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="110.9"
             y1="39.1"
             x2="115"
             y2="35"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="94.5"
             y1="28"
             x2="96.6"
             y2="22.8"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="75"
             y1="24.2"
             x2="75"
             y2="18.5"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="55.5"
             y1="28"
             x2="53.4"
             y2="22.8"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="39.1"
             y1="39.1"
             x2="35"
             y2="35"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="28"
             y1="55.5"
             x2="22.8"
             y2="53.4"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="24.2"
             y1="75"
             x2="18.5"
             y2="75"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="vis-graphic--line vis-graphic--line-d"
             x1="28"
             y1="94.5"
             x2="22.8"
@@ -250,38 +240,38 @@ const GRAPH_SVGS: GraphSVGs = {
           />
         </g>
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="vis-graphic--fill vis-graphic--fill-d"
           d="M78.6,73.4L75,56.3l-3.6,17.1c-0.2,0.5-0.3,1-0.3,1.6c0,2.2,1.8,3.9,3.9,3.9s3.9-1.8,3.9-3.9C78.9,74.4,78.8,73.9,78.6,73.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="vis-graphic--fill vis-graphic--fill-a"
           d="M58.9,58.9c8.9-8.9,23.4-8.9,32.3,0l17.1-17.1c-18.4-18.4-48.2-18.4-66.5,0C32.5,50.9,27.9,63,27.9,75h24.2C52.2,69.2,54.4,63.3,58.9,58.9z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="vis-graphic--line vis-graphic--line-a"
           d="M58.9,58.9c8.9-8.9,23.4-8.9,32.3,0l17.1-17.1c-18.4-18.4-48.2-18.4-66.5,0C32.5,50.9,27.9,63,27.9,75h24.2C52.2,69.2,54.4,63.3,58.9,58.9z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="vis-graphic--fill vis-graphic--fill-b"
           d="M58.9,91.1c-4.5-4.5-6.7-10.3-6.7-16.1H27.9c0,12,4.6,24.1,13.8,33.3L58.9,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="vis-graphic--line vis-graphic--line-b"
           d="M58.9,91.1c-4.5-4.5-6.7-10.3-6.7-16.1H27.9c0,12,4.6,24.1,13.8,33.3L58.9,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="vis-graphic--fill vis-graphic--fill-c"
           d="M91.1,91.1l17.1,17.1c18.4-18.4,18.4-48.2,0-66.6L91.1,58.9C100.1,67.8,100.1,82.2,91.1,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="vis-graphic--line vis-graphic--line-c"
           d="M91.1,91.1l17.1,17.1c18.4-18.4,18.4-48.2,0-66.6L91.1,58.9C100.1,67.8,100.1,82.2,91.1,91.1z"
         />
       </svg>
     </div>
   ),
-  table: (
-    <div className="viz-type-selector--graphic">
+  [ViewType.Table]: (
+    <div className="vis-graphic">
       <svg
         id="Table"
         x="0px"
@@ -291,66 +281,66 @@ const GRAPH_SVGS: GraphSVGs = {
         viewBox="0 0 150 150"
       >
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="vis-graphic--fill vis-graphic--fill-c"
           d="M55.5,115H19.7c-1.7,0-3.1-1.4-3.1-3.1V61.7h38.9V115z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="vis-graphic--fill vis-graphic--fill-b"
           d="M133.4,61.7H55.5V35h74.8c1.7,0,3.1,1.4,3.1,3.1V61.7z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="vis-graphic--fill vis-graphic--fill-a"
           d="M55.5,61.7H16.6V38.1c0-1.7,1.4-3.1,3.1-3.1h35.9V61.7z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="vis-graphic--line vis-graphic--line-c"
           d="M16.6,88.3v23.6c0,1.7,1.4,3.1,3.1,3.1h35.9V88.3H16.6z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="vis-graphic--line vis-graphic--line-c"
           x="16.6"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="vis-graphic--line vis-graphic--line-b"
           d="M94.5,35v26.7h38.9V38.1c0-1.7-1.4-3.1-3.1-3.1H94.5z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="vis-graphic--line vis-graphic--line-b"
           x="55.5"
           y="35"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="vis-graphic--line vis-graphic--line-d"
           d="M94.5,115h35.9c1.7,0,3.1-1.4,3.1-3.1V88.3H94.5V115z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="vis-graphic--line vis-graphic--line-d"
           x="55.5"
           y="88.3"
           width="38.9"
           height="26.7"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="vis-graphic--line vis-graphic--line-d"
           x="94.5"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="vis-graphic--line vis-graphic--line-d"
           x="55.5"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="vis-graphic--line vis-graphic--line-a"
           d="M55.5,35H19.7c-1.7,0-3.1,1.4-3.1,3.1v23.6h38.9V35z"
         />
       </svg>
@@ -358,35 +348,30 @@ const GRAPH_SVGS: GraphSVGs = {
   ),
 }
 
-interface GraphType {
-  type: ViewType
-  menuOption: string
-  graphic: Graphic
-}
-export const GRAPH_TYPES: GraphType[] = [
+export const VIS_GRAPHICS = [
   {
     type: ViewType.XY,
-    menuOption: 'Graph',
-    graphic: GRAPH_SVGS[ViewType.XY],
+    name: 'Graph',
+    graphic: GRAPHIC_SVGS[ViewType.XY],
   },
   {
     type: ViewType.LinePlusSingleStat,
-    menuOption: 'Graph + Single Stat',
-    graphic: GRAPH_SVGS[ViewType.LinePlusSingleStat],
+    name: 'Graph + Single Stat',
+    graphic: GRAPHIC_SVGS[ViewType.LinePlusSingleStat],
   },
   {
     type: ViewType.SingleStat,
-    menuOption: 'Single Stat',
-    graphic: GRAPH_SVGS[ViewType.SingleStat],
+    name: 'Single Stat',
+    graphic: GRAPHIC_SVGS[ViewType.SingleStat],
   },
   {
     type: ViewType.Gauge,
-    menuOption: 'Gauge',
-    graphic: GRAPH_SVGS[ViewType.Gauge],
+    name: 'Gauge',
+    graphic: GRAPHIC_SVGS[ViewType.Gauge],
   },
   {
     type: ViewType.Table,
-    menuOption: 'Table',
-    graphic: GRAPH_SVGS[ViewType.Table],
+    name: 'Table',
+    graphic: GRAPHIC_SVGS[ViewType.Table],
   },
 ]
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index a94d029fe4..0c5561a1fd 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -29,7 +29,6 @@
 @import 'src/shared/components/code_mirror/CodeMirror';
 @import 'src/shared/components/code_mirror/CodeMirrorTheme';
 @import 'src/dashboards/components/dashboard_empty/DashboardEmpty';
-@import 'src/shared/components/ViewTypeSelector';
 @import 'src/shared/components/views/Markdown';
 @import 'src/shared/components/custom_singular_time/CustomSingularTime';
 @import 'src/onboarding/OnboardingWizard.scss';