From 384baace93f0f542d55f3d145006f7a51eb873b0 Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Fri, 17 May 2024 10:34:05 +0200
Subject: [PATCH] feat(legend): Improve interactions legend labels (#2418)

* :sparkles: First draft

* :sparkles: Offer new api for interaction labels

* :wrench: Tweak story

* :wrench: Fix checks

* test(vrt): update screenshots [skip ci]

* :white_check_mark: Fix test

* :bug: Fix issue

* :white_check_mark: Add test

* :camera_flash: Update snapshots

* :fire: Remove  api for labels

* :fire: Remove prop fro Settings

* :fire: Update doc

* :camera_flash: Update snapshots

* :sparkles: Make label aware of outer context

* :camera_flash: Update snapshots

* :white_check_mark: Add test to check interactive title on various scenarios

---------

Co-authored-by: elastic-datavis[bot] <98618603+elastic-datavis[bot]@users.noreply.github.com>
---
 ...end-item-interaction-help-chrome-linux.png | Bin 0 -> 14679 bytes
 e2e/tests/legend_stories.test.ts              |  46 ++++++++++-
 .../__snapshots__/chart.test.tsx.snap         |   4 +-
 .../legend/__snapshots__/legend.test.tsx.snap |  72 +++++++++---------
 .../charts/src/components/legend/label.tsx    |  47 ++++++++++--
 .../charts/src/components/legend/legend.tsx   |   1 +
 .../src/components/legend/legend_item.tsx     |   4 +
 7 files changed, 130 insertions(+), 44 deletions(-)
 create mode 100644 e2e/screenshots/all.test.ts-snapshots/baselines/legend/legend-item-interaction-help-chrome-linux.png

diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/legend/legend-item-interaction-help-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/legend/legend-item-interaction-help-chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..c557f23cb8f441e751e3cc5e2a3530f953e095b3
GIT binary patch
literal 14679
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

literal 0
HcmV?d00001

diff --git a/e2e/tests/legend_stories.test.ts b/e2e/tests/legend_stories.test.ts
index a5ddee3a1d..c41970e1e6 100644
--- a/e2e/tests/legend_stories.test.ts
+++ b/e2e/tests/legend_stories.test.ts
@@ -182,12 +182,56 @@ test.describe('Legend stories', () => {
         Array.from(document.getElementsByClassName('echLegendItem'), (e) => e.outerHTML),
       );
       (await labels).forEach((label, index) => {
-        if (label.includes('Activate to show series')) {
+        const ariaInteractionLabel = label.split('; ')[1];
+        if (ariaInteractionLabel && /show/.test(ariaInteractionLabel)) {
           hiddenResults.push(index);
         }
       });
       expect(hiddenResults).toEqual([1]);
     });
+
+    test('title interactive help should change according to the legend context for the item', async ({ page }) => {
+      await common.loadElementFromURL(page)(
+        'http://localhost:9001/?path=/story/legend--positioning&knob-position=right',
+        '.echLegendItem__label',
+      );
+
+      // check that the first item has a "isolate" title as second line
+      const initialLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+
+      expect(initialLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        new Array(initialLabels.length).fill('Click: isolate series'),
+      );
+
+      // click on the first item
+      await page.keyboard.press('Tab');
+      await page.keyboard.press(`Enter`);
+
+      // now check that it has a "show all" title this time
+      // check that all the other items (hidden) have a "show" title
+      const secondRoundLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+      expect(secondRoundLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        ['Click: show all series'].concat(new Array(secondRoundLabels.length - 1).fill('Click: show series')),
+      );
+
+      // now click on the second item (hidden)
+      await page.keyboard.press('Tab');
+      await page.keyboard.press(`Enter`);
+
+      // check that the first two items have a "hide" title and the rest have a "show" title
+      const thirdRoundLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+      expect(thirdRoundLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        ['Click: hide series', 'Click: hide series'].concat(
+          new Array(secondRoundLabels.length - 2).fill('Click: show series'),
+        ),
+      );
+    });
   });
 
   test.describe('Extra values', () => {
diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
index 3695910d87..635170f314 100644
--- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`Chart should render the legend name test 1`] = `
             <div className="echLegend echLegend--debug echLegend--vertical echLegend--right echLegend--top" style={{...}} dir="ltr">
               <div style={{...}} className="echLegendListContainer">
                 <ul style={{...}} className="echLegendList">
-                  <LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={1} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+                  <LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={1} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
                     <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="test">
                       <div className="background" />
                       <div className="colorWrapper">
@@ -42,7 +42,7 @@ exports[`Chart should render the legend name test 1`] = `
                           </div>
                         </ForwardRef>
                       </div>
-                      <Label label="test" options={{...}} isToggleable={false} onToggle={[undefined]} isSeriesHidden={false}>
+                      <Label label="test" options={{...}} isToggleable={false} onToggle={[undefined]} isSeriesHidden={false} totalSeriesCount={1} hiddenSeriesCount={0}>
                         <div dir="ltr" className="echLegendItem__label echLegendItem__label--singleline" title="test" style={{...}}>
                           test
                         </div>
diff --git a/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap b/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap
index 1d65208fad..e865ba3aa8 100644
--- a/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `
-"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splita">
     <div className="background" />
     <div className="colorWrapper">
@@ -17,13 +17,13 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
         </button>
       </ForwardRef>
     </div>
-    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Activate to hide series in graph">
+    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Click: isolate series\\nCtrl + click: hide series">
         splita
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitb">
     <div className="background" />
     <div className="colorWrapper">
@@ -39,13 +39,13 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Activate to hide series in graph">
+    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Click: isolate series\\nCtrl + click: hide series">
         splitb
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitc">
     <div className="background" />
     <div className="colorWrapper">
@@ -61,13 +61,13 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Activate to hide series in graph">
+    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Click: isolate series\\nCtrl + click: hide series">
         splitc
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitd">
     <div className="background" />
     <div className="colorWrapper">
@@ -83,8 +83,8 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Activate to hide series in graph">
+    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Click: isolate series\\nCtrl + click: hide series">
         splitd
       </div>
     </Label>
@@ -93,7 +93,7 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
 `;
 
 exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `
-"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splita">
     <div className="background" />
     <div className="colorWrapper">
@@ -109,13 +109,13 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
         </button>
       </ForwardRef>
     </div>
-    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Activate to hide series in graph">
+    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Click: isolate series\\nCtrl + click: hide series">
         splita
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitb">
     <div className="background" />
     <div className="colorWrapper">
@@ -131,13 +131,13 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Activate to hide series in graph">
+    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Click: isolate series\\nCtrl + click: hide series">
         splitb
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitc">
     <div className="background" />
     <div className="colorWrapper">
@@ -153,13 +153,13 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Activate to hide series in graph">
+    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Click: isolate series\\nCtrl + click: hide series">
         splitc
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitd">
     <div className="background" />
     <div className="colorWrapper">
@@ -175,8 +175,8 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Activate to hide series in graph">
+    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Click: isolate series\\nCtrl + click: hide series">
         splitd
       </div>
     </Label>
@@ -199,7 +199,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
 `;
 
 exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `
-"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+"<LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splita">
     <div className="background" />
     <div className="colorWrapper">
@@ -215,8 +215,8 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
         </button>
       </ForwardRef>
     </div>
-    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Activate to hide series in graph">
+    <Label label="splita" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splita\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splita; Click: isolate series\\nCtrl + click: hide series">
         splita
       </div>
     </Label>
@@ -234,7 +234,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
       </button>
     </div>
   </Component>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitb">
     <div className="background" />
     <div className="colorWrapper">
@@ -250,13 +250,13 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Activate to hide series in graph">
+    <Label label="splitb" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitb\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitb; Click: isolate series\\nCtrl + click: hide series">
         splitb
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitc">
     <div className="background" />
     <div className="colorWrapper">
@@ -272,13 +272,13 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Activate to hide series in graph">
+    <Label label="splitc" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitc\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitc; Click: isolate series\\nCtrl + click: hide series">
         splitc
       </div>
     </Label>
   </li>
-</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+</LegendItem><LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={4} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: { calls: [], contexts: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], withImplementation: [Function: bound withImplementation], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[Function (anonymous)]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
   <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="splitd">
     <div className="background" />
     <div className="colorWrapper">
@@ -294,8 +294,8 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
         </button>
       </ForwardRef>
     </div>
-    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false}>
-      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Activate to hide series in graph">
+    <Label label="splitd" options={{...}} isToggleable={true} onToggle={[Function (anonymous)]} isSeriesHidden={false} totalSeriesCount={4} hiddenSeriesCount={0}>
+      <div role="button" tabIndex={0} dir="ltr" className="echLegendItem__label echLegendItem__label--clickable echLegendItem__label--singleline" title="splitd\\nClick: isolate series\\nCtrl + click: hide series" onClick={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} aria-pressed={false} style={{...}} aria-label="splitd; Click: isolate series\\nCtrl + click: hide series">
         splitd
       </div>
     </Label>
diff --git a/packages/charts/src/components/legend/label.tsx b/packages/charts/src/components/legend/label.tsx
index 7f22af3d90..0b8ac8ecc6 100644
--- a/packages/charts/src/components/legend/label.tsx
+++ b/packages/charts/src/components/legend/label.tsx
@@ -18,15 +18,52 @@ interface LabelProps {
   isToggleable?: boolean;
   onToggle?: (negate: boolean) => void;
   options: LegendLabelOptions;
+  hiddenSeriesCount: number;
+  totalSeriesCount: number;
 }
 
 const isAppleDevice = typeof window !== 'undefined' && /Mac|iPhone|iPad/.test(window.navigator.userAgent);
 
+const modifierKey = isAppleDevice ? '⌘ (Command)' : 'Ctrl';
+const isolateSeriesMessage = 'isolate series';
+const showAllSeriesMessage = 'show all series';
+const showSeriesMessage = 'show series';
+const hideSeriesMessage = 'hide series';
+
+function getInteractivityTitle(isSeriesVisible: boolean, hiddenSeries: number, allSeries: number) {
+  if (isSeriesVisible) {
+    if (allSeries - hiddenSeries === 1) {
+      return `
+Click: ${showAllSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+    }
+    if (hiddenSeries > 0) {
+      return `
+Click: ${hideSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+    }
+    return `
+Click: ${isolateSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+  }
+  return `
+Click: ${showSeriesMessage}
+${modifierKey} + click: ${showSeriesMessage}`;
+}
+
 /**
  * Label component used to display text in legend item
  * @internal
  */
-export function Label({ label, isToggleable, onToggle, isSeriesHidden, options }: LabelProps) {
+export function Label({
+  label,
+  isToggleable,
+  onToggle,
+  isSeriesHidden,
+  options,
+  hiddenSeriesCount,
+  totalSeriesCount,
+}: LabelProps) {
   const maxLines = Math.abs(options.maxLines);
   const labelClassNames = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(onToggle),
@@ -49,6 +86,8 @@ export function Label({ label, isToggleable, onToggle, isSeriesHidden, options }
   const title = options.maxLines > 0 ? label : ''; // full text already visible
   const clampStyles = maxLines > 1 ? { WebkitLineClamp: maxLines } : {};
 
+  const interactionsGuidanceText = getInteractivityTitle(!isSeriesHidden, hiddenSeriesCount, totalSeriesCount);
+
   return isToggleable ? (
     // This div is required to allow multiline text truncation, all ARIA requirements are still met
     // https://stackoverflow.com/questions/68673034/webkit-line-clamp-does-not-apply-to-buttons
@@ -57,14 +96,12 @@ export function Label({ label, isToggleable, onToggle, isSeriesHidden, options }
       tabIndex={0}
       dir={dir}
       className={labelClassNames}
-      title={title}
+      title={`${title}${interactionsGuidanceText}`}
       onClick={onClick}
       onKeyDown={onKeyDown}
       aria-pressed={isSeriesHidden}
       style={clampStyles}
-      aria-label={
-        isSeriesHidden ? `${label}; Activate to show series in graph` : `${label}; Activate to hide series in graph`
-      }
+      aria-label={`${label}; ${interactionsGuidanceText.replace('\n', '')}`} // put it in a single line
     >
       {label}
     </div>
diff --git a/packages/charts/src/components/legend/legend.tsx b/packages/charts/src/components/legend/legend.tsx
index af48b8ee98..ebdd32b9ce 100644
--- a/packages/charts/src/components/legend/legend.tsx
+++ b/packages/charts/src/components/legend/legend.tsx
@@ -96,6 +96,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
     positionConfig,
     isMostlyRTL,
     totalItems: items.length,
+    hiddenItems: items.filter(({ isSeriesHidden }) => isSeriesHidden).length,
     extraValues: props.extraValues,
     legendValues: config.legendValues,
     onMouseOut: config.onLegendItemOut,
diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx
index 6e3f0e1cd4..7047eed27c 100644
--- a/packages/charts/src/components/legend/legend_item.tsx
+++ b/packages/charts/src/components/legend/legend_item.tsx
@@ -44,6 +44,7 @@ export interface LegendItemProps {
   item: LegendItem;
   flatLegend: boolean;
   totalItems: number;
+  hiddenItems: number;
   positionConfig: LegendPositionConfig;
   extraValues: Map<string, LegendItemExtraValues>;
   legendValues: Array<LegendValue>;
@@ -174,6 +175,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
       legendValues,
       colorPicker,
       totalItems,
+      hiddenItems,
       action: Action,
       positionConfig,
       labelOptions,
@@ -231,6 +233,8 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
             isToggleable={totalItems > 1 && item.isToggleable}
             onToggle={this.onLabelToggle(seriesIdentifiers)}
             isSeriesHidden={isSeriesHidden}
+            totalSeriesCount={totalItems}
+            hiddenSeriesCount={hiddenItems}
           />
           {legendValue && !isSeriesHidden && (
             <div className="echLegendItem__extra" title={`${legendValue.label}`}>