diff --git a/packages/grafana-data/src/transformations/transformers/joinByField.ts b/packages/grafana-data/src/transformations/transformers/joinByField.ts
index 55a703f62b3..7af73403164 100644
--- a/packages/grafana-data/src/transformations/transformers/joinByField.ts
+++ b/packages/grafana-data/src/transformations/transformers/joinByField.ts
@@ -1,6 +1,6 @@
 import { map } from 'rxjs/operators';
 
-import { DataFrame, SynchronousDataTransformerInfo, FieldMatcher } from '../../types';
+import { DataFrame, SynchronousDataTransformerInfo, FieldMatcher, DataTransformContext } from '../../types';
 import { fieldMatchers } from '../matchers';
 import { FieldMatcherID } from '../matchers/ids';
 
@@ -32,12 +32,12 @@ export const joinByFieldTransformer: SynchronousDataTransformerInfo<JoinByFieldO
   operator: (options, ctx) => (source) =>
     source.pipe(map((data) => joinByFieldTransformer.transformer(options, ctx)(data))),
 
-  transformer: (options: JoinByFieldOptions) => {
+  transformer: (options: JoinByFieldOptions, ctx: DataTransformContext) => {
     let joinBy: FieldMatcher | undefined = undefined;
     return (data: DataFrame[]) => {
       if (data.length > 1) {
         if (options.byField && !joinBy) {
-          joinBy = fieldMatchers.get(FieldMatcherID.byName).get(options.byField);
+          joinBy = fieldMatchers.get(FieldMatcherID.byName).get(ctx.interpolate(options.byField));
         }
         const joined = joinDataFrames({ frames: data, joinBy, mode: options.mode });
         if (joined) {
diff --git a/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts b/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
index 411708e3b92..f19b6b0ccb7 100644
--- a/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
+++ b/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
@@ -244,7 +244,7 @@ export function joinDataFrames(options: JoinOptions): DataFrame | undefined {
 
   return {
     // ...options.data[0], // keep name, meta?
-    length: joined[0].length,
+    length: joined[0] ? joined[0].length : 0,
     fields: originalFields.map((f, index) => ({
       ...f,
       values: joined[index],
diff --git a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
index f8000ae29c4..3ce88b92040 100644
--- a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
@@ -9,6 +9,7 @@ import {
   TransformerCategory,
 } from '@grafana/data';
 import { JoinByFieldOptions, JoinMode } from '@grafana/data/src/transformations/transformers/joinByField';
+import { getTemplateSrv } from '@grafana/runtime';
 import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
@@ -31,6 +32,11 @@ const modes = [
 
 export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
+  const variables = getTemplateSrv()
+    .getVariables()
+    .map((v) => {
+      return { value: '$' + v.name, label: '$' + v.name };
+    });
 
   const onSelectField = useCallback(
     (value: SelectableValue<string>) => {
@@ -62,7 +68,7 @@ export function SeriesToFieldsTransformerEditor({ input, options, onChange }: Tr
       <InlineFieldRow>
         <InlineField label="Field" labelWidth={8} grow>
           <Select
-            options={fieldNames}
+            options={[...fieldNames, ...variables]}
             value={options.byField}
             onChange={onSelectField}
             placeholder="time"