From 43748f257826e77342b5f4f99f7145806fcf3140 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 3 Dec 2021 06:43:36 -0500
Subject: [PATCH] BarGauge: Unfilled area shown with data links (#42676)
 (#42730)

Closes #37623

(cherry picked from commit f104741448935628d19565722575ac6625b59739)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 public/app/plugins/panel/bargauge/BarGaugePanel.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index 2288c95b756..3a54036363c 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -28,7 +28,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
 
     let processor: DisplayProcessor | undefined = undefined;
     if (view && isNumber(colIndex)) {
-      processor = view!.getFieldDisplayProcessor(colIndex as number);
+      processor = view.getFieldDisplayProcessor(colIndex);
     }
 
     return (
@@ -57,13 +57,14 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
 
     if (hasLinks && getLinks) {
       return (
-        <DataLinksContextMenu links={getLinks} config={value.field}>
-          {(api) => {
-            return this.renderComponent(valueProps, api);
-          }}
-        </DataLinksContextMenu>
+        <div style={{ width: '100%' }}>
+          <DataLinksContextMenu links={getLinks} config={value.field}>
+            {(api) => this.renderComponent(valueProps, api)}
+          </DataLinksContextMenu>
+        </div>
       );
     }
+
     return this.renderComponent(valueProps, {});
   };