@fundar/data-chart-telling 0.0.28 → 0.0.30

package/dist/plots/bar/Plot.svelte

@@ -13,6 +13,7 @@
   import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import { buildHoverPoints } from './hoverPoints';
   import { buildBarMarkers } from './buildBarMarkers';
+  import { resolveGapsForSeries, resolveDiscreteGapFills } from '../utils/gaps';
   import ValueLabels from './ValueLabels.svelte';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
@@ -20,7 +21,7 @@
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisScale, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
@@ -33,7 +34,7 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    GapsAwarePlotStylesConfig<BarSegmentStyle>,
     BarSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
@@ -68,6 +69,14 @@
   const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
   const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
 
+  // Fills leading/internal/trailing missing-data holes with an
+  // interpolated, distinctly-styled bar, resolved per series like
+  // `segments` — see `GapsAwarePlotStylesConfig` (`types/layout/styles.ts`).
+  const gaps = $derived(styles.gaps ?? {});
+  const gapFillMaps = $derived(
+    new Map(resolvedSeries.map((s) => [s.name, resolveDiscreteGapFills(s, resolveGapsForSeries(gaps, s.name))])),
+  );
+
   // `xAcc`/`yAcc` are always data-semantic (category/value) — independent of
   // which *visual* axis ends up drawing them, decided by `categoricalAxis`.
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
@@ -148,6 +157,7 @@
     flat: () => flat,
     xAcc: () => xAcc,
     groupedSeries: () => groupedSeries,
+    gapFillMaps: () => gapFillMaps,
   });
 
   // `x`/`y` here are visual (matched against BasePlotLayout's own getX/getY,
@@ -228,6 +238,7 @@
       active: hover.active,
       setHoverMatch,
       clearHoverMatch,
+      gapFillMaps,
     }),
     ...markers,
   ]}

package/dist/plots/bar/Plot.svelte.d.ts

@@ -2,9 +2,9 @@ import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, GapsAwarePlotStylesConfig<import("../..").AreaStyle>, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/bar/ValueLabels.svelte

@@ -3,6 +3,7 @@
   import { resolveAccessor } from '../utils/accessors';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
+  import { isGapValue } from '../utils/gaps';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
@@ -77,6 +78,9 @@
 
   const xFn = $derived(resolveAccessor(group.series.x));
   const yFn = $derived(resolveAccessor(group.series.y));
