diff --git a/CHANGELOG.md b/CHANGELOG.md
index c85cd62d41ab3f4b858f080cfc1287cecf34be19..15c270bd9ab49b3e9c9eb6484c0be544282d2d2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 - The cursor slider component was converted to vue.
 - The active sites for the map are now retrieved from sensor things.
+- The hydrograph legend component was converted to vue.
 
 
 ## [1.4.0](https://code.usgs.gov/wma/iow/waterdataui/-/compare/waterdataui-1.4.0...waterdataui-1.3.0) - 2022-07-21
diff --git a/assets/src/scripts/d3-rendering/legend.js b/assets/src/scripts/d3-rendering/legend.js
index cf707e0689667707200a727aa0861c35f71cdf71..1065fc979d71dbe5936de932db862f2d5ae7295e 100644
--- a/assets/src/scripts/d3-rendering/legend.js
+++ b/assets/src/scripts/d3-rendering/legend.js
@@ -1,4 +1,4 @@
-import config from 'ui/config'; 
+import config from 'ui/config';
 import {mediaQuery} from 'ui/utils';
 
 const RECTANGLE_MARKER_WIDTH = 20;
diff --git a/assets/src/scripts/d3-rendering/legend.test.js b/assets/src/scripts/d3-rendering/legend.test.js
index 12bb5a221dc22ff76b983b3a2df1c3aa164ca211..3cd27c5cef9b71e861cbd36ae12acbe346690d2e 100644
--- a/assets/src/scripts/d3-rendering/legend.test.js
+++ b/assets/src/scripts/d3-rendering/legend.test.js
@@ -1,4 +1,4 @@
-import {select} from 'd3-selection'; 
+import {select} from 'd3-selection';
 
 import * as utils from 'ui/utils';
 
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 57c5a5467d1d440d9d775eaccb3f1433c809c060..617b307a1e2d9322ebd38b3554bbb38124d82905 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -3,7 +3,7 @@
     <CursorSlider />
     <GraphBrush />
     <div class="ts-legend-controls-container">
-      <Legend />
+      <HydrographLegend />
       <div class="graph-controls-container">
         <GraphControls />
       </div>
@@ -14,14 +14,14 @@
 <script>
 import GraphBrush from './vue-components/graph-brush.vue';
 import CursorSlider from './vue-components/cursor-slider.vue';
-import Legend from './vue-components/legend.vue'
+import HydrographLegend from './vue-components/legend.vue';
 import GraphControls from './vue-components/graph-controls.vue';
 export default {
   name: 'HydrographApp',
   components: {
     GraphBrush,
     CursorSlider,
-    Legend,
+    HydrographLegend,
     GraphControls
   }
 };
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
index 028fe515e783dbffeb183e70bd6a3ad8e35b9e82..7267a4730a919a33bde4e91a9b6978ab7c378971 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
@@ -10,7 +10,7 @@ import {configureStore} from 'ml/store';
 
 import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
-import Legend from './legend.vue'
+import HydrographLegend from './legend.vue';
 
 describe('monitoring-location/components/hydrograph/legend module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
@@ -40,14 +40,14 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
     };
 
     utils.mediaQuery = jest.fn().mockReturnValue(true);
-    describe('drawSimpleLegend', () => {
+    describe('HydrographLegend', () => {
         let store;
         let wrapper;
 
         beforeEach(() => {
             store = configureStore(TEST_STATE);
 
-            wrapper = mount(Legend, {
+            wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
                         [ReduxConnectVue, {
@@ -65,7 +65,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
         });
 
         it('If no markers are provided legend-svg will contain no groups', () => {
-            wrapper = mount(Legend, {
+            wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
                         [ReduxConnectVue, {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
index c33468c82dbc89e8e7303d1f1066f8551fde539c..1f098da08a33c7917f58b80da87fe44731695d0b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
@@ -27,7 +27,7 @@ import {mediaQuery} from 'ui/utils';
 import config from 'ui/config';
 
 export default {
-  name: 'Legend',
+  name: 'HydrographLegend',
   setup() {
     const legend = ref(null);
 
@@ -129,7 +129,7 @@ export default {
           if (bBox.value) {
             return `0 0 ${state.layout.value.width} ${bBox.height + 10}`;
           }
-          return ''
+          return '';
         });
       }
     });
@@ -141,5 +141,5 @@ export default {
       legend
     };
   }
-}
+};
 </script>
\ No newline at end of file