diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx
index 62db2010a6..12f1d9ed96 100644
--- a/packages/charts/src/components/legend/legend_item.tsx
+++ b/packages/charts/src/components/legend/legend_item.tsx
@@ -32,14 +32,12 @@ export const prepareLegendValues = (
   totalItems: number,
   extraValues: Map<string, LegendItemExtraValues>,
 ) => {
-  return legendValues
-    .map((legendValue) => {
-      if (legendValue === LegendValue.Value || legendValue === LegendValue.CurrentAndLastValue) {
-        return getExtra(extraValues, item, totalItems);
-      }
-      return item.values.find(({ type }) => type === legendValue);
-    })
-    .filter(isDefined);
+  return legendValues.map((legendValue) => {
+    if (legendValue === LegendValue.Value || legendValue === LegendValue.CurrentAndLastValue) {
+      return getExtra(extraValues, item, totalItems);
+    }
+    return item.values.find(({ type }) => type === legendValue);
+  });
 };
 
 /** @internal */
@@ -67,7 +65,7 @@ export const LegendListItem: React.FC<LegendItemProps> = (props) => {
     'echLegendItem--vertical': positionConfig.direction === LayoutDirection.Vertical,
   });
 
-  const legendValueItems = prepareLegendValues(item, legendValues, totalItems, extraValues);
+  const legendValueItems = prepareLegendValues(item, legendValues, totalItems, extraValues).filter(isDefined);
 
   const style: CSSProperties = flatLegend
     ? {}
@@ -116,12 +114,15 @@ export const LegendListItem: React.FC<LegendItemProps> = (props) => {
           totalSeriesCount={totalItems}
           hiddenSeriesCount={hiddenItems}
         />
-        {!isSeriesHidden &&
-          legendValueItems.map((legendValueItem) => (
-            <div key={legendValueItem.label} className="echLegendItem__legendValue">
-              {legendValueItem.label}
-            </div>
-          ))}
+        {!isSeriesHidden
+          ? legendValueItems.map((legendValueItem) =>
+              legendValueItem.label !== '' ? (
+                <div key={legendValueItem.label} className="echLegendItem__legendValue">
+                  {legendValueItem.label}
+                </div>
+              ) : null,
+            )
+          : null}
         {Action && (
           <div className="echLegendItem__action">
             <Action series={seriesIdentifiers} color={color} label={label} />
diff --git a/packages/charts/src/components/legend/legend_table/legend_table_item.tsx b/packages/charts/src/components/legend/legend_table/legend_table_item.tsx
index 4bf80aa1fe..fe3ea2684c 100644
--- a/packages/charts/src/components/legend/legend_table/legend_table_item.tsx
+++ b/packages/charts/src/components/legend/legend_table/legend_table_item.tsx
@@ -91,12 +91,8 @@ export const LegendListItem: React.FC<LegendItemProps> = (props) => {
           />
         </LegendTableCell>
 
-        {legendValueItems?.map((l, i) => {
-          return (
-            <LegendTableCell key={l?.type || i}>
-              <LegendValueComponent {...l} />
-            </LegendTableCell>
-          );
+        {legendValueItems.map((l, i) => {
+          return <LegendTableCell key={l?.type || i}>{l && <LegendValueComponent {...l} />}</LegendTableCell>;
         })}
         {ActionComponent && (
           <LegendTableCell>