diff --git a/src/components/legend.tsx b/src/components/legend.tsx
index c5b7526c0b..ba07c3f441 100644
--- a/src/components/legend.tsx
+++ b/src/components/legend.tsx
@@ -90,6 +90,7 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
                 key: index,
                 className: 'euiChartLegendList__item',
                 onMouseOver: this.onLegendItemMouseover(index),
+                onMouseOut: this.onLegendItemMouseout,
               };
 
               return (
@@ -107,6 +108,10 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
   private onLegendItemMouseover = (legendItemIndex: number) => () => {
     this.props.chartStore!.updateHighlightedLegendItem(legendItemIndex);
   }
+
+  private onLegendItemMouseout = () => {
+    this.props.chartStore!.updateHighlightedLegendItem(null);
+  }
 }
 function LegendElement({ color, label }: Partial<LegendItem>) {
   return (
diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts
index 19f386a64d..e541206fd7 100644
--- a/src/state/chart_state.ts
+++ b/src/state/chart_state.ts
@@ -230,7 +230,7 @@ export class ChartStore {
     return this.xScale.type !== ScaleType.Ordinal && Boolean(this.onBrushEndListener);
   }
 
-  updateHighlightedLegendItem(legendItemIndex: number) {
+  updateHighlightedLegendItem(legendItemIndex: number | null) {
     if (legendItemIndex !== this.highlightedLegendItemIndex) {
       this.highlightedLegendItemIndex = legendItemIndex;
       this.computeChart();