diff --git a/x-pack/plugins/maps/common/index.ts b/x-pack/plugins/maps/common/index.ts
index e140a855c3c307..a9fc759a0c6e69 100644
--- a/x-pack/plugins/maps/common/index.ts
+++ b/x-pack/plugins/maps/common/index.ts
@@ -7,6 +7,7 @@
 
 export {
   AGG_TYPE,
+  APP_ID,
   COLOR_MAP_TYPE,
   ES_GEO_FIELD_TYPE,
   FIELD_ORIGIN,
diff --git a/x-pack/plugins/maps/public/index.ts b/x-pack/plugins/maps/public/index.ts
index 287dd9db705ca2..6b8767abe9c110 100644
--- a/x-pack/plugins/maps/public/index.ts
+++ b/x-pack/plugins/maps/public/index.ts
@@ -17,7 +17,7 @@ export const plugin: PluginInitializer<MapsPluginSetup, MapsPluginStart> = (
   return new MapsPlugin(initContext);
 };
 
-export { APP_ID, MAP_SAVED_OBJECT_TYPE } from '../common/constants';
+export { MAP_SAVED_OBJECT_TYPE } from '../common/constants';
 export { MAPS_APP_LOCATOR } from './locators';
 export type { PreIndexedShape } from '../common/elasticsearch_util';
 
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
index 16c5fdf12b529d..0cfeeb3a5601c5 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
@@ -36,8 +36,8 @@ import { useMlKibana } from '../../contexts/kibana';
 import { ML_JOB_AGGREGATION } from '../../../../common/constants/aggregation_types';
 import { AnomalySource } from '../../../maps/anomaly_source';
 import { CUSTOM_COLOR_RAMP } from '../../../maps/anomaly_layer_wizard_factory';
-import { LAYER_TYPE } from '../../../../../maps/common';
-import { APP_ID as MAPS_APP_ID, MAPS_APP_LOCATOR } from '../../../../../maps/public';
+import { LAYER_TYPE, APP_ID as MAPS_APP_ID } from '../../../../../maps/common';
+import { MAPS_APP_LOCATOR } from '../../../../../maps/public';
 import { ExplorerChartsErrorCallOuts } from './explorer_charts_error_callouts';
 import { addItemToRecentlyAccessed } from '../../util/recently_accessed';
 import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map';
@@ -101,6 +101,45 @@ function ExplorerChartContainer({
 
   const getMapsLink = useCallback(async () => {
     const initialLayers = [];
+    const typicalStyle = {
+      type: 'VECTOR',
+      properties: {
+        fillColor: {
+          type: 'STATIC',
+          options: {
+            color: '#98A2B2',
+          },
+        },
+        lineColor: {
+          type: 'STATIC',
+          options: {
+            color: '#fff',
+          },
+        },
+        lineWidth: {
+          type: 'STATIC',
+          options: {
+            size: 2,
+          },
+        },
+        iconSize: {
+          type: 'STATIC',
+          options: {
+            size: 6,
+          },
+        },
+      },
+    };
+
+    const style = {
+      type: 'VECTOR',
+      properties: {
+        fillColor: CUSTOM_COLOR_RAMP,
+        lineColor: CUSTOM_COLOR_RAMP,
+      },
+      isTimeAware: false,
+    };
+
     for (const layer in ML_ANOMALY_LAYERS) {
       if (ML_ANOMALY_LAYERS.hasOwnProperty(layer)) {
         initialLayers.push({
@@ -110,14 +149,7 @@ function ExplorerChartContainer({
             jobId: series.jobId,
             typicalActual: ML_ANOMALY_LAYERS[layer],
           }),
-          style: {
-            type: 'VECTOR',
-            properties: {
-              fillColor: CUSTOM_COLOR_RAMP,
-              lineColor: CUSTOM_COLOR_RAMP,
-            },
-            isTimeAware: false,
-          },
+          style: ML_ANOMALY_LAYERS[layer] === ML_ANOMALY_LAYERS.TYPICAL ? typicalStyle : style,
         });
       }
     }
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js
index 903a0d75e6f609..caaeef28b9f05f 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js
@@ -37,6 +37,38 @@ jest.mock('../../../../../../../src/plugins/kibana_react/public', () => ({
   },
 }));
 
+jest.mock('../../contexts/kibana', () => ({
+  useMlKibana: () => {
+    return {
+      services: {
+        share: {
+          url: {
+            locators: {
+              get: jest.fn(() => {
+                  return { getLocation: jest.fn(() => { path: '/#maps' }) };
+                })
+            }
+          }
+        },
+        data: {
+          query: {
+            timefilter: {
+              timefilter: {
+                getTime: jest.fn(() => {
+                  return { from: '', to: '' };
+                }),
+              },
+            },
+          },
+        },
+        application: {
+          navigateToApp: jest.fn()
+        },
+      },
+    };
+  },
+}));
+
 const getUtilityProps = () => {
   const mlUrlGenerator = {
     createUrl: jest.fn(),