@fundar/data-chart-telling 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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

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

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

@@ -26,14 +26,23 @@ export function buildMarks(state, ctx) {
     };
     // The dim channel: each area reads its own series name, looked up in `opacityScale`.
     const dimByName = (name) => dimmed ? { opacity: () => name, scales: { opacity: opacityScale } } : {};
-    const areas = (state.processedGroups ?? []).flatMap((group) => group.visualSegments.map((seg) => Transforms.finish({
-        type: 'area',
-        series: group.series.name,
-        data: seg.data,
-        ...channels,
-        ...options,
-        styles: seg.styles,
-        ...dimByName(group.series.name)
-    }, transforms)));
+    const areas = (state.processedGroups ?? []).flatMap((group) => group.visualSegments.map((seg) => {
+        // A stroke the segment sets is not a reason to lose the series' fill, as the marker would take it for the color.
+        const fill = seg.styles.fill ?? state.colorForSeries(group.series.name);
+        return Transforms.finish({
+            type: 'area',
+            series: group.series.name,
+            data: seg.data,
+            ...channels,
+            ...options,
+            styles: {
+                // An outline asked for without a color is the fill's.
+                ...(seg.styles.strokeWidth !== undefined ? { stroke: fill } : {}),
+                ...seg.styles,
+                fill
+            },
+            ...dimByName(group.series.name)
+        }, transforms);
+    }));
     return areas;
 }

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

@@ -3,7 +3,12 @@ import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /** LinePlot on the shared pipeline: continuous segments colored by their stroke, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export function buildLineDefaults() {
     return {
-        data: { segments: { color: (style) => style?.stroke?.stroke } },
+        data: {
+            segments: {
+                color: (style) => style?.stroke?.stroke,
+                base: { nested: ['stroke', 'dot'] }
+            }
+        },
         statistics: {
             // An unscoped marker takes the line's own stroke when its first segment restyles it,
             // else the first series' color.

package/dist/plots/evolution/line/markers.d.ts

@@ -10,7 +10,7 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
  * for one LinePlot render: one `'line'` marker per visual segment, plus a
- * `'dot'` marker right after it when that segment sets `style.dots`.
+ * `'dot'` marker right after it when that segment sets `style.dot`.
  */
 export declare function buildLineMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, LineSegmentStyle>[];