+  // A gap row — missing data, whether or not `styles.gaps` fills it with a
+  // synthetic bar — never gets a value label, same as LinePlot's `lastPoints`.
+  const labelData = $derived(group.series.data.filter((d) => !isGapValue(yFn(d))));
 
   const valueTextFn = $derived(
     barLayout.layout === 'stacked'
@@ -113,7 +117,7 @@
      boundary crossing instead (pointerenter/leave fire on every ancestor). -->
 <g bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
   <Text
-    data={group.series.data}
+    data={labelData}
     {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
     text={(d: TData) => formatValue(Number(yFn(d)), group.series.name)}
     dx={font?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}

package/dist/plots/bar/buildBarMarkers.d.ts

@@ -4,11 +4,17 @@ import type { VisualGroup } from '../../types/plots/segments/config';
 import type { HoverPoint } from '../../types/layout/tooltip';
 import type { BarMarkerConfig } from '../../types/markers/common';
 import type { BarLayout } from './layout.svelte';
+import type { DiscreteGapFill } from '../utils/gaps';
 /**
  * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
- * per series (stacked) or per visual segment (grouped/overlap), plus one
- * `role: 'hitArea'` marker per category, so a chart never gets segment
- * markers without their hit areas.
+ * per series (stacked) or per visual segment (grouped/overlap), one
+ * additional `role: 'segment'` marker per series per gap zone kind for any
+ * row `styles.gaps` fills (distinctly styled, drawn at its interpolated
+ * value — see `resolveDiscreteGapFills`), plus one `role: 'hitArea'` marker
+ * per category, so a chart never gets segment markers without their hit
+ * areas. A row whose value is missing and *not* filled by a gap zone is
+ * skipped entirely — no bar drawn, rather than the broken zero/`NaN`
+ * geometry a raw missing value would otherwise produce.
  *
  * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
  * resolving it to pixels needs svelteplot's live scale, only available
@@ -27,4 +33,5 @@ export declare function buildBarMarkers<TData extends Record<string, unknown>>(a
     active: boolean;
     setHoverMatch: (rows: TData[]) => void;
     clearHoverMatch: () => void;
+    gapFillMaps: Map<string, Map<TData, DiscreteGapFill<BarSegmentStyle>>>;
 }): BarMarkerConfig[];

package/dist/plots/bar/buildBarMarkers.js

@@ -1,81 +1,112 @@
 import { resolveAccessor } from '../utils/accessors';
 import { paletteColor } from '../../utils/color';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
+const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
- * per series (stacked) or per visual segment (grouped/overlap), plus one
- * `role: 'hitArea'` marker per category, so a chart never gets segment
- * markers without their hit areas.
+ * per series (stacked) or per visual segment (grouped/overlap), one
+ * additional `role: 'segment'` marker per series per gap zone kind for any
+ * row `styles.gaps` fills (distinctly styled, drawn at its interpolated
+ * value — see `resolveDiscreteGapFills`), plus one `role: 'hitArea'` marker
+ * per category, so a chart never gets segment markers without their hit
+ * areas. A row whose value is missing and *not* filled by a gap zone is
+ * skipped entirely — no bar drawn, rather than the broken zero/`NaN`
+ * geometry a raw missing value would otherwise produce.
  *
  * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
  * resolving it to pixels needs svelteplot's live scale, only available
  * where the marker actually renders.
  */
 export function buildBarMarkers(args) {
-    const { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch } = args;
+    const { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
+    const gapDefaults = getConfiguration().bar.gap;
     const segmentMarkers = [];
     groupedSeries.forEach((group, seriesIndex) => {
         const xFn = resolveAccessor(group.series.x);
         const yFn = resolveAccessor(group.series.y);
         const defaultColor = paletteColor(seriesIndex, palette);
         const disabledFill = disabledFillFor(group.series.name);
-        if (barLayout.layout === 'stacked') {
-            const stackedBaselineFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex);
-            const stackedTopFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex) + Number(yFn(d));
-            const marker = {
-                type: 'bar',
-                role: 'segment',
-                isHorizontal,
-                data: group.series.data,
-                style: {
-                    fill: disabledFill?.fill ?? defaultColor,
-                    fillOpacity: disabledFill?.fillOpacity ?? 1,
-                },
-            };
-            if (isHorizontal) {
-                marker.y = xFn;
-                marker.x1 = stackedBaselineFn;
-                marker.x2 = stackedTopFn;
-            }
-            else {
-                marker.x = xFn;
-                marker.y1 = stackedBaselineFn;
-                marker.y2 = stackedTopFn;
-            }
-            segmentMarkers.push(marker);
-            return;
-        }
-        for (const seg of group.visualSegments) {
-            const marker = {
-                type: 'bar',
-                role: 'segment',
-                isHorizontal,
-                data: seg.data,
-                style: {
-                    fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
-                    fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
-                },
-            };
-            if (isHorizontal) {
-                marker.y = xFn;
-                marker.x1 = barLayout.valueBaseline;
-                marker.x2 = yFn;
+        // Places one series' bar(s) — real or gap-fill — using whichever
+        // layout mode (stacked baseline, or flat baseline + grouped insets) is
+        // active, so a gap-fill bar always lands in exactly the same slot a
+        // real bar for that row would.
+        function makeMarker(data, valueFn, style) {
+            if (data.length === 0)
+                return null;
+            const marker = { type: 'bar', role: 'segment', isHorizontal, data, style };
+            if (barLayout.layout === 'stacked') {
+                const baselineFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex);
+                const topFn = (d) => baselineFn(d) + valueFn(d);
+                if (isHorizontal) {
+                    marker.y = xFn;
+                    marker.x1 = baselineFn;
+                    marker.x2 = topFn;
+                }
+                else {
+                    marker.x = xFn;
+                    marker.y1 = baselineFn;
+                    marker.y2 = topFn;
+                }
             }
             else {
-                marker.x = xFn;
-                marker.y1 = barLayout.valueBaseline;
-                marker.y2 = yFn;
-            }
-            if (barLayout.layout === 'grouped') {
                 if (isHorizontal) {
-                    marker.insetTop = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
-                    marker.insetBottom = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    marker.y = xFn;
+                    marker.x1 = barLayout.valueBaseline;
+                    marker.x2 = valueFn;
                 }
                 else {
-                    marker.insetLeft = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
-                    marker.insetRight = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    marker.x = xFn;
+                    marker.y1 = barLayout.valueBaseline;
+                    marker.y2 = valueFn;
+                }
+                if (barLayout.layout === 'grouped') {
+                    if (isHorizontal) {
+                        marker.insetTop = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
+                        marker.insetBottom = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    }
+                    else {
+                        marker.insetLeft = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
+                        marker.insetRight = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    }
                 }
             }
-            segmentMarkers.push(marker);
+            return marker;
+        }
+        // Mirrors the pre-existing behavior for both branches: a series-scoped
+        // `segments` catch-all style (e.g. an explicit `fill`) wins over the
+        // index-derived `defaultColor`.
+        for (const seg of group.visualSegments) {
+            const realData = seg.data.filter((d) => !isGapValue(yFn(d)));
+            const style = {
+                fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+            };
+            const valueFn = barLayout.layout === 'stacked' ? (d) => Number(yFn(d)) : yFn;
+            const marker = makeMarker(realData, valueFn, style);
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+        const fillMap = gapFillMaps.get(group.series.name) ?? new Map();
+        for (const kind of GAP_KINDS) {
+            const filledRows = group.series.data.filter((d) => fillMap.get(d)?.kind === kind);
+            if (filledRows.length === 0)
+                continue;
+            const base = resolveGapAreaStyle(fillMap.get(filledRows[0]).style, defaultColor, gapDefaults);
+            const gapStyle = {
+                ...base,
+                fill: disabledFill?.fill ?? base.fill,
+                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity,
+            };
+            // svelteplot shallow-clones each row before invoking a mark's own
+            // geometry accessors (same reason PyramidPlot's `flat` tags rows
+            // instead of relying on identity) — a `fillMap.get(d)` lookup inside
+            // `valueFn` would see a clone, not the original key. Tagging the
+            // resolved value onto the row as a plain field survives that clone.
+            const taggedData = filledRows.map((d) => ({ ...d, __gapValue: fillMap.get(d).value }));
+            const marker = makeMarker(taggedData, (d) => d.__gapValue, gapStyle);
+            if (marker)
+                segmentMarkers.push(marker);
         }
     });
     const byCategory = new Map();

package/dist/plots/bar/hoverPoints.js

@@ -1,5 +1,6 @@
 import { resolveAccessor } from '../utils/accessors';
 import { paletteColor } from '../../utils/color';
+import { isGapValue } from '../utils/gaps';
 /**
  * Builds hover-marker candidate points for every row across every series.
  *
@@ -15,7 +16,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette
     return resolvedSeries.flatMap((s, idx) => {
         const sx = resolveAccessor(s.x);
         const sy = resolveAccessor(s.y);
-        return s.data.map((d) => {
+        return s.data.filter((d) => !isGapValue(sy(d))).map((d) => {
             const category = sx(d);
             const rawValue = Number(sy(d));
             const value = geometry.layout === 'stacked' ? geometry.stackedBaseline(category, idx) + rawValue : rawValue;

package/dist/plots/bar/layout.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Series } from '../../types/plots/data/common';
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { VisualGroup } from '../../types/plots/segments/config';
 import type { MarginConfig } from '../../types/plots/props';
+import type { DiscreteGapFill } from '../utils/gaps';
 export type BarSeriesLayout = 'overlap' | 'grouped' | 'stacked';
 /**
  * Reactive geometry for BarPlot's series-layout modes — the single source of
@@ -20,6 +21,7 @@ export declare function createBarLayout<TData extends Record<string, unknown>>(a
     flat: () => TData[];
     xAcc: () => (d: TData) => AxisValue;
     groupedSeries: () => VisualGroup<Series<TData>, BarSegmentStyle>[];
+    gapFillMaps: () => Map<string, Map<TData, DiscreteGapFill<BarSegmentStyle>>>;
 }): {
     readonly layout: BarSeriesLayout;
     readonly valueBaseline: number;

package/dist/plots/bar/layout.svelte.js

@@ -2,6 +2,7 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { resolveAccessor } from '../utils/accessors';
 import { numericMargin } from '../../layout/plot/margins';
+import { isGapValue } from '../utils/gaps';
 /**
  * Reactive geometry for BarPlot's series-layout modes — the single source of
  * truth for "where does series N's bar actually sit," shared by bar-segment
@@ -98,7 +99,11 @@ export function createBarLayout(args) {
                 const seriesXFn = resolveAccessor(group.series.x);
                 const seriesYFn = resolveAccessor(group.series.y);
                 const row = group.series.data.find((d) => seriesXFn(d) === category);
-                running += row ? Number(seriesYFn(row)) : 0;
+                if (row) {
+                    const raw = seriesYFn(row);
+                    const fill = args.gapFillMaps().get(group.series.name)?.get(row);
+                    running += fill ? fill.value : isGapValue(raw) ? 0 : Number(raw);
+                }
             }
             sums.set(category, prefix);
         }

package/dist/plots/heatmap/Plot.svelte

@@ -13,7 +13,7 @@
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { AxisBasedStylesConfig } from '../../types/layout/styles';
   import type { CellSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 
@@ -29,7 +29,7 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    AxisBasedStylesConfig,
     CellSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>

package/dist/plots/heatmap/Plot.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { AxisBasedStylesConfig } from '../../types/layout/styles';
 import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, AxisBasedStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/line/Plot.svelte

@@ -9,6 +9,8 @@
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
   import { buildLineMarkers } from './buildLineMarkers';
+  import { buildGapMarkers } from './buildGapMarkers';
+  import { isGapValue } from '../utils/gaps';
   import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import ValueLabels from './ValueLabels.svelte';
@@ -17,7 +19,7 @@
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { LineMarkersConfig } from '../../types/markers/line';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
@@ -25,7 +27,7 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    GapsAwarePlotStylesConfig<LineSegmentStyle>,
     LineSegmentStyle,
     LineMarkersConfig,
     AxisBasedScalesConfig<TData>
@@ -47,6 +49,11 @@
     tooltip = undefined,
   }: Props = $props();
 
+  // Fills leading/internal/trailing missing-data holes with an
+  // interpolated, distinctly-styled bridge, resolved per series like
+  // `segments` — see `GapsAwarePlotStylesConfig` (`types/layout/styles.ts`).
+  const gaps = $derived(styles.gaps ?? {});
+
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
   const legendInteraction = $derived(getLegendInteraction());
 
@@ -80,27 +87,36 @@
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
   // A legend-disabled series is dimmed on the mark itself, but never surfaces
   // in hover/tooltip — its points are simply absent from the candidate list.
+  // A gap row (see `gaps`) is excluded the same way — it carries no real
+  // value to hover.
   const hoverPoints = $derived(
     resolvedSeries.flatMap((s, idx) => {
       if (legendInteraction?.disabledSeries.has(s.name)) return [];
       const sx = resolveAccessor(s.x);
       const sy = resolveAccessor(s.y);
-      return s.data.map((d) => ({
-        x: sx(d) as AxisValue,
-        y: Number(sy(d)),
-        row: d,
-        label: String(sy(d)),
-        series: s.name,
-        color: paletteColor(idx, cfg.palette),
-      }));
+      return s.data
+        .filter((d) => !isGapValue(sy(d)))
+        .map((d) => ({
+          x: sx(d) as AxisValue,
+          y: Number(sy(d)),
+          row: d,
+          label: String(sy(d)),
+          series: s.name,
+          color: paletteColor(idx, cfg.palette),
+        }));
     }),
   );
 
-  // Last data point per series, with its palette index for colour.
+  // Last *real* data point per series (skipping any trailing gap row), with
+  // its palette index for colour.
   const lastPoints = $derived(
     resolvedSeries
-      .map((s, idx) => ({ series: s, lastRow: s.data[s.data.length - 1], seriesIndex: idx }))
-      .filter(({ lastRow }) => lastRow !== undefined),
+      .map((s, idx) => {
+        const sy = resolveAccessor(s.y);
+        const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
+        return { series: s, lastRow, seriesIndex: idx };
+      })
+      .filter((p): p is { series: Series<TData>; lastRow: TData; seriesIndex: number } => p.lastRow !== undefined),
   );
 
   const hover = $derived({
@@ -120,6 +136,14 @@
     }),
   );
 
+  const gapMarkers = $derived(
+    buildGapMarkers<TData>({
+      seriesList: resolvedSeries,
+      gaps,
+      colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+    }),
+  );
+
   const scopedGroups = $derived(
     buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
       groupedSeries,
@@ -148,9 +172,9 @@
   getY={(d) => Number(yAcc(d))}
   {hover}
   {scales}
-  margins={labelMargin.resolvedMargins}
+  {...labelMargin.plotProps}
   xTickRotate={scales?.x?.tickRotate}
-  markers={[...lineMarkers, ...markers]}
+  markers={[...gapMarkers, ...lineMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >

package/dist/plots/line/Plot.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { LineMarkersConfig } from '../../types/markers/line';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, GapsAwarePlotStylesConfig<LineSegmentStyle>, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/line/ValueLabels.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
+  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { Text, usePlot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
@@ -97,8 +98,22 @@
       // changes the rendered label layout so this re-measures.
       void lastPoints;
       void values;
-      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      // The scale range itself is read `untrack`ed on purpose: this margin
+      // watcher's own report (see labelOverflow.svelte.ts) grows the plot's
+      // margin to fit the labels, which feeds back into svelteplot's own
+      // auto-margin sizing and nudges this same range — occasionally by a
+      // permanent, never-settling ±1px each render. Treating the range as a
+      // tracked dependency here reran the whole watcher every single time it
+      // twitched, which (when it never settles) never let the watcher's own
+      // "poll until stable" loop finish — an infinite effect-restart loop
+      // that tripped Svelte's effect_update_depth_exceeded guard. Reading it
+      // untracked still measures against the *current* range on every
+      // re-run triggered by `lastPoints`/`values` above; it just stops the
+      // range's own fluctuations from being what triggers those re-runs.
+      const { xRange, yRange } = untrack(() => ({
+        xRange: plot.scales.x?.fn?.range?.()?.map(Number),
+        yRange: plot.scales.y?.fn?.range?.()?.map(Number),
+      }));
       if (!xRange || !yRange) return undefined;
       return {
         left: Math.min(xRange[0], xRange[1]),

package/dist/plots/line/buildGapMarkers.d.ts

@@ -0,0 +1,21 @@
+import type { Series } from '../../types/plots/data/common';
+import type { GapsConfig } from '../../types/plots/gaps';
+import type { LineSegmentStyle } from '../../types/plots/segments/common';
+import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
+/**
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * detected, configured gap run across every series — the interpolated
+ * bridge drawn over a missing-data hole. `gaps` is resolved per series the
+ * same way `segments` is (a named entry, falling back to `'default'` at
+ * zone granularity — see `resolveGapsForSeries`). Defaults to the series'
+ * own colour with `cfg.line.gap`'s stroke/dot styling (dashed and slightly
+ * muted out of the box), so a gap-fill reads as estimated rather than real
+ * data unless a zone or the global configuration overrides it. Dots (when
+ * requested) are drawn only at a run's two endpoints, not along every
+ * sampled bridge point.
+ */
+export declare function buildGapMarkers<TData extends Record<string, unknown>>(args: {
+    seriesList: Series<TData>[];
+    gaps: GapsConfig<LineSegmentStyle>;
+    colorFor: (seriesIndex: number) => string;
+}): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildGapMarkers.js

@@ -0,0 +1,68 @@
+import { resolveGapRuns, resolveGapsForSeries } from '../utils/gaps';
+import { getConfiguration } from '../../configuration/config.svelte';
+const gx = (p) => p.x;
+const gy = (p) => p.y;
+/**
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * detected, configured gap run across every series — the interpolated
+ * bridge drawn over a missing-data hole. `gaps` is resolved per series the
+ * same way `segments` is (a named entry, falling back to `'default'` at
+ * zone granularity — see `resolveGapsForSeries`). Defaults to the series'
+ * own colour with `cfg.line.gap`'s stroke/dot styling (dashed and slightly
+ * muted out of the box), so a gap-fill reads as estimated rather than real
+ * data unless a zone or the global configuration overrides it. Dots (when
+ * requested) are drawn only at a run's two endpoints, not along every
+ * sampled bridge point.
+ */
+export function buildGapMarkers(args) {
+    const { seriesList, gaps, colorFor } = args;
+    const cfg = getConfiguration();
+    const gapDefaults = cfg.line.gap;
+    const markers = [];
+    seriesList.forEach((series, seriesIndex) => {
+        const zones = resolveGapsForSeries(gaps, series.name);
+        const runs = resolveGapRuns(series, zones);
+        if (runs.length === 0)
+            return;
+        const defaultColor = colorFor(seriesIndex);
+        for (const run of runs) {
+            const strokeStyle = run.zone.style?.stroke;
+            const dotStyle = run.zone.style?.dots;
+            markers.push({
+                type: 'line',
+                data: run.points,
+                x: gx,
+                y: gy,
+                style: {
+                    stroke: strokeStyle?.stroke ?? defaultColor,
+                    strokeWidth: strokeStyle?.strokeWidth ?? gapDefaults.stroke.strokeWidth ?? cfg.line.strokeWidth,
+                    strokeOpacity: strokeStyle?.strokeOpacity ?? gapDefaults.stroke.strokeOpacity,
+                    strokeDasharray: strokeStyle?.strokeDasharray ?? gapDefaults.stroke.strokeDasharray,
+                    strokeLinejoin: strokeStyle?.strokeLinejoin ?? gapDefaults.stroke.strokeLinejoin,
+                    strokeLinecap: strokeStyle?.strokeLinecap ?? gapDefaults.stroke.strokeLinecap,
+                },
+            });
+            if (!dotStyle)
+                continue;
+            const dotDefaults = gapDefaults.dots;
+            const endpoints = [run.points[0], run.points[run.points.length - 1]];
+            markers.push({
+                type: 'dot',
+                data: endpoints,
+                x: gx,
+                y: gy,
+                style: {
+                    dotRadius: dotStyle.dotRadius ?? dotDefaults.dotRadius ?? cfg.line.dotRadius,
+                    dotFill: dotStyle.dotFill ?? strokeStyle?.stroke ?? dotDefaults.dotFill ?? defaultColor,
+                    dotSymbol: dotStyle.dotSymbol ?? dotDefaults.dotSymbol ?? 'circle',
+                    dotStroke: dotStyle.dotStroke ?? strokeStyle?.stroke ?? dotDefaults.dotStroke ?? defaultColor,
+                    dotStrokeWidth: dotStyle.dotStrokeWidth ?? dotDefaults.dotStrokeWidth ?? 1,
+                    dotFillOpacity: dotStyle.dotFillOpacity ?? dotDefaults.dotFillOpacity ?? 1,
+                    dotStrokeOpacity: dotStyle.dotStrokeOpacity ?? dotDefaults.dotStrokeOpacity ?? 1,
+                    dotStrokeDasharray: dotStyle.dotStrokeDasharray ?? dotDefaults.dotStrokeDasharray,
+                },
+            });
+        }
+    });
+    return markers;
+}