diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
index f5c03bfe94..cd3c4e31a7 100644
--- a/src/components/legend/_legend_item.scss
+++ b/src/components/legend/_legend_item.scss
@@ -52,7 +52,7 @@
   text-align: right;
   font-feature-settings: 'tnum';
 
-  &.echLegendItem__displayValue--hidden {
+  &--hidden {
     display: none;
   }
 }
diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx
index ec9b68f90e..f984b2fe7a 100644
--- a/src/components/legend/legend.tsx
+++ b/src/components/legend/legend.tsx
@@ -48,27 +48,7 @@ class LegendComponent extends React.Component<LegendProps> {
     return (
       <div className={legendClasses} style={paddingStyle} id={legendId} aria-hidden={legendCollapsed.get()}>
         <div className="echLegendListContainer">
-          <div className="echLegendList">
-            {[...legendItems.values()].map((item) => {
-              // const { isLegendItemVisible } = item;
-
-              // const legendItemProps = {
-              //   key: item.key,
-              //   className: classNames('echLegendList__item', {
-              //     'echLegendList__item--hidden': !isLegendItemVisible,
-              //   }),
-              //   onMouseEnter: this.onLegendItemMouseover(item.key),
-              //   onMouseLeave: this.onLegendItemMouseout,
-              // };
-
-              return this.renderLegendElement(
-                item,
-                item.key,
-                this.onLegendItemMouseover(item.key),
-                this.onLegendItemMouseout,
-              );
-            })}
-          </div>
+          <div className="echLegendList">{[...legendItems.values()].map(this.renderLegendElement)}</div>
         </div>
       </div>
     );
@@ -82,23 +62,28 @@ class LegendComponent extends React.Component<LegendProps> {
     this.props.chartStore!.onLegendItemOut();
   };
 
-  private renderLegendElement = (
-    { color, label, isSeriesVisible, displayValue }: SeriesLegendItem,
-    legendItemKey: string,
-    onMouseEnter: (event: React.MouseEvent) => void,
-    onMouseLeave: () => void,
-  ) => {
+  private renderLegendElement = (item: SeriesLegendItem) => {
+    const { key, displayValue } = item;
     const tooltipValues = this.props.chartStore!.legendItemTooltipValues.get();
     let tooltipValue;
 
-    if (tooltipValues && tooltipValues.get(legendItemKey)) {
-      tooltipValue = tooltipValues.get(legendItemKey);
+    if (tooltipValues && tooltipValues.get(key)) {
+      tooltipValue = tooltipValues.get(key);
     }
 
-    const display = tooltipValue != null ? tooltipValue : displayValue.formatted;
-    const props = { color, label, isSeriesVisible, legendItemKey, displayValue: display };
+    const newDisplayValue = tooltipValue != null ? tooltipValue : displayValue.formatted;
+    console.log('renderLegendElement', item.key, item.isLegendItemVisible);
 
-    return <LegendItem {...props} key={legendItemKey} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />;
+    return (
+      <LegendItem
+        {...item}
+        key={key}
+        legendItemKey={key}
+        displayValue={newDisplayValue}
+        onMouseEnter={this.onLegendItemMouseover(key)}
+        onMouseLeave={this.onLegendItemMouseout}
+      />
+    );
   };
 }
 
diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
index c72937d5d4..d23ac9df9c 100644
--- a/src/components/legend/legend_item.tsx
+++ b/src/components/legend/legend_item.tsx
@@ -11,6 +11,7 @@ interface LegendItemProps {
   color: string | undefined;
   label: string | undefined;
   isSeriesVisible?: boolean;
+  isLegendItemVisible?: boolean;
   displayValue: string;
   onMouseEnter: (event: React.MouseEvent) => void;
   onMouseLeave: () => void;
@@ -44,7 +45,7 @@ class LegendItemComponent extends React.Component<LegendItemProps, LegendItemSta
 
   render() {
     const { legendItemKey } = this.props;
-    const { color, label, isSeriesVisible, displayValue, onMouseEnter, onMouseLeave } = this.props;
+    const { color, label, isSeriesVisible, isLegendItemVisible, displayValue, onMouseEnter, onMouseLeave } = this.props;
 
     const onTitleClick = this.onVisibilityClick(legendItemKey);
 
@@ -54,7 +55,9 @@ class LegendItemComponent extends React.Component<LegendItemProps, LegendItemSta
     const hasTitleClickListener = Boolean(this.props.chartStore!.onLegendItemClickListener);
     const itemClasses = classNames('echLegendItem', {
       'echLegendItem-isHidden': !isSeriesVisible,
+      'echLegendItem__displayValue--hidden': !isLegendItemVisible,
     });
+
     return (
       <div className={itemClasses} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         {this.renderColor(this.toggleColorPicker, color, isSeriesVisible)}