diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
index b6f51227da..88364fad1b 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -66,8 +66,12 @@ function ChartPreview({
 			}),
 		enabled:
 			query != null &&
-			(query.queryType !== EQueryType.PROM ||
-				(query.promQL?.length > 0 && query.promQL[0].query !== '')),
+			((query.queryType === EQueryType.PROM &&
+				query.promQL?.length > 0 &&
+				query.promQL[0].query !== '') ||
+				(query.queryType === EQueryType.QUERY_BUILDER &&
+					query.metricsBuilder?.queryBuilder?.length > 0 &&
+					query.metricsBuilder?.queryBuilder[0].metricName !== '')),
 	});
 
 	const chartDataSet = queryResponse.isError
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
index 440b20238f..8643eb4060 100644
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -83,7 +83,7 @@ function FormAlertRules({
 
 	// staged query is used to display chart preview
 	const [stagedQuery, setStagedQuery] = useState<StagedQuery>();
-	const debouncedStagedQuery = useDebounce(stagedQuery, 500);
+	const debouncedStagedQuery = useDebounce(stagedQuery, 1000);
 
 	// this use effect initiates staged query and
 	// other queries based on server data.