@@ -21,7 +21,7 @@ export declare function buildLineMarkers<TData extends Record<string, unknown>>(
     curve?: CurveName;
 }): (LineMarkerConfig | DotMarkerConfig)[];
 /**
- * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dot`) 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

package/dist/plots/evolution/line/markers.js

@@ -3,7 +3,7 @@ import { resolveGapRuns, resolveGapsForSeries } from '../../utils/gaps';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
  * for one LinePlot render: one `'line'` marker per visual segment, plus a
- * `'dot'` marker right after it when that segment sets `style.dots`.
+ * `'dot'` marker right after it when that segment sets `style.dot`.
  */
 export function buildLineMarkers(args) {
     const { groupedSeries, colorFor, disabledStrokeFor, disabledDotsFor, curve } = args;
@@ -23,7 +23,7 @@ export function buildLineMarkers(args) {
         const y = group.series.y;
         for (const seg of group.visualSegments) {
             const strokeStyle = seg.styles.stroke;
-            const dotStyle = seg.styles.dots;
+            const dotStyle = seg.styles.dot;
             markers.push({
                 type: 'line',
                 data: seg.data,
@@ -70,7 +70,7 @@ export function buildLineMarkers(args) {
 const gx = (p) => p.x;
 const gy = (p) => p.y;
 /**
- * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dot`) 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
@@ -100,7 +100,7 @@ export function buildGapMarkers(args) {
         const disabledDots = disabledDotsFor(series.name);
         for (const run of runs) {
             const strokeStyle = run.zone.style?.stroke;
-            const dotStyle = run.zone.style?.dots;
+            const dotStyle = run.zone.style?.dot;
             markers.push({
                 type: 'line',
                 data: run.points,
@@ -128,7 +128,7 @@ export function buildGapMarkers(args) {
             });
             if (!dotStyle)
                 continue;
-            const dotDefaults = gapDefaults.dots;
+            const dotDefaults = gapDefaults.dot;
             const endpoints = [run.points[0], run.points[run.points.length - 1]];
             markers.push({
                 type: 'dot',

package/dist/plots/evolution/slope/markers.js

@@ -20,7 +20,7 @@ export function buildMarks(state, ctx) {
             styles: {
                 ...segment.styles,
                 stroke: { strokeWidth: slope.strokeWidth, ...segment.styles.stroke },
-                dots: { dotRadius: slope.dotRadius, ...segment.styles.dots }
+                dot: { dotRadius: slope.dotRadius, ...segment.styles.dot }
             }
         }))
     }));

package/dist/plots/ranking/bar/defaults.js

@@ -45,7 +45,11 @@ export function buildBarDefaults() {
     return {
         data: {
             discreteAxes: 1,
-            segments: { color: (style) => style?.fill, connect: false }
+            segments: {
+                color: (style) => style?.fill,
+                connect: false,
+                base: { flat: 'area' }
+            }
         },
         scales: {
             zero: ['value'],

package/dist/plots/ranking/bar/markers.js

@@ -195,9 +195,17 @@ export function buildMarks(state, ctx) {
         const defaultColor = colorForSeries(name);
         const disabledFill = ctx.interaction?.fillFor(name);
         for (const seg of group.visualSegments) {
+            const fill = disabledFill?.fill ?? seg.styles.fill ?? defaultColor;
             const marker = makeMarker(seg.data.filter(isReal), slice, valueOf(group.series[valueAxis]), {
-                fill: disabledFill?.fill ?? seg.styles.fill ?? defaultColor,
-                fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1
+                // An outline asked for without a color is the fill's.
+                ...(seg.styles.strokeWidth !== undefined ? { stroke: fill } : {}),
+                ...seg.styles,
+                fill,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1,
+                // A dimmed series fades its outline with its fill.
+                ...(disabledFill?.fillOpacity !== undefined
+                    ? { strokeOpacity: disabledFill.fillOpacity }
+                    : {})
             });
             if (marker)
                 segmentMarkers.push(marker);

package/dist/plots/ranking/cleveland/ClevelandMarkers.js

@@ -4,6 +4,7 @@ import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { ClevelandRanges } from './ClevelandRanges';
 import { ClevelandConnector } from './ClevelandConnector';
+import { BasicStyles } from '../../../layout/styles/BasicStyles';
 /** The messages already warned about, so a plot that redraws warns once. */
 const warned = new Set();
 /**
@@ -45,14 +46,20 @@ export class ClevelandMarkers {
         const size = state.channels?.r;
         const dotRadius = typeof size === 'number' ? size : style.dotRadius;
         const neutral = style.connectorColor ?? cfg.axis.color;
+        // `styles.stroke` is the connectors' look below everything the author sets for them: a segment's
+        // stroke wins over `styles.connector`, which wins over it. A function of the series styles only
+        // the connector of a lone dot, which has a series; the connector of several dots has none.
+        const baseStroke = state.styles?.stroke;
         const looks = ranges.entries.map((entry) => {
             const range = connector.rangeOf(entry);
             const owner = range.series === undefined ? undefined : segmentOf.get(entry.dots[0].row);
             const stem = owner?.styles.stroke;
+            const base = BasicStyles.read(baseStroke, range.series);
             const disabled = owner && interaction?.strokeFor(owner.series);
             const strokeWidth = disabled?.strokeWidth ??
                 stem?.strokeWidth ??
                 connector.width(range, dotRadius) ??
+                base?.strokeWidth ??
                 (style.stemWidth === 'dots' ? dotRadius * 2 : style.stemWidth);
             // The stretch between the `from` and `to` dots, in the connector's look...
             const [start, end] = range.span ?? [entry.from, entry.to];
@@ -65,9 +72,14 @@ export class ClevelandMarkers {
                 stroke: disabled?.stroke ??
                     stem?.stroke ??
                     connector.color(range) ??
+                    base?.stroke ??
                     (owner ? state.colorForSeries(owner.series) : neutral),
                 strokeWidth,
-                strokeOpacity: disabled?.strokeOpacity ?? stem?.strokeOpacity ?? connector.opacity(range) ?? 1
+                strokeOpacity: disabled?.strokeOpacity ??
+                    stem?.strokeOpacity ??
+                    connector.opacity(range) ??
+                    base?.strokeOpacity ??
+                    1
             };
             // ...as an arrow from one dot to the other, when the connector asks for one...
             const arrow = connector.arrow;
@@ -103,14 +115,19 @@ export class ClevelandMarkers {
                 // A stretch drawn as an arrow is not one of the lines.
                 rows: drawn ? beyond : [span, ...beyond],
                 arrow: drawn,
-                dash: disabled?.strokeDasharray ?? stem?.strokeDasharray
+                // What a stroke draws all of a marker's rows alike with, which a marker takes once for them.
+                pattern: ClevelandMarkers.#pattern(disabled?.strokeDasharray ?? stem?.strokeDasharray ?? base?.strokeDasharray, disabled?.strokeLinecap ?? stem?.strokeLinecap ?? base?.strokeLinecap, disabled?.strokeLinejoin ?? stem?.strokeLinejoin ?? base?.strokeLinejoin)
             };
         });
-        // One rule marker per dash pattern, which a marker takes once for all its rows.
-        const byDash = new Map();
-        for (const look of looks)
-            byDash.set(look.dash, [...(byDash.get(look.dash) ?? []), look]);
-        const rules = [...byDash].map(([dash, group]) => ({
+        // One rule marker per dash, cap and join pattern, which a marker takes once for all its rows.
+        const byPattern = new Map();
+        for (const look of looks) {
+            const key = JSON.stringify(look.pattern);
+            const group = byPattern.get(key) ?? { pattern: look.pattern, looks: [] };
+            group.looks.push(look);
+            byPattern.set(key, group);
+        }
+        const rules = [...byPattern.values()].map(({ pattern, looks: group }) => ({
             type: 'rule',
             // A connector is not what the series look like: its dots are.
             legend: false,
@@ -121,11 +138,11 @@ export class ClevelandMarkers {
             stroke: 'stroke',
             strokeWidth: 'strokeWidth',
             strokeOpacity: 'strokeOpacity',
-            ...(dash ? { styles: { strokeDasharray: dash } } : {})
+            ...(Object.keys(pattern).length > 0 ? { styles: pattern } : {})
         }));
-        // The arrows, one marker per dash pattern like the lines, each from its `from` dot to its `to` dot.
+        // The arrows, one marker per pattern like the lines, each from its `from` dot to its `to` dot.
         const head = connector.arrow;
-        const arrows = [...byDash].flatMap(([dash, group]) => {
+        const arrows = [...byPattern.values()].flatMap(({ pattern, looks: group }) => {
             const rows = group.flatMap((look) => (look.arrow ? [look.arrow] : []));
             if (rows.length === 0 || !head)
                 return [];
@@ -145,7 +162,7 @@ export class ClevelandMarkers {
                     stroke: 'stroke',
                     strokeWidth: 'strokeWidth',
                     strokeOpacity: 'strokeOpacity',
-                    ...(dash ? { styles: { strokeDasharray: dash } } : {})
+                    ...(Object.keys(pattern).length > 0 ? { styles: pattern } : {})
                 }
             ];
         });
@@ -161,7 +178,7 @@ export class ClevelandMarkers {
             const disabled = interaction?.dotsFor(name);
             return group.visualSegments.map((segment) => {
                 const stem = segment.styles.stroke;
-                const dot = segment.styles.dots;
+                const dot = segment.styles.dot;
                 return {
                     type: 'dot',
                     series: name,
@@ -188,6 +205,14 @@ export class ClevelandMarkers {
             ...this.#connectorLabels(state, ctx, connector, looks, isHorizontal)
         ];
     };
+    /** The dash, cap and join a connector is drawn with, leaving out what is not set. */
+    static #pattern(strokeDasharray, strokeLinecap, strokeLinejoin) {
+        return {
+            ...(strokeDasharray ? { strokeDasharray } : {}),
+            ...(strokeLinecap ? { strokeLinecap } : {}),
+            ...(strokeLinejoin ? { strokeLinejoin } : {})
+        };
+    }
     /** The caps of the connectors: a tick at each end of those that have a length, one marker per stroke look. */
     #caps(entries, looks, length, isHorizontal) {
         const byLook = new Map();

package/dist/plots/ranking/cleveland/defaults.js

@@ -39,8 +39,10 @@ export function buildClevelandDefaults(options = { name: 'ClevelandPlot', config
         data: {
             discreteAxes: 1,
             segments: {
-                color: (style) => style?.dots?.dotFill ?? style?.stroke?.stroke,
-                connect: false
+                color: (style) => style?.dot?.dotFill ?? style?.stroke?.stroke,
+                connect: false,
+                // The stem's `styles.stroke` is not a segment's: a connector the author styles wins over it (see `ClevelandMarkers`).
+                base: { nested: ['dot'] }
             }
         },
         scales: {

package/dist/plots/utils/segments.d.ts

@@ -24,7 +24,7 @@ export declare function matchesSegmentX<TStyle>(xVal: AxisValue, seg: Segment<TS
  * which it overrides in its own panels.
  */
 export declare function validateSegments<TStyle>(segments: SegmentsConfig<TStyle>): void;
-export declare function buildGroupedSeries<S extends Series<any>, TStyle = LineSegmentStyle>(seriesList: S[], segments?: SegmentsConfig<TStyle>, connect?: boolean): VisualGroup<S, TStyle>[];
+export declare function buildGroupedSeries<S extends Series<any>, TStyle = LineSegmentStyle>(seriesList: S[], segments?: SegmentsConfig<TStyle>, connect?: boolean, baseFor?: (seriesName: string) => TStyle | undefined): VisualGroup<S, TStyle>[];
 /**
  * Builds the `ScopedMarkerGroup[]` a `Plot.svelte` hands to `GeometryLayout`
  * for rendering `series`-scoped `hover`/`component` markers - one group per
@@ -39,4 +39,6 @@ export declare function buildScopedMarkerGroups<TData extends Record<string, unk
     segments?: SegmentsConfig<TStyle>;
     colorFor: (series: S, seriesIndex: number) => string;
     segmentColorFor: (styles: TStyle | undefined, defaultColor: string) => string;
+    /** The style each series' segments are drawn over, as `buildGroupedSeries` takes it. */
+    baseFor?: (seriesName: string) => TStyle | undefined;
 }): ScopedMarkerGroup<TData>[];

package/dist/plots/utils/segments.js

@@ -75,9 +75,17 @@ export function validateSegments(segments) {
     }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function resolveSeriesSegments(series, segs, connect) {
+function resolveSeriesSegments(series, segmentsOfSeries, connect, base) {
+    // The style every segment is drawn over: each one's own wins, field by field.
+    const baseStyle = (base ?? {});
+    const segs = base
+        ? segmentsOfSeries.map((seg) => ({
+            ...seg,
+            styles: merge(base, (seg.styles ?? {}))
+        }))
+        : segmentsOfSeries;
     if (!segs.length) {
-        return [{ data: series.data, styles: {}, scales: undefined }];
+        return [{ data: series.data, styles: baseStyle, scales: undefined }];
     }
     const getX = readChannel(series.x);
     const getY = readChannel(series.y);
@@ -121,10 +129,8 @@ function resolveSeriesSegments(series, segs, connect) {
     // Dots are excluded to avoid duplicate marks at the shared boundary points.
     const catchAll = segs.find((s) => !s.areas || s.areas.length === 0);
     const connectorStyle = (() => {
-        if (!catchAll?.styles)
-            return {};
-        const rest = { ...catchAll.styles };
-        delete rest.dots;
+        const rest = { ...(catchAll?.styles ?? baseStyle) };
+        delete rest.dot;
         return rest;
     })();
     const defaultVisual = [];
@@ -133,19 +139,33 @@ function resolveSeriesSegments(series, segs, connect) {
     for (let r = 0; r < runs.length; r++) {
         const run = runs[r];
         if (run.segIdx === -1) {
-            // Unmatched run: for a continuous mark (line), insert bridge points so
-            // it connects to adjacent user segments without a visual gap. Discrete
-            // marks (bar, pyramid) have no such gap to bridge - bridging would just
+            // Unmatched run: drawn with its own rows only. For a continuous mark
+            // (line), line-only connectors join it to the adjacent user segments
+            // without a visual gap, like those between two user segments, so no
+            // neighbor's boundary row is drawn - or dotted - twice. Discrete marks
+            // (bar, pyramid) have no such gap to bridge - bridging would just
             // duplicate the neighboring runs' boundary rows as an extra, wrongly
             // styled mark at that same category.
-            const bridged = [...run.data];
+            defaultVisual.push({ data: run.data, styles: baseStyle, scales: undefined });
             if (connect) {
-                if (r > 0)
-                    bridged.unshift(runs[r - 1].data[runs[r - 1].data.length - 1]);
-                if (r < runs.length - 1)
-                    bridged.push(runs[r + 1].data[0]);
+                const first = run.data[0];
+                const last = run.data[run.data.length - 1];
+                if (r > 0) {
+                    const before = runs[r - 1].data;
+                    connectors.push({
+                        data: [before[before.length - 1], first],
+                        styles: connectorStyle,
+                        scales: undefined
+                    });
+                }
+                if (r < runs.length - 1) {
+                    connectors.push({
+                        data: [last, runs[r + 1].data[0]],
+                        styles: connectorStyle,
+                        scales: undefined
+                    });
+                }
             }
-            defaultVisual.push({ data: bridged, styles: {}, scales: undefined });
         }
         else {
             const seg = segs[run.segIdx];
@@ -196,10 +216,10 @@ function resolveSeriesSegments(series, segs, connect) {
 function readChannel(accessor) {
     return accessor === undefined ? () => undefined : resolveAccessor(accessor);
 }
-export function buildGroupedSeries(seriesList, segments = {}, connect = true) {
+export function buildGroupedSeries(seriesList, segments = {}, connect = true, baseFor) {
     return seriesList.map((s) => ({
         series: s,
-        visualSegments: resolveSeriesSegments(s, resolveSegmentsForSeries(segments, s), connect)
+        visualSegments: resolveSeriesSegments(s, resolveSegmentsForSeries(segments, s), connect, baseFor?.(s.name))
     }));
 }
 /**
@@ -212,11 +232,12 @@ export function buildGroupedSeries(seriesList, segments = {}, connect = true) {
  * that isn't shared across plot kinds.
  */
 export function buildScopedMarkerGroups(args) {
-    const { groupedSeries, segments = {}, colorFor, segmentColorFor } = args;
+    const { groupedSeries, segments = {}, colorFor, segmentColorFor, baseFor } = args;
     return groupedSeries.map((group, seriesIndex) => {
         const defaultColor = colorFor(group.series, seriesIndex);
         const xFor = readChannel(group.series.x);
         const segs = resolveSegmentsForSeries(segments, group.series);
+        const base = baseFor?.(group.series.name);
         return {
             name: group.series.name,
             ...(group.series.id !== undefined ? { id: group.series.id } : {}),
@@ -225,7 +246,7 @@ export function buildScopedMarkerGroups(args) {
             color: defaultColor,
             segments: segs.map((seg) => ({
                 match: (row) => matchesSegmentX(xFor(row), seg),
-                color: segmentColorFor(seg.styles, defaultColor)
+                color: segmentColorFor(base ? merge(base, (seg.styles ?? {})) : seg.styles, defaultColor)
             }))
         };
     });

package/dist/types/configuration/styling.d.ts

@@ -454,7 +454,7 @@ export type PlotStylesConfig = {
          */
         gap: {
             stroke: StrokeStyle;
-            dots: DotStyle;
+            dot: DotStyle;
         };
     };
     /** Default lollipop-plot styling. */

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

@@ -11,7 +11,7 @@ export type LegendSectionType = 'discrete' | 'continuous' | 'size' | 'symbol';
 export type LegendDisabledStyle = {
     opacity?: number;
     stroke?: StrokeStyle;
-    dots?: DotStyle;
+    dot?: DotStyle;
     fill?: string;
     fillOpacity?: number;
 };

package/dist/types/layout/styles/base.d.ts

@@ -1,5 +1,6 @@
 import type { FrameProp } from './frame';
 import type { ValuesStyle } from './values';
+import type { StrokeStyle, DotStyle, AreaStyle } from '../../plots/styling';
 /**
  * The fields every plot kind's own `styles` shape shares - the common parent
  * of {@link AxisBasedStylesConfig} and {@link GeoStylesConfig}.
@@ -8,11 +9,36 @@ export type BasePlotStylesConfig = {
     /** Decorative border around the plot's content box - see {@link FrameStyle}. Available on every plot kind. */
     frame?: FrameProp;
 };
+/** A style as it is for every series, or a function of the series' name - `undefined` leaves that series as it is. */
+export type PerSeries<TStyle> = TStyle | ((series: string) => TStyle | undefined);
+/**
+ * The basic styles any plot's marks are made of, as the style every series is
+ * drawn with, before its `segments` restyle a stretch of it. Each takes a style
+ * as it is, or a function of the series' name, to set one series or two apart.
+ * A plot uses the ones its own marks are made of and ignores the rest, so one
+ * `styles` can be shared between plots: `stroke` and `dot` style a line plot's
+ * lines and dots, `area` a bar's. What a segment sets wins over them, field by
+ * field; whatever a legend turned off wins over both.
+ */
+export type BasicStylesConfig = {
+    /** The line of every series: its width, opacity, dashes... The color comes from the `color` scale unless set here. */
+    stroke?: PerSeries<StrokeStyle>;
+    /** The dots of every series. Unset, a series has none but those a segment gives it. */
+    dot?: PerSeries<DotStyle>;
+    /** The area of every series - a bar, a band: its fill, opacity, outline... */
+    area?: PerSeries<AreaStyle>;
+};
+/** The basic styles a plot kind's segment style is made of: nested in it under their own names (a line's `{ stroke, dot }`), or the style itself (an area's `AreaStyle`). */
+export type BasicStylesShape = {
+    nested: (keyof BasicStylesConfig)[];
+} | {
+    flat: keyof BasicStylesConfig;
+};
 /**
  * Top-level rendering style overrides shared by the non-geo plot kinds.
  * Passed as the `styles` prop. Each plot reads only the fields it cares
  * about.
  */
-export type AxisBasedStylesConfig = BasePlotStylesConfig & {
+export type AxisBasedStylesConfig = BasePlotStylesConfig & BasicStylesConfig & {
     values?: ValuesStyle;
 };

package/dist/types/phases/data/phase.d.ts

@@ -1,11 +1,14 @@
 import type { Series } from '../../plots/data/common';
 import type { DiscreteAxesCount } from './axes';
+import type { BasicStylesShape } from '../../layout/styles';
 /** How a plot kind's own mark splits into visual segments. */
 export type SegmentsStageOptions = {
     /** The color a segment's own style sets, if any, for the markers scoped to its series. */
     color?: (style: any) => string | undefined;
     /** Whether adjacent visual segments share their boundary row - a continuous mark (line, area) does. Defaults to `true`. */
     connect?: boolean;
+    /** The basic styles (`styles.stroke`, `styles.dot`, `styles.area`) this kind's segment style is made of, which every segment of a series is drawn over. A segment's own style wins over them, field by field. Left out, the kind draws none of them. */
+    base?: BasicStylesShape;
 };
 /**
  * What differs between plots in the shared "data" stage. Everything else -

package/dist/types/phases/state.d.ts

@@ -61,6 +61,8 @@ export type AxisPlotState<TData extends Record<string, unknown>, TStyle extends
     /** Every series name, before legend-omitted ones are dropped, so colors stay put. */
     allSeriesNames?: string[];
     groupedSeries?: VisualGroup<TSeries, TStyle>[];
+    /** The style every segment of a series is drawn over (see `SegmentsStageOptions.base`), which the "transforms" phase cuts its own groups with too. */
+    segmentBase?: (series: string) => TStyle | undefined;
     flat?: TRow[];
     scopedGroups?: ScopedMarkerGroup<TData>[];
     colorForSeries?: (name: string) => string;

package/dist/types/phases/transforms/phase.d.ts

@@ -26,6 +26,8 @@ export type ProcessedData = {
 /** What the shared "transforms" stage reads from and writes to a plot's state. */
 export type TransformsStageState = {
     resolvedSeries?: Series<any>[];
+    /** The style every segment of a series is drawn over, which the processed groups are cut with too. */
+    segmentBase?: (series: string) => any;
     axes?: PlotAxes;
     /** Each series' gap fills, by series id: the value each missing row is drawn at. */
     gapFillMaps?: Map<string, Map<unknown, {

package/dist/types/plots/segments/common.d.ts

@@ -1,11 +1,11 @@
 import type { StrokeStyle, DotStyle, AreaStyle } from '../styling';
 import type { CurveName } from '../../layout/styles/curve';
-/** Per-segment styling for a line: its curve, its stroke and/or its endpoint dots. */
+/** Per-segment styling for a line: its curve, its stroke and/or its dots. */
 export type LineSegmentStyle = {
     /** How the segment joins its points; `'step'` and its kin draw stairs. Falls back to `styles.curve`, then `'linear'`. */
     curve?: CurveName;
     stroke?: StrokeStyle;
-    dots?: DotStyle;
+    dot?: DotStyle;
 };
 /** Per-segment styling for a bar-shaped mark. Shared by `BarPlot` and `PyramidPlot`. */
 export type BarSegmentStyle = AreaStyle;

package/docs/plots/ranking/dumbbell.md

@@ -35,5 +35,5 @@ Two dots per category, one for each of two series, joined by a connector: the ga
 - `r` sizes the dots by a field (`r="population"`; area follows the value, and the legend gets a size section) or fixes their radius in pixels (`r={8}`).
 - The connector is a neutral gray as thick as the dots are wide (`stemWidth: 'dots'`), a band; its default color and width, the dot radius and the padding come from `dumbbell` in the [configuration](../../theming.md). `styles.connector` restyles it per category (see [Connectors](cleveland.md#connectors)). `styles.connector.arrow` draws it as an arrow from one series to the other, pointing the way the value moved.
 - `styles.values` writes each value past its dot, away from the other one. A label past the lowest dot can reach the axis labels when that dot sits at the edge of the axis; pin `scales.y.domain` (or `x`) wide enough to leave it room.
-- `segments` restyle the dots of chosen categories (`styles: { dots: { dotRadius: 9 } }`, `areas: [{ x: { from: 'Salta', to: 'Salta' } }]`).
+- `segments` restyle the dots of chosen categories (`styles: { dot: { dotRadius: 9 } }`, `areas: [{ x: { from: 'Salta', to: 'Salta' } }]`).
 - The tooltip reads one category at a time, listing its two values.

package/docs/plots/ranking/lollipop.md

@@ -35,5 +35,5 @@ One value per category, drawn as a dot on a thin stem that rises from the baseli
 - The value axis reaches zero, where the stems start; pinning `scales.y.domain` moves the baseline to the nearest end of it, and a negative value hangs below zero.
 - `scales.x.paddingInner` / `paddingOuter` set the room around each lollipop; the defaults, with the dot radius and the stem width (a thin 2 px line), come from `lollipop` in the [configuration](../../theming.md).
 - `styles.values` writes each value just past its dot.
-- `segments` restyle whole categories: `styles: { stroke: {...}, dots: {...} }` restyle their stems and dots (`areas: [{ x: { from: 'Salta', to: 'Salta' } }]`).
+- `segments` restyle whole categories: `styles: { stroke: {...}, dot: {...} }` restyle their stems and dots (`areas: [{ x: { from: 'Salta', to: 'Salta' } }]`).
 - The tooltip reads one lollipop at a time, along the category axis.

package/docs/styles-and-segments.md

@@ -103,6 +103,36 @@ A row whose value is `null`, `undefined` or `NaN` breaks a line. `styles.gaps` b
 - On bar plots only the presence of `x` matters.
 - Unset styles fall back to `line.gap`, `bar.gap` and `pyramid.gap` in the [configuration](theming.md).
 
+### Basic styles
+
+`styles.stroke`, `styles.dot` and `styles.area` set the style every series is drawn with, so `segments` are left for what only part of a series looks like. Each takes a style as it is, or a function of the series' name returning one (`undefined` leaves that series as it is):
+
+```svelte
+<LinePlot
+	styles={{
+		stroke: (name) =>
+			name === 'male' ? { strokeWidth: 2, strokeOpacity: 0.5 } : { strokeWidth: 4 },
+		dot: { dotRadius: 3 }
+	}}
+	...
+/>
+```
+
+- A plot uses the ones its own marks are made of and ignores the rest, so one `styles` can be shared between plots:
+
+  | Plot                                                                                                                       | Uses                                                           |
+  | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+  | `LinePlot`, `SlopePlot`, `SparklinePlot`                                                                                   | `stroke` (the line), `dot` (a dot on every point; unset, none) |
+  | `AreaPlot`, `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot`, `BoxPlot`, `DensityPlot`, `ViolinPlot`, `HeatmapPlot` | `area`                                                         |
+  | `ScatterPlot`                                                                                                              | `dot`                                                          |
+  | `LollipopPlot`, `DumbbellPlot`, `ClevelandPlot`, `ForestPlot`                                                              | `stroke` (the stems and connectors), `dot`                     |
+
+  `GeoPlot` has styles of its own and uses none of them.
+
+- On the plots with connectors, `styles.stroke` (or a segment's `stroke`) styles the stems and connectors: width, color, opacity, dashes and line caps and joins. What the author sets for a connector wins over it: a segment's `stroke` wins over `styles.connector`, which wins over `styles.stroke`. A function of the series styles only the connector of a lone dot, which has a series; the connector of several dots takes a style as it is.
+- A series keeps the color of the `color` scale unless the style sets its own.
+- A segment's own style wins over them, field by field, and what a legend turned off dims over both - so a `legend.off` fades a series without `segments` repeating its opacity.
+
 ## Segments
 
 `segments` separates data ranges from their styling. It is an object: each key is a series name (a feature id for `GeoPlot`), or `'default'`, mapped to a list of segments.
@@ -125,7 +155,7 @@ The style shape depends on the plot:
 
 | Plot                        | Style type                         | Fields                                         |
 | --------------------------- | ---------------------------------- | ---------------------------------------------- |
-| `LinePlot`                  | `LineSegmentStyle`                 | `stroke` (line style), `dots` (dot style)      |
+| `LinePlot`                  | `LineSegmentStyle`                 | `stroke` (line style), `dot` (dot style)       |
 | `AreaPlot`, `HistogramPlot` | `AreaStyle`                        | `fill`, `fillOpacity`, `stroke`, ...           |
 | `BarPlot`, `PyramidPlot`    | `BarSegmentStyle` (`AreaStyle`)    | `fill`, `fillOpacity`, `stroke`, ...           |
 | `HeatmapPlot`               | `CellSegmentStyle` (`AreaStyle`)   | `fill`, `fillOpacity`, `stroke`, `strokeWidth` |
@@ -192,7 +222,7 @@ Per-series colors, plus dots over a range shared by every series:
 		default: [
 			{
 				areas: [{ x: { from: 1965, to: 1980 } }],
-				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+				styles: { dot: { dotRadius: 5, dotSymbol: 'circle' } }
 			}
 		]
 	}}

package/examples/SegmentsBySeries.svelte

@@ -18,7 +18,7 @@
 		default: [
 			{
 				areas: [{ x: { from: 1965, to: 1980 } }],
-				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+				styles: { dot: { dotRadius: 5, dotSymbol: 'circle' } }
 			}
 		]
 	}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
   "license": "MIT",
   "author": "Ezequiel Puerta",