diff --git a/packages/grafana-data/src/field/fieldState.ts b/packages/grafana-data/src/field/fieldState.ts
index 6ce618873ab..d0bf5b18a38 100644
--- a/packages/grafana-data/src/field/fieldState.ts
+++ b/packages/grafana-data/src/field/fieldState.ts
@@ -47,7 +47,7 @@ export function getFieldDisplayName(field: Field, frame?: DataFrame, allFrames?:
 }
 
 /**
- * Get an appropriate display name. If the 'title' is set, use that
+ * Get an appropriate display name. If the 'displayName' field config is set, use that
  */
 function calculateFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
   const hasConfigTitle = field.config?.displayName && field.config?.displayName.length;
diff --git a/packages/grafana-data/src/transformations/transformers/order.test.ts b/packages/grafana-data/src/transformations/transformers/order.test.ts
index de6ff8bc210..a69dec569b5 100644
--- a/packages/grafana-data/src/transformations/transformers/order.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/order.test.ts
@@ -43,18 +43,30 @@ describe('Order Transformer', () => {
           name: 'temperature',
           type: FieldType.number,
           values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
+          labels: undefined,
+          state: {
+            displayName: 'temperature',
+          },
         },
         {
           config: {},
           name: 'humidity',
           type: FieldType.number,
           values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
+          labels: undefined,
+          state: {
+            displayName: 'humidity',
+          },
         },
         {
           config: {},
           name: 'time',
           type: FieldType.time,
           values: new ArrayVector([3000, 4000, 5000, 6000]),
+          labels: undefined,
+          state: {
+            displayName: 'time',
+          },
         },
       ]);
     });
@@ -90,18 +102,30 @@ describe('Order Transformer', () => {
           name: 'humidity',
           type: FieldType.number,
           values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
+          labels: undefined,
+          state: {
+            displayName: 'humidity',
+          },
         },
         {
           config: {},
           name: 'time',
           type: FieldType.time,
           values: new ArrayVector([3000, 4000, 5000, 6000]),
+          labels: undefined,
+          state: {
+            displayName: 'time',
+          },
         },
         {
           config: {},
           name: 'pressure',
           type: FieldType.number,
           values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
+          labels: undefined,
+          state: {
+            displayName: 'pressure',
+          },
         },
       ]);
     });
diff --git a/packages/grafana-data/src/transformations/transformers/order.ts b/packages/grafana-data/src/transformations/transformers/order.ts
index c0e4c007090..cf44303e618 100644
--- a/packages/grafana-data/src/transformations/transformers/order.ts
+++ b/packages/grafana-data/src/transformations/transformers/order.ts
@@ -1,7 +1,7 @@
 import { DataTransformerID } from './ids';
 import { DataTransformerInfo } from '../../types/transformations';
-import { DataFrame } from '../..';
-import { Field } from '../../types';
+import { DataFrame, Field } from '../../types';
+import { getFieldDisplayName } from '../../field/fieldState';
 
 export interface OrderFieldsTransformerOptions {
   indexByName: Record<string, number>;
@@ -29,7 +29,7 @@ export const orderFieldsTransformer: DataTransformerInfo<OrderFieldsTransformerO
 
       return data.map(frame => ({
         ...frame,
-        fields: orderer(frame.fields),
+        fields: orderer(frame.fields, data, frame),
       }));
     };
   },
@@ -39,7 +39,11 @@ export const createOrderFieldsComparer = (indexByName: Record<string, number>) =
   return indexOfField(a, indexByName) - indexOfField(b, indexByName);
 };
 
-const createFieldsOrderer = (indexByName: Record<string, number>) => (fields: Field[]) => {
+const createFieldsOrderer = (indexByName: Record<string, number>) => (
+  fields: Field[],
+  data: DataFrame[],
+  frame: DataFrame
+) => {
   if (!Array.isArray(fields) || fields.length === 0) {
     return fields;
   }
@@ -47,7 +51,7 @@ const createFieldsOrderer = (indexByName: Record<string, number>) => (fields: Fi
     return fields;
   }
   const comparer = createOrderFieldsComparer(indexByName);
-  return fields.sort((a, b) => comparer(a.name, b.name));
+  return fields.sort((a, b) => comparer(getFieldDisplayName(a, frame, data), getFieldDisplayName(b, frame, data)));
 };
 
 const indexOfField = (fieldName: string, indexByName: Record<string, number>) => {