diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index ed92a49d1db..3b8a5411b48 100755
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -188,7 +188,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({ data, options, w
   };
 
   // Color by value
-  let getColor: ((seriesIdx: number, valueIdx: number) => string) | undefined = undefined;
+  let getColor: ((seriesIdx: number, valueIdx: number, value: any) => string) | undefined = undefined;
 
   let fillOpacity = 1;
 
@@ -197,7 +197,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({ data, options, w
     const disp = colorByField.display!;
     fillOpacity = (colorByField.config.custom.fillOpacity ?? 100) / 100;
     // gradientMode? ignore?
-    getColor = (seriesIdx: number, valueIdx: number) => disp(colorByField.values.get(valueIdx)).color!;
+    getColor = (seriesIdx: number, valueIdx: number, value: any) => disp(value).color!;
   }
 
   const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {