diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index 3afdfec422..d76a39d0af 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -113,6 +113,7 @@
     [useDarkMode]="useDarkMode"
     (onViewBoxOverridden)="isViewBoxOverridden = $event"
     (viewBoxChanged)="onLineChartZoom.emit($event)"
+    [customVisTemplate]="lineChartCustomVis"
     [customChartOverlayTemplate]="lineChartCustomXAxisVis"
   ></line-chart>
   <ng-template
@@ -181,6 +182,45 @@
     </scalar-card-data-table>
   </div>
 </ng-container>
+<ng-template
+  #lineChartCustomVis
+  let-viewExtent="viewExtent"
+  let-domDim="domDimension"
+  let-xScale="xScale"
+>
+  <ng-container *ngIf="stepOrLinkedTimeSelection">
+    <div
+      [ngClass]="{
+        'out-of-selected-time': true,
+        start: true,
+        range: !!stepOrLinkedTimeSelection.end?.step
+      }"
+      [style.right]="
+        xScale.forward(
+          viewExtent.x,
+          [domDim.width, 0],
+          stepOrLinkedTimeSelection.start.step
+        ) + 'px'
+      "
+    ></div>
+    <div
+      *ngIf="stepOrLinkedTimeSelection.end?.step"
+      [ngClass]="{
+        'out-of-selected-time': true,
+        end: true,
+        range: true
+      }"
+      [style.left]="
+        xScale.forward(
+          viewExtent.x,
+          [0, domDim.width],
+          stepOrLinkedTimeSelection.end?.step
+        ) + 'px'
+      "
+    ></div>
+  </ng-container>
+</ng-template>
+
 <ng-template
   #lineChartCustomXAxisVis
   let-viewExtent="viewExtent"
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
index b12866fcc6..b7df687e15 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
@@ -54,6 +54,17 @@
       (onViewExtentReset)="viewBoxReset()"
       (onInteractionStateChange)="onInteractionStateChange($event)"
     ></line-chart-interactive-view>
+    <div *ngIf="customVisTemplate" class="custom-vis">
+      <ng-container
+        [ngTemplateOutlet]="customVisTemplate"
+        [ngTemplateOutletContext]="{
+          xScale: xScale,
+          yScale: yScale,
+          domDimension: domDimensions.main,
+          viewExtent: viewBox
+        }"
+      ></ng-container>
+    </div>
   </div>
   <div class="y-axis" #yAxis>
     <line-chart-axis
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
index 219b932a24..fa08ea75fb 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
@@ -92,6 +92,14 @@ export class LineChartComponent
   @ViewChild('chartEl', {static: false, read: ElementRef})
   private chartEl?: ElementRef<HTMLCanvasElement | SVGElement>;
 
+  /**
+   * Optional ngTemplate that renders on top of line chart (not axis). This
+   * template is rendered on top of interactive layer and can mask other
+   * contents. Do note that this component may not intercept pointer-events.
+   */
+  @Input()
+  customVisTemplate?: TemplateRef<TemplateContext>;
+
   @Input()
   customChartOverlayTemplate?: TemplateRef<
     TemplateContext & {formatter: Formatter}