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>
       );
     }