diff --git a/cypress/e2e/shared/explorer.test.ts b/cypress/e2e/shared/explorer.test.ts
index f5b637dabd..8213f65d0e 100644
--- a/cypress/e2e/shared/explorer.test.ts
+++ b/cypress/e2e/shared/explorer.test.ts
@@ -201,45 +201,139 @@ describe('DataExplorer', () => {
     })
   })
 
-  describe('optional suffix and prefix in gauge', () => {
-    beforeEach(() => {
-      cy.getByTestID('view-type--dropdown').click()
-      cy.getByTestID(`view-type--gauge`).click()
-      cy.getByTestID('cog-cell--button').click()
-    })
-    it('can add prefix and suffix values', () => {
-      cy.get('.view-options').within(() => {
-        cy.getByTestID('prefix-input')
-          .click()
-          .type('mph')
-          .invoke('val')
-          .should('equal', 'mph')
-          .getByTestID('input-field--error')
-          .should('have.length', 0)
-        cy.getByTestID('suffix-input')
-          .click()
-          .type('mph')
-          .invoke('val')
-          .should('equal', 'mph')
-          .getByTestID('input-field--error')
-          .should('have.length', 0)
-      })
+  describe('optional prefix and suffix in gauge', () => {
+    const prefix = 'speed: '
+    const suffix = ' mph'
+    it('can add prefix and suffix labels when using Giraffe gauge', () => {
+      cy.setFeatureFlags({useGiraffeGraphs: true})
+      cy.writeData(lines(10))
+      cy.get<string>('@defaultBucketListSelector').then(
+        (defaultBucketListSelector: string) => {
+          cy.getByTestID('view-type--dropdown').click()
+          cy.getByTestID(`view-type--gauge`).click()
+
+          cy.getByTestID('query-builder').should('exist')
+          cy.getByTestID('selector-list _monitoring').should('be.visible')
+          cy.getByTestID('selector-list _monitoring').click()
+
+          cy.getByTestID(defaultBucketListSelector).should('be.visible')
+          cy.getByTestID(defaultBucketListSelector).click()
+
+          cy.getByTestID('selector-list m').should('be.visible')
+          cy.getByTestID('selector-list m').clickAttached()
+
+          cy.getByTestID('selector-list v').should('be.visible')
+          cy.getByTestID('selector-list v').clickAttached()
+
+          cy.getByTestID('selector-list tv1').clickAttached()
+
+          cy.getByTestID('selector-list mean')
+            .scrollIntoView()
+            .should('be.visible')
+            .click({force: true})
+
+          cy.getByTestID('time-machine-submit-button').click()
+          cy.get('canvas.giraffe-gauge').should('be.visible')
+
+          cy.getByTestID('cog-cell--button').click()
+          cy.get('.view-options').within(() => {
+            cy.getByTestID('prefix-input')
+              .click()
+              .type(`${prefix}`)
+              .invoke('val')
+              .should('equal', prefix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('suffix-input')
+              .click()
+              .type(`${suffix}`)
+              .invoke('val')
+              .should('equal', suffix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('tick-prefix-input')
+              .click()
+              .type(`${prefix}`)
+              .invoke('val')
+              .should('equal', prefix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('tick-suffix-input')
+              .click()
+              .type(`${suffix}`)
+              .invoke('val')
+              .should('equal', suffix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+          })
+        }
+      )
     })
-    it('can add and remove tick values', () => {
-      cy.get('.view-options').within(() => {
-        cy.getByTestID('tickprefix-input')
-          .click()
-          .invoke('val')
-          .should('equal', '')
-          .getByTestID('input-field--error')
-          .should('have.length', 0)
-        cy.getByTestID('ticksuffix-input')
-          .click()
-          .invoke('val')
-          .should('equal', '')
-          .getByTestID('input-field--error')
-          .should('have.length', 0)
-      })
+
+    it('can add prefix and suffix labels when using original built-in gauge', () => {
+      cy.setFeatureFlags({useGiraffeGraphs: false})
+      cy.writeData(lines(10))
+      cy.get<string>('@defaultBucketListSelector').then(
+        (defaultBucketListSelector: string) => {
+          cy.getByTestID('view-type--dropdown').click()
+          cy.getByTestID(`view-type--gauge`).click()
+
+          cy.getByTestID('query-builder').should('exist')
+          cy.getByTestID('selector-list _monitoring').should('be.visible')
+          cy.getByTestID('selector-list _monitoring').click()
+
+          cy.getByTestID(defaultBucketListSelector).should('be.visible')
+          cy.getByTestID(defaultBucketListSelector).click()
+
+          cy.getByTestID('selector-list m').should('be.visible')
+          cy.getByTestID('selector-list m').clickAttached()
+
+          cy.getByTestID('selector-list v').should('be.visible')
+          cy.getByTestID('selector-list v').clickAttached()
+
+          cy.getByTestID('selector-list tv1').clickAttached()
+
+          cy.getByTestID('selector-list mean')
+            .scrollIntoView()
+            .should('be.visible')
+            .click({force: true})
+
+          cy.getByTestID('time-machine-submit-button').click()
+          cy.get('canvas.gauge').should('be.visible')
+
+          cy.getByTestID('cog-cell--button').click()
+          cy.get('.view-options').within(() => {
+            cy.getByTestID('prefix-input')
+              .click()
+              .type(`${prefix}`)
+              .invoke('val')
+              .should('equal', prefix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('suffix-input')
+              .click()
+              .type(`${suffix}`)
+              .invoke('val')
+              .should('equal', suffix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('tick-prefix-input')
+              .click()
+              .type(`${prefix}`)
+              .invoke('val')
+              .should('equal', prefix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+            cy.getByTestID('tick-suffix-input')
+              .click()
+              .type(`${suffix}`)
+              .invoke('val')
+              .should('equal', suffix)
+              .getByTestID('input-field--error')
+              .should('have.length', 0)
+          })
+        }
+      )
     })
   })
 
diff --git a/src/visualization/types/Gauge/Gauge.tsx b/src/visualization/types/Gauge/Gauge.tsx
index 8df3b16ab0..db2ec2999c 100644
--- a/src/visualization/types/Gauge/Gauge.tsx
+++ b/src/visualization/types/Gauge/Gauge.tsx
@@ -278,7 +278,6 @@ class Gauge extends Component<Props> {
     maxValue
   ) => {
     const {tickPrefix, tickSuffix, decimalPlaces} = this.props
-    let {prefix, suffix} = this.props
     const {degree, lineCount, labelColor, labelFontSize} = this.props.theme
 
     const tickSplit = Math.abs(maxValue - minValue) / lineCount
@@ -289,16 +288,12 @@ class Gauge extends Component<Props> {
       maxValue,
     ]
 
-    if (tickPrefix === 'true') {
-      prefix = ''
-    }
-
-    if (tickSuffix === 'true') {
-      suffix = ''
-    }
-
     const labels = tickValues.map(tick =>
-      formatStatValue(tick, {decimalPlaces, prefix, suffix})
+      formatStatValue(tick, {
+        decimalPlaces,
+        prefix: tickPrefix,
+        suffix: tickSuffix,
+      })
     )
 
     const startDegree = degree * 135
diff --git a/src/visualization/types/Gauge/options.tsx b/src/visualization/types/Gauge/options.tsx
index 2d45b4ed7e..851a8639a3 100644
--- a/src/visualization/types/Gauge/options.tsx
+++ b/src/visualization/types/Gauge/options.tsx
@@ -4,16 +4,10 @@ import {
   Grid,
   Columns,
   Form,
-  Toggle,
   AutoInput,
   AutoInputMode,
   Input,
   InputType,
-  InputToggleType,
-  InputLabel,
-  FlexBox,
-  AlignItems,
-  ComponentSize,
 } from '@influxdata/clockface'
 
 import ThresholdsSettings from 'src/visualization/components/internal/ThresholdsSettings'
@@ -46,13 +40,14 @@ const GaugeOptions: FC<Props> = ({properties, update}) => {
       setDigits(2)
     }
   }
+
   return (
     <Grid>
       <Grid.Row>
         <Grid.Column>
           <Grid.Row>
             <Grid.Column widthXS={Columns.Six}>
-              <Form.Element label="Prefix">
+              <Form.Element label="Value Prefix">
                 <Input
                   testID="prefix-input"
                   value={properties.prefix}
@@ -64,7 +59,7 @@ const GaugeOptions: FC<Props> = ({properties, update}) => {
               </Form.Element>
             </Grid.Column>
             <Grid.Column widthXS={Columns.Six}>
-              <Form.Element label="Suffix">
+              <Form.Element label="Value Suffix">
                 <Input
                   testID="suffix-input"
                   value={properties.suffix}
@@ -78,46 +73,28 @@ const GaugeOptions: FC<Props> = ({properties, update}) => {
           </Grid.Row>
           <Grid.Row>
             <Grid.Column widthXS={Columns.Six}>
-              <FlexBox
-                alignItems={AlignItems.Center}
-                margin={ComponentSize.Small}
-                className="view-options--checkbox"
-              >
-                <Toggle
-                  id="prefixoptional"
-                  testID="tickprefix-input"
-                  type={InputToggleType.Checkbox}
+              <Form.Element label="Axis Prefix">
+                <Input
+                  testID="tick-prefix-input"
                   value={properties.tickPrefix}
-                  onChange={val => {
-                    update({tickPrefix: val === 'false' || !!!val})
+                  onChange={evt => {
+                    update({tickPrefix: evt.target.value})
                   }}
-                  size={ComponentSize.ExtraSmall}
+                  placeholder="%, MPH, etc."
                 />
-                <InputLabel active={!!properties.tickPrefix}>
-                  Optional Prefix
-                </InputLabel>
-              </FlexBox>
+              </Form.Element>
             </Grid.Column>
             <Grid.Column widthXS={Columns.Six}>
-              <FlexBox
-                alignItems={AlignItems.Center}
-                margin={ComponentSize.Small}
-                className="view-options--checkbox"
-              >
-                <Toggle
-                  id="suffixoptional"
-                  testID="ticksuffix-input"
-                  type={InputToggleType.Checkbox}
+              <Form.Element label="Axis Suffix">
+                <Input
+                  testID="tick-suffix-input"
                   value={properties.tickSuffix}
-                  onChange={val => {
-                    update({tickSuffix: val === 'false' || !!!val})
+                  onChange={evt => {
+                    update({tickSuffix: evt.target.value})
                   }}
-                  size={ComponentSize.ExtraSmall}
+                  placeholder="%, MPH, etc."
                 />
-                <InputLabel active={!!properties.tickSuffix}>
-                  Optional Suffix
-                </InputLabel>
-              </FlexBox>
+              </Form.Element>
             </Grid.Column>
           </Grid.Row>
           {properties.decimalPlaces && (