diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 5c37ad1..85ea2f0 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -217,6 +217,7 @@
             cluster={clusters.find((c) => c.name == cluster)}
             subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster}
             series={item.metric.series}
+            enableFlip
             forNode
           />
         {:else if item.disabled === true && item.metric}
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index f435846..c5c70a0 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -348,6 +348,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         usesBins
+        enableFlip
       />
     {/snippet}
 
diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte
index 96c06f8..b391a1f 100644
--- a/web/frontend/src/generic/plots/Comparogram.svelte
+++ b/web/frontend/src/generic/plots/Comparogram.svelte
@@ -271,9 +271,12 @@
 
     function update(u) {
       const { left, top } = u.cursor;
-      const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
-      legendEl.style.transform =
-        "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
+      const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
+      if (left < (width/2)) {
+        legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
+      } else {
+        legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
+      }
     }
 
     return {
@@ -289,7 +292,7 @@
     if (!uplot) {
       opts.width = ren_width;
       opts.height = ren_height;
-      
+
       if (plotSync) {
         opts.cursor.sync = { 
           key: plotSync.key,
diff --git a/web/frontend/src/generic/plots/Histogram.svelte b/web/frontend/src/generic/plots/Histogram.svelte
index adbb849..a0af6c2 100644
--- a/web/frontend/src/generic/plots/Histogram.svelte
+++ b/web/frontend/src/generic/plots/Histogram.svelte
@@ -34,6 +34,7 @@
     xtime = false,
     ylabel = "",
     yunit = "",
+    enableFlip = false,
   } = $props();
 
   /* Const Init */
@@ -117,8 +118,12 @@
 
     function update(u) {
       const { left, top } = u.cursor;
-      legendEl.style.transform =
-        "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
+      const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
+      if (enableFlip && (left < (width/2))) {
+        legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
+      } else {
+        legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
+      }
     }
 
     return {
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index 1073c68..d9dda8e 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -49,6 +49,7 @@
     thresholdState = null,
     extendedLegendData = null,
     plotSync = null,
+    enableFlip = false,
     onZoom
   } = $props();
 
@@ -396,9 +397,12 @@
 
     function update(u) {
       const { left, top } = u.cursor;
-      const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
-      legendEl.style.transform =
-        "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
+      const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
+      if (enableFlip && (left < (width/2))) {
+        legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
+      } else {
+        legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
+      }
     }
 
     if (dataSize <= 12 || useStatsSeries) {
@@ -593,7 +597,7 @@
           if ((thresholdState === thresholds?.normal)) { opts.scales = {...zoomState} };
         } // else: reset scaling to default
       }
-      
+
       uplot = new uPlot(opts, plotData, plotWrapper);
     } else {
       uplot.setSize({ width: ren_width, height: ren_height });
diff --git a/web/frontend/src/generic/plots/Stacked.svelte b/web/frontend/src/generic/plots/Stacked.svelte
index deac815..4c532db 100644
--- a/web/frontend/src/generic/plots/Stacked.svelte
+++ b/web/frontend/src/generic/plots/Stacked.svelte
@@ -271,9 +271,12 @@
 
     function update(u) {
       const { left, top } = u.cursor;
-      const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
-      legendEl.style.transform =
-        "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
+      const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
+      if (left < (width/2)) {
+        legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
+      } else {
+        legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
+      }
     }
 
     return {
diff --git a/web/frontend/src/job/Metric.svelte b/web/frontend/src/job/Metric.svelte
index 431b7b2..886b483 100644
--- a/web/frontend/src/job/Metric.svelte
+++ b/web/frontend/src/job/Metric.svelte
@@ -185,6 +185,7 @@
       {isShared}
       {zoomState}
       {thresholdState}
+      enableFlip
     />
   {:else if statsSeries[selectedScopeIndex] != null && patternMatches}
     <MetricPlot
@@ -202,6 +203,7 @@
       {thresholdState}
       statisticsSeries={statsSeries[selectedScopeIndex]}
       useStatsSeries={!!statsSeries[selectedScopeIndex]}
+      enableFlip
     />
   {/if}
 {/key}
diff --git a/web/frontend/src/status/StatisticsDash.svelte b/web/frontend/src/status/StatisticsDash.svelte
index fb2161b..81489a6 100644
--- a/web/frontend/src/status/StatisticsDash.svelte
+++ b/web/frontend/src/status/StatisticsDash.svelte
@@ -132,6 +132,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         usesBins
+        enableFlip
       />
     {/snippet}
     
diff --git a/web/frontend/src/status/UsageDash.svelte b/web/frontend/src/status/UsageDash.svelte
index 3b39e55..a64b7d2 100644
--- a/web/frontend/src/status/UsageDash.svelte
+++ b/web/frontend/src/status/UsageDash.svelte
@@ -255,6 +255,7 @@
           height="275"
           usesBins
           xtime
+          enableFlip
         />
       {/key}
     </Col>
@@ -359,6 +360,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         height="275"
+        enableFlip
       />
     </Col>
     <Col xs="6" md="3" lg="2" class="p-2">
@@ -462,6 +464,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         height="275"
+        enableFlip
       />
     </Col>
     <Col xs="6" md="3" lg="2" class="p-2">
diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte
index 366f705..5051374 100644
--- a/web/frontend/src/systems/NodeOverview.svelte
+++ b/web/frontend/src/systems/NodeOverview.svelte
@@ -149,6 +149,7 @@
                 {cluster}
                 subCluster={item.subCluster}
                 forNode
+                enableFlip
               />
             {/key}
           {:else if item.disabled === null}