diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
index 254f21186f5f83..22e92df0097dab 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
@@ -9,6 +9,7 @@ import React, { FC } from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { RectAnnotation, LineAnnotation, AnnotationDomainType, Position } from '@elastic/charts';
 import { timeFormatter } from '../../../../../../../../common/util/date_utils';
+import { useCurrentEuiTheme } from '../../../../../../components/color_range_legend';
 
 interface Props {
   overlayKey: number;
@@ -19,12 +20,14 @@ interface Props {
 }
 
 export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMarker = true }) => {
+  const { euiTheme } = useCurrentEuiTheme();
+
   return (
     <>
       <RectAnnotation
         id={`rect_annotation_${overlayKey}`}
         zIndex={1}
-        hideTooltips={true}
+        hideTooltips
         dataValues={[
           {
             coordinates: {
@@ -50,14 +53,12 @@ export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMar
           },
         }}
         markerPosition={Position.Bottom}
-        hideTooltips={true}
-        marker={
+        hideTooltips
+        marker={showMarker ? <EuiIcon type="arrowUp" /> : undefined}
+        markerBody={
           showMarker ? (
-            <div>
-              <div style={{ textAlign: 'center' }}>
-                <EuiIcon type="arrowUp" />
-              </div>
-              <div style={{ fontWeight: 'normal', color: '#343741' }}>{timeFormatter(start)}</div>
+            <div style={{ fontWeight: 'normal', color: euiTheme.euiTextColor }}>
+              {timeFormatter(start)}
             </div>
           ) : undefined
         }
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx
index 743b364a7e2c64..65d6f950ebda49 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/loading_wrapper/loading_wrapper.tsx
@@ -26,7 +26,7 @@ export const LoadingWrapper: FC<Props> = ({ hasData, loading = false, height, ch
           transition: 'opacity 0.2s',
         }}
       >
-        {children}
+        {loading && !hasData ? null : children}
       </div>
       {loading === true && (
         <EuiFlexGroup