diff --git a/src/components/timeline/LayerLine.svelte b/src/components/timeline/LayerLine.svelte
index 703448b99c..71a56120a3 100644
--- a/src/components/timeline/LayerLine.svelte
+++ b/src/components/timeline/LayerLine.svelte
@@ -23,7 +23,7 @@
   export let mouseout: MouseEvent | undefined;
   export let pointRadius: number = 2;
   export let resources: Resource[] = [];
-  export let showStateLineChart: boolean = false;
+  export let showAsLinePlot: boolean = false;
   export let viewTimeRange: TimeRange = { end: 0, start: 0 };
   export let xScaleView: ScaleTime<number, number> | null = null;
   export let yAxes: Axis[] = [];
@@ -52,7 +52,7 @@
     typeof lineWidth === 'number' &&
     typeof pointRadius === 'number' &&
     mounted &&
-    showStateLineChart !== undefined &&
+    showAsLinePlot !== undefined &&
     points &&
     viewTimeRange &&
     xScaleView &&
@@ -96,7 +96,7 @@
       ctx.lineWidth = lineWidth;
       ctx.strokeStyle = fill;
 
-      if (showStateLineChart) {
+      if (showAsLinePlot) {
         const domain = Array.from(scaleDomain);
         const yScale = scalePoint()
           .domain(domain.filter(filterEmpty))
@@ -119,6 +119,7 @@
             const x = (xScaleView as ScaleTime<number, number, never>)(point.x);
             const y = yScale(point.y.toString()) as number;
             quadtree.add({ id, x, y });
+            visiblePointsById[id] = point;
 
             const circle = new Path2D();
             circle.arc(x, y, radius, 0, 2 * Math.PI);
@@ -216,7 +217,7 @@
             y,
           });
         }
-      } else if (schema.type === 'string') {
+      } else if (schema.type === 'string' || schema.type === 'variant') {
         for (let i = 0; i < values.length; ++i) {
           const value = values[i];
           const { x } = value;
diff --git a/src/components/timeline/Row.svelte b/src/components/timeline/Row.svelte
index 26b8bef7b2..5b13cec17c 100644
--- a/src/components/timeline/Row.svelte
+++ b/src/components/timeline/Row.svelte
@@ -367,7 +367,7 @@
             />
           {/if}
           {#if isXRangeLayer(layer)}
-            {#if layer.showStateLineChart === true}
+            {#if layer.showAsLinePlot === true}
               <LayerLine
                 {...layer}
                 {contextmenu}
diff --git a/src/components/timeline/RowYAxes.svelte b/src/components/timeline/RowYAxes.svelte
index 6ab6e2c740..8169b759a9 100644
--- a/src/components/timeline/RowYAxes.svelte
+++ b/src/components/timeline/RowYAxes.svelte
@@ -49,7 +49,7 @@
            * The correct way to do this would be generating a Y axes when the user toggles the line chart,
            * but for now we're just setting the Y axes dynamically based on the data.
            */
-          if (layer.showStateLineChart && resources && resources.length > 0) {
+          if (layer.showAsLinePlot && resources && resources.length > 0) {
             let domain: string[] = [];
 
             // Get all the unique ordinal values of the chart.
diff --git a/src/components/timeline/form/TimelineEditorLayerSettings.svelte b/src/components/timeline/form/TimelineEditorLayerSettings.svelte
index 6452bdb0ef..b724a2444b 100644
--- a/src/components/timeline/form/TimelineEditorLayerSettings.svelte
+++ b/src/components/timeline/form/TimelineEditorLayerSettings.svelte
@@ -160,12 +160,12 @@
           />
         </Input>
         <Input layout="inline">
-          <label for="showStateLineChart">Show State Changes</label>
+          <label for="showAsLinePlot">Show As Line Plot</label>
           <input
             style:width="max-content"
-            checked={layerAsXRange.showStateLineChart}
-            id="showStateLineChart"
-            name="showStateLineChart"
+            checked={layerAsXRange.showAsLinePlot}
+            id="showAsLinePlot"
+            name="showAsLinePlot"
             on:change={onInput}
             type="checkbox"
           />
diff --git a/src/schemas/ui-view-schema.json b/src/schemas/ui-view-schema.json
index 535344bea9..03842bad0c 100644
--- a/src/schemas/ui-view-schema.json
+++ b/src/schemas/ui-view-schema.json
@@ -405,7 +405,7 @@
                               "opacity": {
                                 "type": "number"
                               },
-                              "showStateLineChart": {
+                              "showAsLinePlot": {
                                 "type": "boolean"
                               },
                               "yAxisId": {
diff --git a/src/types/timeline.ts b/src/types/timeline.ts
index 0795f028ea..2f7a007c8f 100644
--- a/src/types/timeline.ts
+++ b/src/types/timeline.ts
@@ -196,7 +196,7 @@ export type XRangeLayerColorScheme =
 export interface XRangeLayer extends Layer {
   colorScheme: XRangeLayerColorScheme;
   opacity: number;
-  showStateLineChart: boolean;
+  showAsLinePlot: boolean;
 }
 
 export interface XRangePoint extends Point {
diff --git a/src/utilities/timeline.ts b/src/utilities/timeline.ts
index afe1b82321..7a60e85fac 100644
--- a/src/utilities/timeline.ts
+++ b/src/utilities/timeline.ts
@@ -504,7 +504,7 @@ export function createTimelineXRangeLayer(
     id,
     name: '',
     opacity: 0.8,
-    showStateLineChart: false,
+    showAsLinePlot: false,
     yAxisId,
     ...args,
   };