@fundar/data-chart-telling 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.11.0] - 2026-11-04
+
+### Changed
+
+- The dots of a `delta` take the color of the series their end measures, as the plot draws it. Before, they took the line's `stroke` and, with none set, a neutral color. The line's `stroke` still wins when it is set, and the delta's own `dot` wins over both; an end on an axis keeps the neutral color. `usePlot()` now also gives `colorForSeries`.
+- **Breaking:** a delta's line is styled with `stroke`, not `line`, like the rest of the styles (`DeltaMarkerConfig.line`, also as a function of the position). Rename it where it is set.
+
+## [1.10.0] - 2026-11-03
+
+### Added
+
+- `styles.stroke`, `styles.dot` and `styles.area` on every axis-based plot: the style every series is drawn with, each as it is or as a function of the series' name. A plot uses the ones its own marks are made of and ignores the rest: `stroke` and `dot` on `LinePlot`, `SlopePlot`, `SparklinePlot` and the plots with connectors (`LollipopPlot`, `DumbbellPlot`, `ClevelandPlot`, `ForestPlot`); `area` on `AreaPlot`, `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot`, `BoxPlot`, `DensityPlot`, `ViolinPlot` and `HeatmapPlot`; `dot` on `ScatterPlot`. A segment's own style wins over them field by field, a connector styled with `styles.connector` wins over `styles.stroke`, and the connectors of those plots - and their arrows - take its dashes and line caps and joins (`strokeDasharray`, `strokeLinecap`, `strokeLinejoin`) from it or from a segment, and a series a legend turned off dims over all of them. Before, restyling every series - or one of them - took a `segments` entry per series.
+
+### Fixed
+
+- The outline an area style sets - `stroke`, `strokeWidth`, `strokeOpacity`, `strokeDasharray` and `borderRadius` - reaches the bars of `BarPlot`, `BulletPlot` and `PyramidPlot` and the bins of `HistogramPlot`, whether it comes from a segment or from `styles.area`. These plots read only the fill of a segment's style, so the rest was ignored; a series a legend dims fades its outline with its fill.
+
+### Changed
+
+- **Breaking:** the dots of a line's style are `dot`, not `dots`, so they read like `styles.dot`: `LineSegmentStyle.dots` (in `segments` and in the `styles.gaps` zones), the legend's `LegendDisabledStyle.dots` and `line.gap.dots` in the configuration. Rename them where they are set.
+
 ## [1.9.0] - 2026-11-03
 
 ### Changed

package/dist/configuration/config.svelte.js

@@ -303,7 +303,7 @@ export const DEFAULT_CONFIG = {
         dotRadius: 4,
         gap: {
             stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
-            dots: {}
+            dot: {}
         }
     },
     lollipop: {

package/dist/layout/base/BasePlotLayout.svelte

@@ -238,7 +238,8 @@
 		scales: () => scales,
 		axes: () => state.axes,
 		data: () => data,
-		size: () => ({ width, height })
+		size: () => ({ width, height }),
+		colorForSeries: () => state.colorForSeries
 	});
 
 	/** The domains `ScalesLayout` widens an axis to, for an edge tick's `'extend'` (see `EdgeTicks`). */

package/dist/layout/interaction/PlotInteraction.svelte.js

