diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png
index 50128342374..935721b7736 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png
index 6ac96cbe9c8..b33a52eeb02 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png
index e6814e9a13d..28a4f3d1cee 100644
Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png
index 084b69896c5..9e713178305 100644
Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png differ
diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
index 2d4e865b134..da5fc508e6c 100644
--- a/src/components/__snapshots__/chart.test.tsx.snap
+++ b/src/components/__snapshots__/chart.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"background\\"></div><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
diff --git a/src/components/legend/__snapshots__/legend.test.tsx.snap b/src/components/legend/__snapshots__/legend.test.tsx.snap
index 73439392f5a..0b27c44ae68 100644
--- a/src/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/src/components/legend/__snapshots__/legend.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
 
-exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
 
 exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"<div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div>"`;
 
-exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><div class=\\"background\\"></div><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
index 10fbecf533e..7b653ee4b3a 100644
--- a/src/components/legend/_legend_item.scss
+++ b/src/components/legend/_legend_item.scss
@@ -6,7 +6,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  position: relative;
 
   &:not(&--hidden) {
     .echLegendItem__color--changable {
@@ -16,12 +16,20 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     }
   }
 
-  &:hover {
+  &:hover .background {
     background-color: $euiColorLightestShade;
   }
 
+  .background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+
   &__action {
-    height: 100%;
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -80,19 +88,17 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
 
   &--right,
   &--left {
-    margin-top: $legendItemVerticalPadding;
-    margin-bottom: $legendItemVerticalPadding;
-  }
+    padding-top: $legendItemVerticalPadding / 2;
+    padding-bottom: $legendItemVerticalPadding / 2;
 
-  @include internetExplorerOnly {
-    &--bottom,
-    &--top {
-      width: $echLegendMaxWidth;
-      margin-right: $euiSizeL;
+    &:first-of-type {
+      margin-top: $legendItemVerticalPadding / 2;
     }
 
-    margin-top: $legendItemVerticalPadding;
-    margin-bottom: $legendItemVerticalPadding;
+    .background {
+      margin-top: $legendItemVerticalPadding / 2;
+      margin-bottom: $legendItemVerticalPadding / 2;
+    }
   }
 
   &--hidden {
diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
index bcd1af1673d..bcc85c1d14d 100644
--- a/src/components/legend/legend_item.tsx
+++ b/src/components/legend/legend_item.tsx
@@ -230,6 +230,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
           style={style}
           data-ech-series-name={label}
         >
+          <div className="background" />
           <ItemColor
             ref={this.colorRef}
             color={color}