@fundar/data-chart-telling 0.0.10 → 0.0.12

package/dist/layout/tooltip/controller.svelte.d.ts

@@ -33,6 +33,7 @@ export declare function createHoverController<T extends Record<string, unknown>>
         y: AxisValue;
         label: string;
         series: string | undefined;
+        color: string | undefined;
     }[];
     readonly matchedRows: HoverPoint<T>[];
     readonly ruleX: AxisValue | null;

package/dist/layout/tooltip/controller.svelte.js

@@ -31,7 +31,7 @@ export function createHoverController(args) {
     const matchedRows = $derived(filterBySeries(matched, args.seriesFilter?.()));
     // Points highlighted in THIS facet for the in-SVG marker — no series
     // filtering, since that's the tooltip text's concern, not the marker's.
-    const highlight = $derived(matched.map(({ x, y, label, series }) => ({ x, y, label, series })));
+    const highlight = $derived(matched.map(({ x, y, label, series, color }) => ({ x, y, label, series, color })));
     // Raw hover position — available whenever there are matched points.
     // PlotLayout gates actual display with impliesRuleX/Y + the marker's ruleX/Y props.
     const ruleX = $derived(matched.length > 0 ? args.hover().activeX : null);

package/dist/plots/bar/Plot.svelte

@@ -156,10 +156,12 @@
                 ruleStyle={marker.ruleStyle}
                 dotStyle={marker.dotStyle}
                 fontStyle={marker.fontStyle}
+                seriesColor={seg.style?.fill ?? defaultColor}
               />
             {/if}
           {/each}
         {:else}
+          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
           <HoverMarker
             data={seriesPoints}
             ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -168,6 +170,7 @@
             ruleStyle={marker.ruleStyle}
             dotStyle={marker.dotStyle}
             fontStyle={marker.fontStyle}
+            seriesColor={segs[0]?.style?.fill ?? defaultColor}
           />
         {/if}
       {/if}

package/dist/plots/line/Plot.svelte

@@ -178,10 +178,12 @@
                 ruleStyle={marker.ruleStyle}
                 dotStyle={marker.dotStyle}
                 fontStyle={marker.fontStyle}
+                seriesColor={seg.style?.stroke?.stroke ?? defaultColor}
               />
             {/if}
           {/each}
         {:else}
+          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
           <HoverMarker
             data={seriesPoints}
             ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -190,6 +192,7 @@
             ruleStyle={marker.ruleStyle}
             dotStyle={marker.dotStyle}
             fontStyle={marker.fontStyle}
+            seriesColor={segs[0]?.style?.stroke?.stroke ?? defaultColor}
           />
         {/if}
       {/if}

package/dist/plots/markers/HoverMarker.svelte

@@ -34,9 +34,14 @@
     ruleStyle,
     dotStyle,
     fontStyle,
+    seriesColor,
   }: Props = $props();
 
   const cfg = $derived(getConfiguration());
+
+  /** Explicit style wins; otherwise fall back to the series color, then the point's own resolved color. */
+  const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
+    explicit ?? seriesColor ?? point.color;
 </script>
 
 {#if ruleX != null}
@@ -70,8 +75,8 @@
       style={{
         ...cfg.hover.dot,
         ...dotStyle,
-        ...(dotStyle?.dotFill === 'currentColor' && point.color ? { dotFill: point.color } : {}),
-        ...(dotStyle?.dotStroke === 'currentColor' && point.color ? { dotStroke: point.color } : {}),
+        dotFill: resolveColor(dotStyle?.dotFill, point),
+        dotStroke: resolveColor(dotStyle?.dotStroke, point),
       }}
     />
   {/each}
@@ -85,7 +90,7 @@
         style={{
           ...cfg.hover.font,
           ...fontStyle,
-          ...(fontStyle?.fill === 'currentColor' && point.color ? { fill: point.color } : {}),
+          fill: resolveColor(fontStyle?.fill, point),
         }}
       />
     {/each}

package/dist/plots/pyramid/Plot.svelte

@@ -262,10 +262,12 @@
                   ruleStyle={marker.ruleStyle}
                   dotStyle={marker.dotStyle}
                   fontStyle={marker.fontStyle}
+                  seriesColor={seg.style?.fill ?? defaultColor}
                 />
               {/if}
             {/each}
           {:else}
+            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
             <HoverMarker
               data={seriesPoints}
               ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -274,6 +276,7 @@
               ruleStyle={marker.ruleStyle}
               dotStyle={marker.dotStyle}
               fontStyle={marker.fontStyle}
+              seriesColor={segs[0]?.style?.fill ?? defaultColor}
             />
           {/if}
         {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "dist"