diff --git a/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts b/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
index 872ced1715a..c8e668bc10d 100644
--- a/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
+++ b/packages/grafana-data/src/transformations/transformers/joinDataFrames.ts
@@ -71,13 +71,15 @@ function getJoinMatcher(options: JoinOptions): FieldMatcher {
  */
 export function outerJoinDataFrames(options: JoinOptions): DataFrame | undefined {
   if (!options.frames?.length) {
-    return undefined;
+    return;
   }
 
   if (options.frames.length === 1) {
     let frame = options.frames[0];
+    let frameCopy = frame;
+
     if (options.keepOriginIndices) {
-      frame = {
+      frameCopy = {
         ...frame,
         fields: frame.fields.map((f, fieldIndex) => {
           const copy = { ...f };
@@ -94,16 +96,35 @@ export function outerJoinDataFrames(options: JoinOptions): DataFrame | undefined
         }),
       };
     }
+
+    const joinFieldMatcher = getJoinMatcher(options);
+    const joinIndex = frameCopy.fields.findIndex((f) => joinFieldMatcher(f, frameCopy, options.frames));
+
     if (options.enforceSort) {
-      const joinFieldMatcher = getJoinMatcher(options);
-      const joinIndex = frame.fields.findIndex((f) => joinFieldMatcher(f, frame, options.frames));
       if (joinIndex >= 0) {
-        if (!isLikelyAscendingVector(frame.fields[joinIndex].values)) {
-          return sortDataFrame(frame, joinIndex);
+        if (!isLikelyAscendingVector(frameCopy.fields[joinIndex].values)) {
+          frameCopy = sortDataFrame(frameCopy, joinIndex);
         }
       }
     }
-    return frame;
+
+    if (options.keep) {
+      let fields = frameCopy.fields.filter(
+        (f, fieldIdx) => fieldIdx === joinIndex || options.keep!(f, frameCopy, options.frames)
+      );
+
+      // mutate already copied frame
+      if (frame !== frameCopy) {
+        frameCopy.fields = fields;
+      } else {
+        frameCopy = {
+          ...frame,
+          fields,
+        };
+      }
+    }
+
+    return frameCopy;
   }
 
   const nullModes: JoinNullMode[][] = [];
diff --git a/packages/grafana-ui/src/components/uPlot/utils.ts b/packages/grafana-ui/src/components/uPlot/utils.ts
index e4658e64e49..486963d8abb 100755
--- a/packages/grafana-ui/src/components/uPlot/utils.ts
+++ b/packages/grafana-ui/src/components/uPlot/utils.ts
@@ -34,7 +34,6 @@ export function buildPlotConfig(props: PlotProps, plugins: Record<string, PlotPl
 }
 
 /** @internal */
-
 export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]): AlignedData {
   const result: any[] = [];
   const stackingGroups: Map<string, number[]> = new Map();
@@ -57,9 +56,11 @@ export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]):
       seriesIndex++;
       continue;
     }
+
     if (keepFieldTypes && keepFieldTypes.indexOf(f.type) < 0) {
       continue;
     }
+
     collectStackingGroups(f, stackingGroups, seriesIndex);
     result.push(f.values.toArray());
     seriesIndex++;
@@ -70,18 +71,20 @@ export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]):
     // array or stacking groups
     for (const [_, seriesIdxs] of stackingGroups.entries()) {
       const acc = Array(result[0].length).fill(0);
+
       for (let j = 0; j < seriesIdxs.length; j++) {
         const currentlyStacking = result[seriesIdxs[j]];
+
         for (let k = 0; k < result[0].length; k++) {
           const v = currentlyStacking[k];
-          acc[k] += v === null || v === undefined ? 0 : +v;
+          acc[k] += v == null ? 0 : +v;
         }
+
         result[seriesIdxs[j]] = acc.slice();
       }
     }
-
-    return result as AlignedData;
   }
+
   return result as AlignedData;
 }