diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index 7072eae680f..1a7fde5392e 100644
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -208,7 +208,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
   };
 
   // Color by value
-  let getColor: ((seriesIdx: number, valueIdx: number) => string) | undefined = undefined;
+  let getColor: ((seriesIdx: number, valueIdx: number, value: number) => string) | undefined = undefined;
 
   let fillOpacity = 1;
 
@@ -217,7 +217,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
     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: number) => disp(value).color!;
   }
 
   const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {