diff --git a/packages/grafana-data/src/transformations/transformers/calculateField.ts b/packages/grafana-data/src/transformations/transformers/calculateField.ts
index d73404a2196..e749dfecf72 100644
--- a/packages/grafana-data/src/transformations/transformers/calculateField.ts
+++ b/packages/grafana-data/src/transformations/transformers/calculateField.ts
@@ -315,7 +315,11 @@ export function getNameFromOptions(options: CalculateFieldTransformerOptions) {
     }
     case CalculateFieldMode.BinaryOperation: {
       const { binary } = options;
-      return `${binary?.left ?? ''} ${binary?.operator ?? ''} ${binary?.right ?? ''}`;
+      const alias = `${binary?.left ?? ''} ${binary?.operator ?? ''} ${binary?.right ?? ''}`;
+
+      //Remove $ signs as they will be interpolated and cause issues. Variables can still be used
+      //in alias but shouldn't in the autogenerated name
+      return alias.replace(/\$/g, '');
     }
     case CalculateFieldMode.ReduceRow:
       {
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
index 71d60048059..83a0fa747a2 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
@@ -9,8 +9,10 @@ import {
   transformDataFrame,
   TransformerRegistryItem,
   getFrameMatchers,
+  DataTransformContext,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { getTemplateSrv } from '@grafana/runtime';
 import { Icon, JSONFormatter, useStyles2 } from '@grafana/ui';
 
 import { TransformationsEditorTransformation } from './types';
@@ -42,14 +44,19 @@ export const TransformationEditor = ({
     const matcher = config.filter?.options ? getFrameMatchers(config.filter) : undefined;
     const inputTransforms = configs.slice(0, index).map((t) => t.transformation);
     const outputTransforms = configs.slice(index, index + 1).map((t) => t.transformation);
-    const inputSubscription = transformDataFrame(inputTransforms, data).subscribe((v) => {
+
+    const ctx: DataTransformContext = {
+      interpolate: (v: string) => getTemplateSrv().replace(v),
+    };
+
+    const inputSubscription = transformDataFrame(inputTransforms, data, ctx).subscribe((v) => {
       if (matcher) {
         v = data.filter((v) => matcher(v));
       }
       setInput(v);
     });
-    const outputSubscription = transformDataFrame(inputTransforms, data)
-      .pipe(mergeMap((before) => transformDataFrame(outputTransforms, before)))
+    const outputSubscription = transformDataFrame(inputTransforms, data, ctx)
+      .pipe(mergeMap((before) => transformDataFrame(outputTransforms, before, ctx)))
       .subscribe(setOutput);
 
     return function unsubscribe() {