diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
index 647b746c2d..aa7553af53 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -133,6 +133,7 @@ function WidgetGraph({
 				softMax,
 				softMin,
 				panelType: selectedGraph,
+				currentQuery,
 			}),
 		[
 			widgetId,
@@ -148,6 +149,7 @@ function WidgetGraph({
 			softMax,
 			softMin,
 			selectedGraph,
+			currentQuery,
 		],
 	);
 
diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index 50f6c5fbc4..0b281506f6 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -12,6 +12,7 @@ import { Dimensions } from 'hooks/useDimensions';
 import { convertValue } from 'lib/getConvertedValue';
 import _noop from 'lodash-es/noop';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import uPlot from 'uplot';
 
 import onClickPlugin, { OnClickPluginOpts } from './plugins/onClickPlugin';
@@ -40,6 +41,7 @@ export interface GetUPlotChartOptions {
 	maxTimeScale?: number;
 	softMin: number | null;
 	softMax: number | null;
+	currentQuery?: Query;
 }
 
 export const getUPlotChartOptions = ({
@@ -59,6 +61,7 @@ export const getUPlotChartOptions = ({
 	softMax,
 	softMin,
 	panelType,
+	currentQuery,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -223,6 +226,7 @@ export const getUPlotChartOptions = ({
 			widgetMetaData: apiResponse?.data.result,
 			graphsVisibilityStates,
 			panelType,
+			currentQuery,
 		}),
 		axes: getAxes(isDarkMode, yAxisUnit),
 	};
diff --git a/frontend/src/lib/uPlotLib/utils/getSeriesData.ts b/frontend/src/lib/uPlotLib/utils/getSeriesData.ts
index cf60a632cb..574b8dc1de 100644
--- a/frontend/src/lib/uPlotLib/utils/getSeriesData.ts
+++ b/frontend/src/lib/uPlotLib/utils/getSeriesData.ts
@@ -3,6 +3,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import getLabelName from 'lib/getLabelName';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 import { drawStyles, lineInterpolations } from './constants';
@@ -31,6 +32,7 @@ const getSeries = ({
 	widgetMetaData,
 	graphsVisibilityStates,
 	panelType,
+	currentQuery,
 }: GetSeriesProps): uPlot.Options['series'] => {
 	const configurations: uPlot.Series[] = [
 		{ label: 'Timestamp', stroke: 'purple' },
@@ -40,13 +42,15 @@ const getSeries = ({
 	const newGraphVisibilityStates = graphsVisibilityStates?.slice(1);
 
 	for (let i = 0; i < seriesList?.length; i += 1) {
-		const { metric = {}, queryName = '', legend = '' } = widgetMetaData[i] || {};
+		const { metric = {}, queryName = '', legend: lgd } = widgetMetaData[i] || {};
 
-		const label = getLabelName(
-			metric,
-			queryName || '', // query
-			legend || '',
-		);
+		const newLegend =
+			currentQuery?.builder.queryData.find((item) => item.queryName === queryName)
+				?.legend || '';
+
+		const legend = newLegend || lgd || '';
+
+		const label = getLabelName(metric, queryName || '', legend);
 
 		const color = generateColor(label, themeColors.chartcolors);
 
@@ -87,6 +91,7 @@ export type GetSeriesProps = {
 	widgetMetaData: QueryData[];
 	graphsVisibilityStates?: boolean[];
 	panelType?: PANEL_TYPES;
+	currentQuery?: Query;
 };
 
 export default getSeries;