diff --git a/package.json b/package.json
index f1cb2097b5b1d..41e3f180e49b8 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "@elastic/apm-rum": "^5.17.0",
     "@elastic/apm-rum-core": "^5.23.0",
     "@elastic/apm-rum-react": "^2.0.6",
-    "@elastic/charts": "70.1.0",
+    "@elastic/charts": "70.1.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/ebt": "^1.2.1",
     "@elastic/ecs": "^8.11.5",
diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap
index 0e4da47687814..b53fb915f6f80 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap
@@ -18,6 +18,12 @@ exports[`GaugeComponent renders the chart 1`] = `
         },
         "areaSeriesStyle": Object {
           "area": Object {
+            "dimmed": Object {
+              "fill": "rgba(202, 211, 226, 0.15)",
+              "texture": Object {
+                "opacity": 0.25,
+              },
+            },
             "opacity": 0.3,
             "visible": true,
           },
@@ -46,11 +52,22 @@ exports[`GaugeComponent renders the chart 1`] = `
             "visible": "auto",
           },
           "line": Object {
+            "dimmed": Object {
+              "stroke": "rgba(202, 211, 226, 0.5)",
+              "strokeWidth": 1,
+            },
+            "focused": Object {
+              "strokeWidth": 2.5,
+            },
             "opacity": 1,
             "strokeWidth": 2,
             "visible": true,
           },
           "point": Object {
+            "dimmed": Object {
+              "fill": "rgba(202, 211, 226, 0.15)",
+              "stroke": "rgba(202, 211, 226, 0.15)",
+            },
             "fill": "__use__series__color__",
             "opacity": 1,
             "radius": 3,
@@ -167,6 +184,9 @@ exports[`GaugeComponent renders the chart 1`] = `
         },
         "bubbleSeriesStyle": Object {
           "point": Object {
+            "dimmed": Object {
+              "opacity": 0.25,
+            },
             "fill": "__use__series__color__",
             "opacity": 1,
             "radius": 2,
@@ -216,7 +236,7 @@ exports[`GaugeComponent renders the chart 1`] = `
         },
         "crosshair": Object {
           "band": Object {
-            "fill": "rgba(23 80 186 / 0.04)",
+            "fill": "rgba(23, 80, 186, 0.04)",
             "visible": true,
           },
           "crossLine": Object {
@@ -306,11 +326,11 @@ exports[`GaugeComponent renders the chart 1`] = `
             "visible": true,
           },
           "brushMask": Object {
-            "fill": "rgba(255 255 255 / 0.7)",
+            "fill": "rgba(255, 255, 255, 0.7)",
             "visible": true,
           },
           "brushTool": Object {
-            "fill": "rgba(255 255 255 / 0.7)",
+            "fill": "rgba(255, 255, 255, 0.7)",
             "visible": false,
           },
           "cell": Object {
@@ -419,11 +439,22 @@ exports[`GaugeComponent renders the chart 1`] = `
             "visible": "auto",
           },
           "line": Object {
+            "dimmed": Object {
+              "stroke": "rgba(202, 211, 226, 0.35)",
+              "strokeWidth": 1,
+            },
+            "focused": Object {
+              "strokeWidth": 2.5,
+            },
             "opacity": 1,
             "strokeWidth": 2,
             "visible": true,
           },
           "point": Object {
+            "dimmed": Object {
+              "fill": "rgba(202, 211, 226, 0.15)",
+              "stroke": "rgba(202, 211, 226, 0.15)",
+            },
             "fill": "__use__series__color__",
             "opacity": 1,
             "radius": 3,
diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
index 36b7e0fdfba21..b6cd5b689961e 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
@@ -219,6 +219,12 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -247,11 +253,22 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -368,6 +385,9 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -417,7 +437,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -507,11 +527,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -620,11 +640,22 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -1103,6 +1134,12 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -1131,11 +1168,22 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -1252,6 +1300,9 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -1301,7 +1352,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -1391,11 +1442,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -1504,11 +1555,22 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -2047,6 +2109,12 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -2075,11 +2143,22 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -2196,6 +2275,9 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -2245,7 +2327,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -2335,11 +2417,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -2448,11 +2530,22 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -2993,6 +3086,12 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -3021,11 +3120,22 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -3142,6 +3252,9 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -3191,7 +3304,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -3281,11 +3394,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -3394,11 +3507,22 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -3877,6 +4001,12 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -3905,11 +4035,22 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -4026,6 +4167,9 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -4075,7 +4219,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -4165,11 +4309,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -4278,11 +4422,22 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -4716,6 +4871,12 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -4744,11 +4905,22 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -4865,6 +5037,9 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -4914,7 +5089,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -5004,11 +5179,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -5117,11 +5292,22 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
index 4e9ca82fd4d83..c12923fc0946b 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
@@ -578,6 +578,12 @@ exports[`XYChart component it renders area 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -606,11 +612,22 @@ exports[`XYChart component it renders area 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -727,6 +744,9 @@ exports[`XYChart component it renders area 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -776,7 +796,7 @@ exports[`XYChart component it renders area 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -866,11 +886,11 @@ exports[`XYChart component it renders area 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -979,11 +999,22 @@ exports[`XYChart component it renders area 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -2135,6 +2166,12 @@ exports[`XYChart component it renders bar 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -2163,11 +2200,22 @@ exports[`XYChart component it renders bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -2284,6 +2332,9 @@ exports[`XYChart component it renders bar 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -2333,7 +2384,7 @@ exports[`XYChart component it renders bar 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -2423,11 +2474,11 @@ exports[`XYChart component it renders bar 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -2536,11 +2587,22 @@ exports[`XYChart component it renders bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -3692,6 +3754,12 @@ exports[`XYChart component it renders horizontal bar 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -3720,11 +3788,22 @@ exports[`XYChart component it renders horizontal bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -3841,6 +3920,9 @@ exports[`XYChart component it renders horizontal bar 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -3890,7 +3972,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -3980,11 +4062,11 @@ exports[`XYChart component it renders horizontal bar 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -4093,11 +4175,22 @@ exports[`XYChart component it renders horizontal bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -5249,6 +5342,12 @@ exports[`XYChart component it renders line 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -5277,11 +5376,22 @@ exports[`XYChart component it renders line 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -5398,6 +5508,9 @@ exports[`XYChart component it renders line 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -5447,7 +5560,7 @@ exports[`XYChart component it renders line 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -5537,11 +5650,11 @@ exports[`XYChart component it renders line 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -5650,11 +5763,22 @@ exports[`XYChart component it renders line 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -6806,6 +6930,12 @@ exports[`XYChart component it renders stacked area 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -6834,11 +6964,22 @@ exports[`XYChart component it renders stacked area 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -6955,6 +7096,9 @@ exports[`XYChart component it renders stacked area 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -7004,7 +7148,7 @@ exports[`XYChart component it renders stacked area 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -7094,11 +7238,11 @@ exports[`XYChart component it renders stacked area 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -7207,11 +7351,22 @@ exports[`XYChart component it renders stacked area 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -8363,6 +8518,12 @@ exports[`XYChart component it renders stacked bar 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -8391,11 +8552,22 @@ exports[`XYChart component it renders stacked bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -8512,6 +8684,9 @@ exports[`XYChart component it renders stacked bar 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -8561,7 +8736,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -8651,11 +8826,11 @@ exports[`XYChart component it renders stacked bar 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -8764,11 +8939,22 @@ exports[`XYChart component it renders stacked bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -9920,6 +10106,12 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -9948,11 +10140,22 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -10069,6 +10272,9 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -10118,7 +10324,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -10208,11 +10414,11 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -10321,11 +10527,22 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -11510,6 +11727,12 @@ exports[`XYChart component split chart should render split chart if both, splitR
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -11538,11 +11761,22 @@ exports[`XYChart component split chart should render split chart if both, splitR
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -11659,6 +11893,9 @@ exports[`XYChart component split chart should render split chart if both, splitR
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -11708,7 +11945,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -11798,11 +12035,11 @@ exports[`XYChart component split chart should render split chart if both, splitR
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -11911,11 +12148,22 @@ exports[`XYChart component split chart should render split chart if both, splitR
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -13311,6 +13559,12 @@ exports[`XYChart component split chart should render split chart if splitColumnA
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -13339,11 +13593,22 @@ exports[`XYChart component split chart should render split chart if splitColumnA
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -13460,6 +13725,9 @@ exports[`XYChart component split chart should render split chart if splitColumnA
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -13509,7 +13777,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -13599,11 +13867,11 @@ exports[`XYChart component split chart should render split chart if splitColumnA
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -13712,11 +13980,22 @@ exports[`XYChart component split chart should render split chart if splitColumnA
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -15105,6 +15384,12 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
               },
               "areaSeriesStyle": Object {
                 "area": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "texture": Object {
+                      "opacity": 0.25,
+                    },
+                  },
                   "opacity": 0.3,
                   "visible": true,
                 },
@@ -15133,11 +15418,22 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.5)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
@@ -15254,6 +15550,9 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
               },
               "bubbleSeriesStyle": Object {
                 "point": Object {
+                  "dimmed": Object {
+                    "opacity": 0.25,
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 2,
@@ -15303,7 +15602,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
               },
               "crosshair": Object {
                 "band": Object {
-                  "fill": "rgba(23 80 186 / 0.04)",
+                  "fill": "rgba(23, 80, 186, 0.04)",
                   "visible": true,
                 },
                 "crossLine": Object {
@@ -15393,11 +15692,11 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
                   "visible": true,
                 },
                 "brushMask": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": true,
                 },
                 "brushTool": Object {
-                  "fill": "rgba(255 255 255 / 0.7)",
+                  "fill": "rgba(255, 255, 255, 0.7)",
                   "visible": false,
                 },
                 "cell": Object {
@@ -15506,11 +15805,22 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
                   "visible": "auto",
                 },
                 "line": Object {
+                  "dimmed": Object {
+                    "stroke": "rgba(202, 211, 226, 0.35)",
+                    "strokeWidth": 1,
+                  },
+                  "focused": Object {
+                    "strokeWidth": 2.5,
+                  },
                   "opacity": 1,
                   "strokeWidth": 2,
                   "visible": true,
                 },
                 "point": Object {
+                  "dimmed": Object {
+                    "fill": "rgba(202, 211, 226, 0.15)",
+                    "stroke": "rgba(202, 211, 226, 0.15)",
+                  },
                   "fill": "__use__series__color__",
                   "opacity": 1,
                   "radius": 3,
diff --git a/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_area_chart.ts b/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_area_chart.ts
index 00eadc836ea3c..7300d94fa6e2a 100644
--- a/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_area_chart.ts
+++ b/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_area_chart.ts
@@ -90,7 +90,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should show correct chart', async function () {
-      const xAxisLabels = ['September 2015', '19th', '20th', '21st', '22nd', '23rd'];
+      const xAxisLabels = ['September 2015', '20th', '21st', '22nd', '23rd'];
       const yAxisLabels = ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400'];
       const expectedAreaChartData = [
         37, 202, 740, 1437, 1371, 751, 188, 31, 42, 202, 683, 1361, 1415, 707, 177, 27, 32, 175,
diff --git a/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_point_series_options.ts b/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_point_series_options.ts
index 899da9edf7ff1..d12500880c0f9 100644
--- a/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_point_series_options.ts
+++ b/src/platform/test/functional/apps/visualize/replaced_vislib_chart_types/_point_series_options.ts
@@ -233,7 +233,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     describe('timezones', function () {
       it('should show round labels in default timezone', async function () {
-        const expectedLabels = ['September 2015', '19th', '20th', '21st', '22nd', '23rd'];
+        const expectedLabels = ['September 2015', '20th', '21st', '22nd', '23rd'];
         await initChart();
         const labels = await visChart.getXAxisLabels(xyChartSelector);
         expect(labels.join()).to.contain(expectedLabels.join());
@@ -268,7 +268,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             const xLabels = [
               'September 22, 2015',
-              '09:00',
               '10:00',
               '11:00',
               '12:00',
@@ -328,7 +327,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
             const xLabels2 = [
               'September 22, 2015',
-              '16:00',
               '17:00',
               '18:00',
               '19:00',
diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap
index 57ed73267d37d..d551f74bc715a 100644
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap
@@ -31,6 +31,12 @@ exports[`DonutChart component passes correct props without errors for valid prop
             },
             "areaSeriesStyle": Object {
               "area": Object {
+                "dimmed": Object {
+                  "fill": "rgba(202, 211, 226, 0.15)",
+                  "texture": Object {
+                    "opacity": 0.25,
+                  },
+                },
                 "opacity": 0.3,
                 "visible": true,
               },
@@ -59,11 +65,22 @@ exports[`DonutChart component passes correct props without errors for valid prop
                 "visible": "auto",
               },
               "line": Object {
+                "dimmed": Object {
+                  "stroke": "rgba(202, 211, 226, 0.5)",
+                  "strokeWidth": 1,
+                },
+                "focused": Object {
+                  "strokeWidth": 2.5,
+                },
                 "opacity": 1,
                 "strokeWidth": 2,
                 "visible": true,
               },
               "point": Object {
+                "dimmed": Object {
+                  "fill": "rgba(202, 211, 226, 0.15)",
+                  "stroke": "rgba(202, 211, 226, 0.15)",
+                },
                 "fill": "__use__series__color__",
                 "opacity": 1,
                 "radius": 3,
@@ -180,6 +197,9 @@ exports[`DonutChart component passes correct props without errors for valid prop
             },
             "bubbleSeriesStyle": Object {
               "point": Object {
+                "dimmed": Object {
+                  "opacity": 0.25,
+                },
                 "fill": "__use__series__color__",
                 "opacity": 1,
                 "radius": 2,
@@ -229,7 +249,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
             },
             "crosshair": Object {
               "band": Object {
-                "fill": "rgba(23 80 186 / 0.04)",
+                "fill": "rgba(23, 80, 186, 0.04)",
                 "visible": true,
               },
               "crossLine": Object {
@@ -319,11 +339,11 @@ exports[`DonutChart component passes correct props without errors for valid prop
                 "visible": true,
               },
               "brushMask": Object {
-                "fill": "rgba(255 255 255 / 0.7)",
+                "fill": "rgba(255, 255, 255, 0.7)",
                 "visible": true,
               },
               "brushTool": Object {
-                "fill": "rgba(255 255 255 / 0.7)",
+                "fill": "rgba(255, 255, 255, 0.7)",
                 "visible": false,
               },
               "cell": Object {
@@ -432,11 +452,22 @@ exports[`DonutChart component passes correct props without errors for valid prop
                 "visible": "auto",
               },
               "line": Object {
+                "dimmed": Object {
+                  "stroke": "rgba(202, 211, 226, 0.35)",
+                  "strokeWidth": 1,
+                },
+                "focused": Object {
+                  "strokeWidth": 2.5,
+                },
                 "opacity": 1,
                 "strokeWidth": 2,
                 "visible": true,
               },
               "point": Object {
+                "dimmed": Object {
+                  "fill": "rgba(202, 211, 226, 0.15)",
+                  "stroke": "rgba(202, 211, 226, 0.15)",
+                },
                 "fill": "__use__series__color__",
                 "opacity": 1,
                 "radius": 3,
diff --git a/yarn.lock b/yarn.lock
index 283400141503d..6d60e79c35965 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2067,10 +2067,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@70.1.0":
-  version "70.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-70.1.0.tgz#178c7304c1b82c05ca687367b83886aa861b1036"
-  integrity sha512-Re+MABG944Xm6fQGgf85Mlb0IWf0e8xhVALFqTWK+xKgqyjiecb0rj34fUGbKpqzzV6YRok6MK1nudsXK3KJTw==
+"@elastic/charts@70.1.1":
+  version "70.1.1"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-70.1.1.tgz#3ce1cd77b7d6b5c89cfe33f8dbdbf23e294d98e2"
+  integrity sha512-g6joH7VZlCL9syAJJDZ5Tf/x03XV3Zsc8HD0f77SioWa9MbMLPqRQZyuLG+Y2+1wCsoV6njuvk9AR96VgwbFdw==
   dependencies:
     "@popperjs/core" "^2.11.8"
     "@reduxjs/toolkit" "1.9.7"