diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
index f0007ca2e4c3..f142bd704337 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -46,14 +46,16 @@ function WidgetGraph({
 
 	// Add legend state management similar to dashboard components
 	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
-		Array(queryResponse.data?.payload?.data?.result?.length || 0).fill(true),
+		Array((queryResponse.data?.payload?.data?.result?.length || 0) + 1).fill(
+			true,
+		),
 	);
 
 	// Initialize graph visibility when data changes
 	useEffect(() => {
 		if (queryResponse.data?.payload?.data?.result) {
 			setGraphVisibility(
-				Array(queryResponse.data.payload.data.result.length).fill(true),
+				Array(queryResponse.data.payload.data.result.length + 1).fill(true),
 			);
 		}
 	}, [queryResponse.data?.payload?.data?.result]);
diff --git a/frontend/src/container/PanelWrapper/enhancedLegend.ts b/frontend/src/container/PanelWrapper/enhancedLegend.ts
index 0d3ce6681f8c..2cf6483cde8b 100644
--- a/frontend/src/container/PanelWrapper/enhancedLegend.ts
+++ b/frontend/src/container/PanelWrapper/enhancedLegend.ts
@@ -148,6 +148,11 @@ export function calculateEnhancedLegendConfig(
 	};
 }
 
+// CSS class constants
+const LEGEND_SINGLE_LINE_CLASS = 'u-legend-single-line';
+const LEGEND_MULTI_LINE_CLASS = 'u-legend-multi-line';
+const LEGEND_RIGHT_ALIGNED_CLASS = 'u-legend-right-aligned';
+
 /**
  * Apply enhanced legend styling to a legend element
  */
@@ -191,13 +196,25 @@ export function applyEnhancedLegendStyling(
 		legendElement.style.maxWidth = '';
 	}
 
-	// Apply alignment based on number of rows and position
-	if (legendPosition === LegendPosition.RIGHT || requiredRows === 1) {
-		legendElement.classList.add('u-legend-single-line');
-		legendElement.classList.remove('u-legend-multi-line');
+	// Apply alignment based on position and number of rows
+	if (legendPosition === LegendPosition.RIGHT) {
+		legendElement.classList.add(LEGEND_RIGHT_ALIGNED_CLASS);
+		legendElement.classList.remove(
+			LEGEND_SINGLE_LINE_CLASS,
+			LEGEND_MULTI_LINE_CLASS,
+		);
+	} else if (requiredRows === 1) {
+		legendElement.classList.add(LEGEND_SINGLE_LINE_CLASS);
+		legendElement.classList.remove(
+			LEGEND_MULTI_LINE_CLASS,
+			LEGEND_RIGHT_ALIGNED_CLASS,
+		);
 	} else {
-		legendElement.classList.add('u-legend-multi-line');
-		legendElement.classList.remove('u-legend-single-line');
+		legendElement.classList.add(LEGEND_MULTI_LINE_CLASS);
+		legendElement.classList.remove(
+			LEGEND_SINGLE_LINE_CLASS,
+			LEGEND_RIGHT_ALIGNED_CLASS,
+		);
 	}
 
 	// Add scrollbar indicator if needed
diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index 5008353f9103..0a0efcc0c795 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -629,6 +629,7 @@ export const getUPlotChartOptions = ({
 					stackBarChart,
 					hiddenGraph,
 					isDarkMode,
+					colorMapping,
 			  }),
 		axes: getAxes({ isDarkMode, yAxisUnit, panelType, isLogScale }),
 	};
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 3af7f6fa7b95..3dd190128c61 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -96,6 +96,26 @@ body {
 			justify-content: center;
 		}
 
+		&.u-legend-right-aligned {
+			tbody {
+				align-items: flex-start !important;
+				justify-content: flex-start !important;
+			}
+
+			tr.u-series {
+				justify-content: flex-start !important;
+
+				th {
+					justify-content: flex-start !important;
+					text-align: left !important;
+
+					.legend-text {
+						text-align: left !important;
+					}
+				}
+			}
+		}
+
 		// Right-side legend specific styles
 		&.u-legend-right {
 			tbody {