From 344e99e069a583fbd185cc434cdb03bd7d9a1934 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 23 Oct 2023 15:01:46 -0500
Subject: [PATCH] VizLegend: Omit sectionRight when no right axis exists
 (#76923)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../components/VizLegend/VizLegendList.tsx    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
index 8bba52a7f37..8a30511c012 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
@@ -56,26 +56,25 @@ export const VizLegendList = <T extends unknown>({
     }
     case 'bottom':
     default: {
+      const leftItems = items.filter((item) => item.yAxis === 1);
+      const rightItems = items.filter((item) => item.yAxis !== 1);
+
       const renderItem = (item: VizLegendItem<T>, index: number) => {
         return <span className={styles.itemBottom}>{itemRenderer!(item, index)}</span>;
       };
 
       return (
         <div className={cx(styles.bottomWrapper, className)}>
-          <div className={styles.section}>
-            <InlineList
-              items={items.filter((item) => item.yAxis === 1)}
-              renderItem={renderItem}
-              getItemKey={getItemKey}
-            />
-          </div>
-          <div className={cx(styles.section, styles.sectionRight)}>
-            <InlineList
-              items={items.filter((item) => item.yAxis !== 1)}
-              renderItem={renderItem}
-              getItemKey={getItemKey}
-            />
-          </div>
+          {leftItems.length > 0 && (
+            <div className={styles.section}>
+              <InlineList items={leftItems} renderItem={renderItem} getItemKey={getItemKey} />
+            </div>
+          )}
+          {rightItems.length > 0 && (
+            <div className={cx(styles.section, styles.sectionRight)}>
+              <InlineList items={rightItems} renderItem={renderItem} getItemKey={getItemKey} />
+            </div>
+          )}
         </div>
       );
     }