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 0000000000..c557f23cb8
Binary files /dev/null and b/e2e/screenshots/all.test.ts-snapshots/baselines/legend/legend-item-interaction-help-chrome-linux.png differ
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}`}>