From 4b814dbcead67c9862594e7cd332c2df88f0ff89 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 10 Jan 2022 01:18:56 -0800
Subject: [PATCH] TimeSeries: Separate field unit config for axis ticks and
 other display means when stacking by percent (#43713)

---
 .../src/components/TimeSeries/utils.ts          | 17 +++++++++++++++--
 public/app/plugins/panel/timeseries/utils.ts    |  7 +------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts
index 994fd0bc5db..2e7bfb1a513 100644
--- a/packages/grafana-ui/src/components/TimeSeries/utils.ts
+++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts
@@ -11,6 +11,7 @@ import {
   getFieldColorModeForField,
   getFieldSeriesColor,
   getFieldDisplayName,
+  getDisplayProcessor,
 } from '@grafana/data';
 
 import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
@@ -23,6 +24,7 @@ import {
   ScaleDirection,
   ScaleOrientation,
   VizLegendOptions,
+  StackingMode,
 } from '@grafana/schema';
 import { collectStackingGroups, orderIdsByCalcs, preparePlotData } from '../uPlot/utils';
 import uPlot from 'uplot';
@@ -135,8 +137,19 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
     // TODO: skip this for fields with custom renderers?
     field.state!.seriesIndex = seriesIndex++;
 
-    const fmt = field.display ?? defaultFormatter;
-
+    let fmt = field.display ?? defaultFormatter;
+    if (field.config.custom?.stacking?.mode === StackingMode.Percent) {
+      fmt = getDisplayProcessor({
+        field: {
+          ...field,
+          config: {
+            ...field.config,
+            unit: 'percentunit',
+          },
+        },
+        theme,
+      });
+    }
     const scaleKey = buildScaleKey(config);
     const colorMode = getFieldColorModeForField(field);
     const scaleColor = getFieldSeriesColor(field, theme);
diff --git a/public/app/plugins/panel/timeseries/utils.ts b/public/app/plugins/panel/timeseries/utils.ts
index 35608db3feb..b38e34cd238 100644
--- a/public/app/plugins/panel/timeseries/utils.ts
+++ b/public/app/plugins/panel/timeseries/utils.ts
@@ -7,7 +7,7 @@ import {
   GrafanaTheme2,
   isBooleanUnit,
 } from '@grafana/data';
-import { GraphFieldConfig, LineInterpolation, StackingMode } from '@grafana/schema';
+import { GraphFieldConfig, LineInterpolation } from '@grafana/schema';
 
 /**
  * Returns null if there are no graphable fields
@@ -47,11 +47,6 @@ export function prepareGraphableFields(series: DataFrame[], theme: GrafanaTheme2
             ),
           };
 
-          if (copy.config.custom?.stacking?.mode === StackingMode.Percent) {
-            copy.config.unit = 'percentunit';
-            copy.display = getDisplayProcessor({ field: copy, theme });
-          }
-
           fields.push(copy);
           break; // ok
         case FieldType.boolean: