@fundar/data-chart-telling 1.8.1 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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.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
+
+- A continuous legend no longer lets its labels touch. Its edge labels (the two ends of the domain) are always written; a tick label is left out, with its mark, when it comes within `legend.continuous.label.overlap.margin` px of an edge label or of a tick before it (weighed from the low end up). Before, a tick near an end was written over it.
+- In the interactive continuous legend, handle labels that meet no longer turn vertical: the label of the handle that rests on the domain's end is hidden, and the moving one stays horizontal and writes both values (`18% – 20%`) until they part. That label follows its handle but is kept inside the legend's width. If both or neither rest on an end, the one moved last stays.
+
+- `legend.continuous.label.weight` (`--dct-continuous-label-weight`) styles every label of a continuous legend - the edges, the ticks and the interactive handles - and defaults to `400`. It styled only the handle labels, at `600`, so an interactive legend wrote its values in bold and a plain one did not. Set it to `600` to keep the old look of the handles.
+
+### Removed
+
+- `legend.continuous.label.overlap.rotate` and its CSS variable `--dct-continuous-label-overlap-rotate`: there is no vertical label to rotate any more. `overlap.enabled` and `overlap.margin` stay, and now govern both behaviours above.
+
 ## [1.8.1] - 2026-11-02
 
 ### Fixed

package/dist/configuration/config.svelte.js

@@ -140,11 +140,10 @@ export const DEFAULT_CONFIG = {
             label: {
                 rotate: '0deg',
                 size: '0.875rem',
-                weight: 600,
+                weight: 400,
                 overlap: {
                     enabled: true,
-                    margin: 4,
-                    rotate: '90deg'
+                    margin: 4
                 }
             }
         }
@@ -304,7 +303,7 @@ export const DEFAULT_CONFIG = {
         dotRadius: 4,
         gap: {
             stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
-            dots: {}
+            dot: {}
         }
     },
     lollipop: {
@@ -392,7 +391,6 @@ export function configToCssVars(c) {
         '--dct-continuous-label-rotate': c.legend.continuous.label.rotate,
         '--dct-continuous-label-size': c.legend.continuous.label.size,
         '--dct-continuous-label-weight': String(c.legend.continuous.label.weight),
-        '--dct-continuous-label-overlap-rotate': c.legend.continuous.label.overlap.rotate,
         '--dct-tooltip-bg': c.tooltip.background,
         '--dct-tooltip-color': c.tooltip.color,
         '--dct-tooltip-size': c.tooltip.fontSize,

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/ContinuousSection.svelte

@@ -51,6 +51,32 @@
 				}))
 	);
 
+	// ── Labels that would touch ───────────────────────────────────────────────
+	// The edge labels (the domain's two ends) are always written. A tick label stays only if it clears them and
+	// every tick kept before it, by `overlap.margin` px; ticks are weighed from the low end up.
+	const overlapLook = $derived(cfg.legend.continuous.label.overlap);
+	let edgeWidths = $state({ start: 0, end: 0 });
+	let tickWidths = $state<Record<number, number>>({});
+
+	const hiddenTicks = $derived.by((): number[] => {
+		const hidden: number[] = [];
+		if (isInteractive || !overlapLook.enabled) return hidden;
+		const margin = overlapLook.margin;
+		const taken: [number, number][] = [
+			[0, edgeWidths.start],
+			[barWidth - edgeWidths.end, barWidth]
+		];
+		for (const tick of [...tickPositions].sort((a, b) => a.t - b.t)) {
+			const half = (tickWidths[tick.v] ?? 0) / 2;
+			const from = trackX(tick.t) - half;
+			const to = trackX(tick.t) + half;
+			if (taken.some(([start, end]) => from < end + margin && to > start - margin))
+				hidden.push(tick.v);
+			else taken.push([from, to]);
+		}
+		return hidden;
+	});
+
 	// ── Drag-to-narrow-margins ────────────────────────────────────────────────
 	const interaction = LegendState.ensure();
 
@@ -58,6 +84,9 @@
 	let lo = $state(untrack(() => section.min));
 	let hi = $state(untrack(() => section.max));
 
+	// The handle moved last, which keeps its label when the two labels meet and one has to go.
+	let lastDragged = $state<'lo' | 'hi' | null>(null);
+
 	// Whether each handle was dragged; an untouched one follows the section's bounds.
 	let loAdjusted = $state(false);
 	let hiAdjusted = $state(false);
@@ -150,6 +179,7 @@
 			event.preventDefault();
 			if (which === 'lo') loAdjusted = true;
 			else hiAdjusted = true;
+			lastDragged = which;
 			const target = event.currentTarget as SVGElement;
 			target.setPointerCapture(event.pointerId);
 			const startX = event.clientX;
@@ -190,12 +220,40 @@
 
 	let loLabelWidth = $state(0);
 	let hiLabelWidth = $state(0);
+	let mergedLabelWidth = $state(0);
 
 	const labelsOverlap = $derived(
 		isInteractive &&
-			cfg.legend.continuous.label.overlap.enabled &&
-			(hiT - loT) * trackWidth - loLabelWidth - hiLabelWidth <
-				cfg.legend.continuous.label.overlap.margin
+			overlapLook.enabled &&
+			(hiT - loT) * trackWidth - loLabelWidth - hiLabelWidth < overlapLook.margin
+	);
+
+	// When the handle labels meet, the one whose handle still sits on the domain's end gives way and the moving
+	// one stays, horizontal, and writes both values ("18% – 20%"). If both or neither sit on an end, the one moved
+	// last stays.
+	const hiddenHandle = $derived.by((): 'lo' | 'hi' | null => {
+		if (!labelsOverlap) return null;
+		const loOnEnd = lo <= section.min;
+		const hiOnEnd = hi >= section.max;
+		if (loOnEnd !== hiOnEnd) return loOnEnd ? 'lo' : 'hi';
+		return lastDragged === 'lo' ? 'hi' : 'lo';
+	});
+	const survivingHandle = $derived(
+		hiddenHandle === null ? null : hiddenHandle === 'lo' ? 'hi' : 'lo'
+	);
+	const mergedLabel = $derived(`${fmt(lo)} – ${fmt(hi)}`);
+
+	// Where each handle label is anchored: at its handle, except the merged one, which follows its handle but is
+	// kept inside the legend's width, growing inward from the end it sits at.
+	const loLabelLeft = $derived(
+		survivingHandle === 'lo'
+			? Math.max(0, Math.min(trackX(loT), barWidth - mergedLabelWidth))
+			: trackX(loT)
+	);
+	const hiLabelLeft = $derived(
+		survivingHandle === 'hi'
+			? Math.min(barWidth, Math.max(trackX(hiT), mergedLabelWidth))
+			: trackX(hiT)
 	);
 </script>
 
@@ -247,7 +305,9 @@
 			fill="url(#{gradientId})"
 		/>
 		{#each tickPositions as tick (tick.v)}
-			<rect class="dct-continuous__tick-mark" x={trackX(tick.t)} y={barHeight} />
+			{#if !hiddenTicks.includes(tick.v)}
+				<rect class="dct-continuous__tick-mark" x={trackX(tick.t)} y={barHeight} />
+			{/if}
 		{/each}
 
 		{#if isInteractive}
@@ -328,22 +388,37 @@
 			<span class="dct-continuous__tick-measure" aria-hidden="true" bind:clientWidth={hiLabelWidth}
 				>{fmt(hi)}</span
 			>
+			<span
+				class="dct-continuous__tick-measure"
+				aria-hidden="true"
+				bind:clientWidth={mergedLabelWidth}>{mergedLabel}</span
+			>
 			<span
 				class="dct-continuous__tick dct-continuous__tick--handle-lo"
-				class:dct-continuous__tick--vertical={labelsOverlap}
-				style:left="{trackX(loT)}px">{fmt(lo)}</span
+				class:dct-continuous__tick--hidden={hiddenHandle === 'lo'}
+				style:left="{loLabelLeft}px">{survivingHandle === 'lo' ? mergedLabel : fmt(lo)}</span
 			>
 			<span
 				class="dct-continuous__tick dct-continuous__tick--handle-hi"
-				class:dct-continuous__tick--vertical={labelsOverlap}
-				style:left="{trackX(hiT)}px">{fmt(hi)}</span
+				class:dct-continuous__tick--hidden={hiddenHandle === 'hi'}
+				style:left="{hiLabelLeft}px">{survivingHandle === 'hi' ? mergedLabel : fmt(hi)}</span
 			>
 		{:else}
-			<span class="dct-continuous__edge dct-continuous__edge--start">{fmt(section.min)}</span>
+			<span
+				class="dct-continuous__edge dct-continuous__edge--start"
+				bind:clientWidth={edgeWidths.start}>{fmt(section.min)}</span
+			>
 			{#each tickPositions as tick (tick.v)}
-				<span class="dct-continuous__tick" style:left="{trackX(tick.t)}px">{tick.label}</span>
+				<span
+					class="dct-continuous__tick"
+					class:dct-continuous__tick--hidden={hiddenTicks.includes(tick.v)}
+					style:left="{trackX(tick.t)}px"
+					bind:clientWidth={tickWidths[tick.v]}>{tick.label}</span
+				>
 			{/each}
-			<span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+			<span class="dct-continuous__edge dct-continuous__edge--end" bind:clientWidth={edgeWidths.end}
+				>{fmt(section.max)}</span
+			>
 		{/if}
 	</div>
 </div>
@@ -358,6 +433,7 @@
 		position: relative;
 		height: 1rem;
 		font-size: var(--dct-continuous-label-size, 0.875rem);
+		font-weight: var(--dct-continuous-label-weight, 400);
 		user-select: none;
 	}
 	.dct-continuous__edge {
@@ -376,10 +452,6 @@
 		transform: translateX(-50%) rotate(var(--dct-continuous-label-rotate, 0deg));
 	}
 	/* Anchored outward so the label grows into the bar. */
-	.dct-continuous__tick--handle-lo,
-	.dct-continuous__tick--handle-hi {
-		font-weight: var(--dct-continuous-label-weight, 600);
-	}
 	.dct-continuous__tick--handle-lo {
 		transform: rotate(var(--dct-continuous-label-rotate, 0deg));
 	}
@@ -392,13 +464,10 @@
 		position: absolute;
 		visibility: hidden;
 		white-space: nowrap;
-		font-weight: var(--dct-continuous-label-weight, 600);
 	}
-	/* Handle labels that would collide read top to bottom, pivoting on their anchor. */
-	.dct-continuous__tick--handle-lo.dct-continuous__tick--vertical,
-	.dct-continuous__tick--handle-hi.dct-continuous__tick--vertical {
-		transform-origin: left bottom;
-		transform: rotate(var(--dct-continuous-label-overlap-rotate, 90deg));
+	/* A label that would touch another keeps its place, so its width stays measured, and is not drawn. */
+	.dct-continuous__tick--hidden {
+		visibility: hidden;
 	}
 	/* Tick mark below the bar at each non-interactive tick's position. */
 	.dct-continuous__tick-mark {

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/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/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 } },