diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index adf75a180e..6a90951816 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -1423,7 +1423,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#54B399",
+                "#8C55A3",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -1516,7 +1516,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#54B399",
+                  "#8C55A3",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -2057,7 +2057,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             "layout": Object {
               "colorway": Array [
                 "#3CA1C7",
-                "#54B399",
+                "#8C55A3",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -2573,7 +2573,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "layout": Object {
                 "colorway": Array [
                   "#3CA1C7",
-                  "#54B399",
+                  "#8C55A3",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -3103,7 +3103,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#54B399",
+                    "#8C55A3",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -4768,7 +4768,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#54B399",
+                "#8C55A3",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -4861,7 +4861,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#54B399",
+                  "#8C55A3",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
diff --git a/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
index 32effd5292..de94c5f728 100644
--- a/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
+++ b/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
@@ -159,10 +159,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                         onBlur={[Function]}
                         onFocus={[Function]}
                       >
-                        Aug 28, 2023 @ 20:00:00.406
-                         -
-                         
-                        Aug 28, 2023 @ 20:00:00.408
+                        Aug 28, 2023 @ 20:00:00.406 - Aug 28, 2023 @ 20:00:00.408
                       </div>
                     </EuiText>
                   </span>
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 6162e2a462..5be9321c75 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1602,7 +1602,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#54B399",
+                    "#8C55A3",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -1835,7 +1835,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#54B399",
+                    "#8C55A3",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -2333,7 +2333,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#54B399",
+                    "#8C55A3",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
index 345b4f0cad..5689366f5a 100644
--- a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`Count distribution component Renders count distribution component with
     layout={
       Object {
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "margin": Object {
@@ -120,7 +120,7 @@ exports[`Count distribution component Renders count distribution component with
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index 1529919ed1..fbaa0739f1 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -698,7 +698,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "bargroupgap": 0.030000000000000027,
         "barmode": "group",
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "hovermode": "closest",
@@ -756,7 +756,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "bargroupgap": 0.030000000000000027,
           "barmode": "group",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
index bb2075dc0f..4acd7cae05 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Gauge component Renders gauge component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 013b2106b6..fe48e32283 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -710,7 +710,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "margin": Object {
@@ -763,7 +763,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index f56257ba03..1857b0bc59 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Histogram component Renders histogram component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -711,7 +711,7 @@ exports[`Histogram component Renders histogram component 1`] = `
       Object {
         "barmode": "group",
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "legend": Object {
@@ -767,7 +767,7 @@ exports[`Histogram component Renders histogram component 1`] = `
           "autosize": true,
           "barmode": "group",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index fd5d086b17..65d40ade36 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -698,7 +698,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "bargroupgap": 0.030000000000000027,
         "barmode": "group",
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "hovermode": "closest",
@@ -756,7 +756,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
           "bargroupgap": 0.030000000000000027,
           "barmode": "group",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 87f23bc1d4..ecab56aa68 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Line component Renders line component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -697,7 +697,7 @@ exports[`Line component Renders line component 1`] = `
       Object {
         "autosize": true,
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "legend": Object {
@@ -749,7 +749,7 @@ exports[`Line component Renders line component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
index 0d2c4eea3b..ee792c6250 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Metrics component Renders Metrics component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -618,7 +618,7 @@ exports[`Metrics component Renders Metrics component 1`] = `
           "layout": Object {
             "colorway": Array [
               "#3CA1C7",
-              "#54B399",
+              "#8C55A3",
               "#DB748A",
               "#F2BE4B",
               "#68CCC2",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 67b8a13606..2efd9326f6 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Pie component Renders pie component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -686,7 +686,7 @@ exports[`Pie component Renders pie component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "grid": Object {
           "columns": 0,
@@ -733,7 +733,7 @@ exports[`Pie component Renders pie component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "grid": Object {
             "columns": 0,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 483149850d..dbe192ad4a 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Treemap component Renders treemap component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -723,7 +723,7 @@ exports[`Treemap component Renders treemap component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "margin": Object {
@@ -790,7 +790,7 @@ exports[`Treemap component Renders treemap component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#54B399",
+            "#8C55A3",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
index 5ed2e0512b..af24195dd4 100644
--- a/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
+++ b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Ploty base component Renders Ploty base component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#54B399",
+        "#8C55A3",
       ],
       "height": 220,
       "margin": Object {
@@ -101,7 +101,7 @@ exports[`Ploty base component Renders Ploty base component 1`] = `
         "autosize": true,
         "barmode": "stack",
         "colorway": Array [
-          "#54B399",
+          "#8C55A3",
         ],
         "height": 220,
         "hovermode": "closest",