@@ -47,7 +47,7 @@ export class PlotInteraction {
     }
     /** `series`' dots while dimmed. */
     dotsFor(series) {
-        return DisabledStyle.dots(this.dimmed(series));
+        return DisabledStyle.dot(this.dimmed(series));
     }
     /** Isolates `series` - every other one dims - or ends it with `null`. */
     isolate(series) {

package/dist/layout/legend/DisabledStyle.d.ts

@@ -11,7 +11,7 @@ export declare class DisabledStyle {
     /** The style a legend item draws with while off - it stays visible, so it can be turned back on. */
     static ofItem(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
     static stroke(disabled: LegendDisabledStyle | undefined): StrokeStyle | undefined;
-    static dots(disabled: LegendDisabledStyle | undefined): DotStyle | undefined;
+    static dot(disabled: LegendDisabledStyle | undefined): DotStyle | undefined;
     static fill(disabled: LegendDisabledStyle | undefined): {
         fill?: string;
         fillOpacity?: number;

package/dist/layout/legend/DisabledStyle.js

@@ -32,18 +32,18 @@ export class DisabledStyle {
             strokeLinejoin: disabled.stroke?.strokeLinejoin
         };
     }
-    static dots(disabled) {
+    static dot(disabled) {
         if (!disabled)
             return undefined;
         return {
-            dotRadius: disabled.dots?.dotRadius,
-            dotFill: disabled.dots?.dotFill,
-            dotFillOpacity: disabled.dots?.dotFillOpacity ?? disabled.opacity,
-            dotSymbol: disabled.dots?.dotSymbol,
-            dotStroke: disabled.dots?.dotStroke,
-            dotStrokeWidth: disabled.dots?.dotStrokeWidth,
-            dotStrokeOpacity: disabled.dots?.dotStrokeOpacity ?? disabled.opacity,
-            dotStrokeDasharray: disabled.dots?.dotStrokeDasharray
+            dotRadius: disabled.dot?.dotRadius,
+            dotFill: disabled.dot?.dotFill,
+            dotFillOpacity: disabled.dot?.dotFillOpacity ?? disabled.opacity,
+            dotSymbol: disabled.dot?.dotSymbol,
+            dotStroke: disabled.dot?.dotStroke,
+            dotStrokeWidth: disabled.dot?.dotStrokeWidth,
+            dotStrokeOpacity: disabled.dot?.dotStrokeOpacity ?? disabled.opacity,
+            dotStrokeDasharray: disabled.dot?.dotStrokeDasharray
         };
     }
     static fill(disabled) {

package/dist/layout/plot/PlotContext.d.ts

@@ -16,6 +16,8 @@ export type PlotContextParts<T extends Record<string, unknown>> = {
         width: number;
         height: number;
     };
+    /** Each series' color, by name - axis kinds only. */
+    colorForSeries?: () => ((name: string) => string) | undefined;
 };
 /**
  * Everything one plot is, gathered where what draws inside it can reach it:
@@ -36,6 +38,7 @@ export declare class PlotContext<T extends Record<string, unknown> = Record<stri
     get scales(): object | undefined;
     get axes(): PlotAxes | undefined;
     get data(): T[];
+    get colorForSeries(): ((name: string) => string) | undefined;
     get width(): number;
     get height(): number;
 }

package/dist/layout/plot/PlotContext.js

@@ -37,6 +37,9 @@ export class PlotContext {
     get data() {
         return this.#parts.data();
     }
+    get colorForSeries() {
+        return this.#parts.colorForSeries?.();
+    }
     get width() {
         return this.#parts.size().width;
     }

package/dist/layout/plot/PublicPlotContext.d.ts

@@ -126,6 +126,8 @@ export declare class PublicPlotContext<T extends Record<string, unknown> = Recor
     get axes(): PlotAxes | undefined;
     /** The rows the plot draws and hovers over. */
     get data(): T[];
+    /** The color a series is drawn in, by its name - `undefined` for a plot with no series (a map). */
+    get colorForSeries(): ((name: string) => string) | undefined;
     get width(): number;
     get height(): number;
 }

package/dist/layout/plot/PublicPlotContext.js

@@ -231,6 +231,10 @@ export class PublicPlotContext {
     get data() {
         return this.#context.data;
     }
+    /** The color a series is drawn in, by its name - `undefined` for a plot with no series (a map). */
+    get colorForSeries() {
+        return this.#context.colorForSeries;
+    }
     get width() {
         return this.#context.width;
     }

package/dist/layout/styles/BasicStyles.d.ts

@@ -0,0 +1,13 @@
+import type { BasicStylesConfig, BasicStylesShape, PerSeries } from '../../types/layout/styles';
+/**
+ * The style a plot draws every series with, out of its `styles.stroke`,
+ * `styles.dot` and `styles.area`: the ones its kind's segment style is made of
+ * (`shape`), each as it is or as a function of the series' name. The segments
+ * of a series restyle a stretch of it over this.
+ */
+export declare class BasicStyles {
+    /** The style of the series named `name`, or `undefined` when there is none to give. */
+    static of<TStyle>(styles: BasicStylesConfig | undefined, shape: BasicStylesShape | undefined): ((seriesName: string) => TStyle | undefined) | undefined;
+    /** A style as it is, or what its function says of the series named `name`; a function has nothing to say without a name. */
+    static read<TStyle extends object>(style: PerSeries<TStyle> | undefined, name: string | undefined): TStyle | undefined;
+}

package/dist/layout/styles/BasicStyles.js

@@ -0,0 +1,31 @@
+/**
+ * The style a plot draws every series with, out of its `styles.stroke`,
+ * `styles.dot` and `styles.area`: the ones its kind's segment style is made of
+ * (`shape`), each as it is or as a function of the series' name. The segments
+ * of a series restyle a stretch of it over this.
+ */
+export class BasicStyles {
+    /** The style of the series named `name`, or `undefined` when there is none to give. */
+    static of(styles, shape) {
+        if (!styles || !shape)
+            return undefined;
+        const keys = 'flat' in shape ? [shape.flat] : shape.nested;
+        if (keys.every((key) => styles[key] === undefined))
+            return undefined;
+        return (name) => {
+            const picked = Object.fromEntries(keys.flatMap((key) => {
+                const style = BasicStyles.read(styles[key], name);
+                return style ? [[key, style]] : [];
+            }));
+            if (Object.keys(picked).length === 0)
+                return undefined;
+            return ('flat' in shape ? picked[shape.flat] : picked);
+        };
+    }
+    /** A style as it is, or what its function says of the series named `name`; a function has nothing to say without a name. */
+    static read(style, name) {
+        if (typeof style !== 'function')
+            return style;
+        return name === undefined ? undefined : style(name);
+    }
+}

package/dist/markers/arrow/ArrowMarker.svelte

@@ -67,4 +67,6 @@
 	strokeWidth={row.strokeWidth}
 	strokeOpacity={row.strokeOpacity}
 	strokeDasharray={marker.styles?.strokeDasharray}
+	strokeLinecap={marker.styles?.strokeLinecap}
+	strokeLinejoin={marker.styles?.strokeLinejoin}
 />

package/dist/markers/delta/Delta.d.ts

@@ -18,7 +18,7 @@ export declare class Delta {
     #private;
     /**
      * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
-     * `line`, `text` and `dot` its style functions give for that position.
+     * `stroke`, `text` and `dot` its style functions give for that position.
      */
     static points(marker: DeltaMarkerConfig): DeltaPointConfig[];
     /** The delta `config` asks for over `allSeries`, or `undefined` while an end has no value there. */

package/dist/markers/delta/Delta.js

@@ -7,7 +7,7 @@ import { resolveAccessor } from '../../utils/accessors';
 export class Delta {
     /**
      * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
-     * `line`, `text` and `dot` its style functions give for that position.
+     * `stroke`, `text` and `dot` its style functions give for that position.
      */
     static points(marker) {
         const positions = Array.isArray(marker.at) ? marker.at : [marker.at];
@@ -15,7 +15,7 @@ export class Delta {
         return positions.map((at) => ({
             ...marker,
             at,
-            line: own(marker.line, at),
+            stroke: own(marker.stroke, at),
             text: own(marker.text, at),
             dot: own(marker.dot, at)
         }));

package/dist/markers/delta/DeltaMarker.svelte

@@ -6,7 +6,7 @@
 
 	/**
 	 * A delta annotation: one at `marker.at`, or, when it is a list, one at each position - all with the
-	 * same ends. `line`, `text` and `dot` can be functions of the position.
+	 * same ends. `stroke`, `text` and `dot` can be functions of the position.
 	 */
 	let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
 

package/dist/markers/delta/DeltaPoint.svelte

@@ -3,6 +3,7 @@
 	import DotMarker from '../dot/DotMarker.svelte';
 	import TextMarker from '../text/TextMarker.svelte';
 	import { Delta } from './Delta';
+	import { usePlot } from '../../layout/plot/usePlot';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { Series } from '../../types/plots/data/common';
 	import type { DeltaPointConfig } from '../../types/markers/axis/delta';
@@ -10,6 +11,8 @@
 	/** One delta, at the one position `marker.at` names. See {@link DeltaMarker} for a list of them. */
 	let { marker, data = [] }: { marker: DeltaPointConfig; data?: Series<TData>[] } = $props();
 
+	const plot = usePlot();
+
 	const resolved = $derived(Delta.build(marker.axis, data, marker));
 	const label = $derived(getConfiguration().delta.text[marker.axis]);
 	const lineAnchor = $derived(marker.text?.lineAnchor ?? label.lineAnchor);
@@ -54,13 +57,22 @@
 		};
 	});
 
-	const dotStyles = $derived({
-		dotRadius: 4,
-		dotFill: marker.line?.stroke,
-		dotStroke: marker.line?.stroke,
-		dotStrokeWidth: 2,
-		...marker.dot
-	});
+	/**
+	 * The dot of one end: in the delta's own `stroke` when it sets one, else in the color of the series the end
+	 * measures - an axis end has none, and takes the dot's default. `dot` wins over both.
+	 */
+	function dotStyles(target: DeltaPointConfig['from'] | undefined) {
+		const color =
+			marker.stroke?.stroke ??
+			(target?.type === 'series' ? plot.colorForSeries?.(target.series) : undefined);
+		return {
+			dotRadius: 4,
+			dotFill: color,
+			dotStroke: color,
+			dotStrokeWidth: 2,
+			...marker.dot
+		};
+	}
 </script>
 
 {#if coords}
@@ -68,14 +80,18 @@
 		data={coords.lineData}
 		x={(p) => p.x}
 		y={(p) => p.y}
-		stroke={marker.line?.stroke ?? 'currentColor'}
-		strokeWidth={marker.line?.strokeWidth ?? 2}
-		strokeOpacity={marker.line?.strokeOpacity ?? 0.8}
-		strokeDasharray={marker.line?.strokeDasharray ?? '6 6'}
-		strokeLinecap={marker.line?.strokeLinecap ?? 'round'}
+		stroke={marker.stroke?.stroke ?? 'currentColor'}
+		strokeWidth={marker.stroke?.strokeWidth ?? 2}
+		strokeOpacity={marker.stroke?.strokeOpacity ?? 0.8}
+		strokeDasharray={marker.stroke?.strokeDasharray ?? '6 6'}
+		strokeLinecap={marker.stroke?.strokeLinecap ?? 'round'}
+	/>
+	<DotMarker
+		marker={{ type: 'dot', x: coords.fromPt.x, y: coords.fromPt.y, styles: dotStyles(marker.from) }}
+	/>
+	<DotMarker
+		marker={{ type: 'dot', x: coords.toPt.x, y: coords.toPt.y, styles: dotStyles(marker.to) }}
 	/>
-	<DotMarker marker={{ type: 'dot', x: coords.fromPt.x, y: coords.fromPt.y, styles: dotStyles }} />
-	<DotMarker marker={{ type: 'dot', x: coords.toPt.x, y: coords.toPt.y, styles: dotStyles }} />
 	<TextMarker
 		marker={{
 			type: 'text',
@@ -86,7 +102,7 @@
 				fontWeight: 'bold',
 				fontSize: 14,
 				textAnchor: label.textAnchor,
-				fill: marker.line?.stroke ?? 'currentColor',
+				fill: marker.stroke?.stroke ?? 'currentColor',
 				...marker.text,
 				dx: marker.text?.dx ?? label.dx,
 				dy: marker.text?.dy ?? label.dy,

package/dist/markers/rule/RuleMarker.svelte

@@ -53,4 +53,6 @@
 	strokeWidth={row.strokeWidth}
 	strokeOpacity={row.strokeOpacity}
 	strokeDasharray={styles?.strokeDasharray}
+	strokeLinecap={styles?.strokeLinecap}
+	strokeLinejoin={styles?.strokeLinejoin}
 />

package/dist/phases/data/DataPhase.js

@@ -3,6 +3,7 @@ import { ColorRamp } from '../../utils/color';
 import { resolveAccessor } from '../../utils/accessors';
 import { buildGroupedSeries, buildScopedMarkerGroups } from '../../plots/utils/segments';
 import { buildGapFillMaps, isGapValue } from '../../plots/utils/gaps';
+import { BasicStyles } from '../../layout/styles/BasicStyles';
 import { FacetPanels } from '../facet/FacetPanels';
 import { PlotAxes } from './PlotAxes';
 /**
@@ -39,10 +40,12 @@ export class DataPhase {
             ? FacetPanels.splitSeries(fullSeries, state.panels, state.panelOf)
             : fullSeries;
         const resolvedSeries = ctx.interaction?.legend?.withoutOmitted(panelSeries) ?? panelSeries;
-        const groupedSeries = buildGroupedSeries(resolvedSeries, segments, connect);
+        const baseFor = BasicStyles.of(state.styles, options.segments?.base);
+        const groupedSeries = buildGroupedSeries(resolvedSeries, segments, connect, baseFor);
         const scopedGroups = buildScopedMarkerGroups({
             groupedSeries,
             segments,
+            baseFor,
             colorFor: (s) => colorForSeries(s.name),
             segmentColorFor: (style, defaultColor) => segmentColor?.(style) ?? defaultColor
         });
@@ -57,6 +60,7 @@ export class DataPhase {
             seriesGrouping,
             allSeriesNames: fullSeries.map((s) => s.name),
             groupedSeries,
+            segmentBase: baseFor,
             flat: resolvedSeries.flatMap((s) => s.data),
             scopedGroups,
             colorForSeries,

package/dist/phases/transforms/TransformsPhase.js

@@ -159,7 +159,7 @@ export class TransformsPhase {
     static #buildGroups(state, connect) {
         const { data } = state.processedData;
         const series = (state.resolvedSeries ?? []).map((s) => TransformsPhase.#processedSeries(state, s, data.filter((row) => row[SERIES_ID_KEY] === seriesIdOf(s))));
-        return buildGroupedSeries(series, state.segments, connect);
+        return buildGroupedSeries(series, state.segments, connect, state.segmentBase);
     }
     /**
      * The processed rows in their own order, split into runs of consecutive rows
@@ -181,7 +181,7 @@ export class TransformsPhase {
             else
                 runs.push(TransformsPhase.#processedSeries(state, source, [row]));
         }
-        return buildGroupedSeries(runs, state.segments, false);
+        return buildGroupedSeries(runs, state.segments, false, state.segmentBase);
     }
     /**
      * One series accessor shared by every series as-is, so a field key keeps

package/dist/plots/correlation/heatmap/defaults.js

@@ -57,7 +57,7 @@ function extendWithColorScales(state, ctx) {
  */
 export function buildHeatmapDefaults() {
     return {
-        data: { discreteAxes: 2 },
+        data: { discreteAxes: 2, segments: { base: { flat: 'area' } } },
         mapping: {
             // A heatmap with no `color` still reads one per cell, as nothing.
             extend: (state) => ({

package/dist/plots/correlation/heatmap/markers.js

@@ -1,6 +1,8 @@
 import { LegendState } from '../../../layout/legend/LegendState.svelte';
 import { DisabledStyle } from '../../../layout/legend/DisabledStyle';
 import { resolveAccessor } from '../../../utils/accessors';
+import { merge } from '../../../utils/merge';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 /** A processed channel as a per-row function. */
 function readChannel(channel) {
     return resolveAccessor(channel);
@@ -103,8 +105,10 @@ export function buildMarks(state, ctx) {
             return base;
         return { ...base, ...DisabledStyle.fill(range.disabledStyle) };
     }
+    // `styles.area`, as the cell's series sets it: what every cell is drawn with, under its segments.
     function getCellStyle(d) {
-        return rangeFilteredStyle(segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {}, Number(getColor(d)));
+        const base = state.segmentBase?.(String(d[SERIES_KEY]));
+        return rangeFilteredStyle(merge(base ?? {}, segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`)), Number(getColor(d)));
     }
     const styleGroups = (() => {
         const groups = new Map();

package/dist/plots/correlation/scatter/defaults.js

@@ -63,7 +63,8 @@ export function buildScatterDefaults() {
         data: {
             segments: {
                 color: (style) => style?.dotFill,
-                connect: false
+                connect: false,
+                base: { flat: 'dot' }
             }
         },
         transforms: { groups: 'runs' },

package/dist/plots/distribution/box/defaults.js

@@ -14,7 +14,11 @@ export function buildBoxDefaults() {
     return {
         data: {
             discreteAxes: 1,
-            segments: { color: (style) => style?.fill, connect: false }
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            }
         },
         scales: {
             bandOrder: 'data',

package/dist/plots/distribution/box/markers.js

@@ -15,7 +15,14 @@ export function buildMarks(state, ctx) {
         const disabled = ctx.interaction?.fillFor(name);
         return group.visualSegments.map((seg) => {
             const { stroke, strokeWidth, strokeOpacity, borderRadius } = seg.styles;
-            const outline = { stroke, strokeWidth, strokeOpacity, borderRadius };
+            const fill = disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name);
+            // An outline asked for without a color is the fill's.
+            const outline = {
+                stroke: stroke ?? (strokeWidth !== undefined ? fill : undefined),
+                strokeWidth,
+                strokeOpacity,
+                borderRadius
+            };
             return {
                 type: 'box',
                 series: name,
@@ -25,7 +32,7 @@ export function buildMarks(state, ctx) {
                 bar: {
                     // The box's own outline, from its segment; unset fields stay svelteplot's.
                     ...Object.fromEntries(Object.entries(outline).filter(([, v]) => v !== undefined)),
-                    fill: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name),
+                    fill,
                     fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.box.fillOpacity
                 }
             };

package/dist/plots/distribution/density/defaults.js

@@ -19,7 +19,13 @@ function mergeDensity(own, horizontal) {
  */
 export function buildDensityDefaults() {
     return {
-        data: { segments: { color: (style) => style?.fill, connect: false } },
+        data: {
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            }
+        },
         transforms: {
             transforms: (state) => mergeDensity(state.transforms ?? [], state.axes?.isHorizontal ?? false)
         },

package/dist/plots/distribution/density/markers.js

@@ -24,6 +24,10 @@ export function buildMarks(state, ctx) {
                     strokeDasharray: disabledStroke?.strokeDasharray ?? seg.styles.strokeDasharray
                 }
                 : {
+                    // An outline asked for without a color is the fill's.
+                    ...(seg.styles.strokeWidth !== undefined
+                        ? { stroke: disabledFill?.fill ?? color }
+                        : {}),
                     ...seg.styles,
                     fill: disabledFill?.fill ?? color,
                     fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.density.fillOpacity

package/dist/plots/distribution/histogram/defaults.js

@@ -32,7 +32,13 @@ function mergeBin(own, cfg, horizontal) {
  */
 export function buildHistogramDefaults() {
     return {
-        data: { segments: { color: (style) => style?.fill, connect: false } },
+        data: {
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            }
+        },
         transforms: {
             transforms: (state, ctx) => mergeBin(state.transforms ?? [], ctx.cfg, state.axes?.isHorizontal ?? false)
         },

package/dist/plots/distribution/histogram/markers.js

@@ -72,6 +72,8 @@ export function buildMarks(state, ctx) {
     const fillOpacity = ctx.cfg.histogram.fillOpacity;
     const rects = (state.processedGroups ?? []).flatMap((group) => {
         const disabled = ctx.interaction?.fillFor(group.series.name);
+        // A stroke the segment sets is not a reason to lose the series' fill, as the marker would take it for the color.
+        const color = state.colorForSeries(group.series.name);
         return group.visualSegments.map((seg) => Transforms.finish({
             type: 'rect',
             series: group.series.name,
@@ -79,9 +81,15 @@ export function buildMarks(state, ctx) {
             ...channels,
             ...options,
             styles: {
+                // An outline asked for without a color is the fill's.
+                ...(seg.styles.strokeWidth !== undefined
+                    ? { stroke: disabled?.fill ?? seg.styles.fill ?? color }
+                    : {}),
+                ...seg.styles,
+                fill: disabled?.fill ?? seg.styles.fill ?? color,
                 fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? fillOpacity,
-                ...(seg.styles.fill !== undefined ? { fill: seg.styles.fill } : {}),
-                ...(disabled?.fill !== undefined ? { fill: disabled.fill } : {})
+                // A dimmed series fades its outline with its fill.
+                ...(disabled?.fillOpacity !== undefined ? { strokeOpacity: disabled.fillOpacity } : {})
             }
         }, transforms));
     });

package/dist/plots/distribution/pyramid/defaults.js

@@ -20,7 +20,11 @@ export function buildPyramidDefaults() {
     return {
         data: {
             discreteAxes: 1,
-            segments: { color: (style) => style?.fill, connect: false },
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            },
             orderSeries: (series, state) => {
                 const sorted = [...series].sort(byName).map((s) => s.name);
                 const reversed = state.scales.grouping?.reverse ?? false;

package/dist/plots/distribution/pyramid/markers.js

@@ -119,8 +119,17 @@ export function buildMarks(state, ctx) {
                 data: realData,
                 ...span(processedCategory, signed),
                 styles: {
+                    // An outline asked for without a color is the fill's.
+                    ...(seg.styles.strokeWidth !== undefined
+                        ? { stroke: disabledFill?.fill ?? seg.styles.fill ?? defaultColor }
+                        : {}),
+                    ...seg.styles,
                     fill: disabledFill?.fill ?? seg.styles.fill ?? defaultColor,
-                    fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1
+                    fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1,
+                    // A dimmed series fades its outline with its fill.
+                    ...(disabledFill?.fillOpacity !== undefined
+                        ? { strokeOpacity: disabledFill.fillOpacity }
+                        : {})
                 }
             });
         }

package/dist/plots/distribution/violin/defaults.js

@@ -34,7 +34,11 @@ export function buildViolinDefaults() {
     return {
         data: {
             discreteAxes: 1,
-            segments: { color: (style) => style?.fill, connect: false }
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            }
         },
         scales: {
             bandOrder: 'data',

package/dist/plots/distribution/violin/markers.js

@@ -45,6 +45,10 @@ export function buildMarks(state, ctx) {
             peak,
             slot: { index, count: groups.length },
             styles: {
+                // An outline asked for without a color is the fill's.
+                ...(seg.styles.strokeWidth !== undefined
+                    ? { stroke: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name) }
+                    : {}),
                 ...seg.styles,
                 fill: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name),
                 fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.violin.fillOpacity

package/dist/plots/evolution/area/defaults.js

@@ -3,7 +3,9 @@ import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /** AreaPlot on the shared pipeline: areas from a zero baseline, author markers taking the plot's `x`/`y`, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export function buildAreaDefaults() {
     return {
-        data: { segments: { color: (style) => style?.fill } },
+        data: {
+            segments: { color: (style) => style?.fill, base: { flat: 'area' } }
+        },
         statistics: { inheritPositions: true },
         scales: { zero: ['y'] },
         transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },