@fundar/data-chart-telling 1.18.0 → 1.20.0

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

@@ -1,38 +1,28 @@
-import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /**
- * ScatterPlot's `styles.values` as one `'text'` marker over the same
- * processed rows its dots draw, each labelled with its own `y` value. A label
- * sits beside its point and flips to the other side where its text would
- * cross the plot's edge (`edgeAware`).
+ * ScatterPlot's `styles.values` as labels of its dots: each labelled row with its own value, by default on a free
+ * spot around its point (`declutter: 'around'`) - a label with none is left out - or around its rim (`'path'`).
  */
-export function buildValueLabels(labels, state) {
-    const { processedData } = state;
-    if (!processedData?.data.length)
+function buildValueLabels(labels, state, env) {
+    const rows = new Set(state.labelled ?? []);
+    if (rows.size === 0)
         return [];
-    const { font, format } = labels;
-    const position = ProcessedPositions.of(processedData);
     const nameOf = (d) => String(d[SERIES_KEY]);
-    const valueOf = ValueLabels.valueOf(state);
+    const label = labels.label(env, (d) => labels.text(d), {
+        fill: 'currentColor',
+        seriesColor: (d) => state.colorForSeries?.(nameOf(d)),
+        fontSize: 11,
+        fontWeight: 500
+    });
+    if (labels.layout !== 'point')
+        return [label];
     return [
         {
-            type: 'text',
-            data: processedData.data,
-            x: position.x,
-            y: position.y,
-            text: (d) => format(Number(valueOf(d)), d, nameOf(d)),
-            styles: {
-                ...font,
-                fill: font?.fill ?? 'currentColor',
-                fontSize: font?.fontSize ?? 11,
-                fontWeight: font?.fontWeight ?? 500,
-                dx: font?.dx ?? 8,
-                dy: font?.dy ?? 0,
-                textAnchor: labels.textAnchor ?? 'start',
-                lineAnchor: font?.lineAnchor ?? 'middle'
-            },
-            edgeAware: true
+            ...label,
+            select: (row) => rows.has(row),
+            // A label on its own dot stays there; one beside it moves around it to a free spot.
+            declutter: labels.side === 'on' ? undefined : 'around'
         }
     ];
 }
@@ -126,5 +116,8 @@ export function buildMarks(state, env) {
             });
         }
     });
-    return markers;
+    const labels = state.valueLabels?.show
+        ? buildValueLabels(state.valueLabels, state, env)
+        : undefined;
+    return ValueLabels.onMarkers(markers, 'dot', labels);
 }

package/dist/plots/distribution/box/BoxSummaries.d.ts

@@ -1,6 +1,7 @@
 import type { HoverPosition, ProcessedRow } from '../../../types/phases';
 import type { BoxPlotState, BoxSummaryRow } from '../../../types/plots/distribution/box/state';
 import type { BoxSummary } from '../../../types/plots/distribution/box/props';
+import type { PointGeometryOf } from '../../../types/markers/labels/point';
 /**
  * The boxes a box plot draws, one per series, category and facet panel - the same quartiles and whiskers
  * svelteplot's `BoxX`/`BoxY` compute, worked out once as each value's context ({@link context}), so its hover and
@@ -18,6 +19,10 @@ export declare class BoxSummaries {
      * Its own context is the box's, with the median for its value, and where it sits for `x` and `y`.
      */
     static of<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): BoxSummaryRow[];
+    /** Where each part of a box its value labels can write sits: beside the box, at the height of its value. */
+    static partPlacements<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): Record<string, Record<string, unknown>>;
+    /** Where a box's part label sits: at its category, level with the part's value, beside its band. */
+    static labelPoint<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (value: symbol) => PointGeometryOf;
     /** Where a box's summary sits for hover: at its category, level with its median. */
     static position<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): HoverPosition;
     /**

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

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { quantile } from 'd3-array';
 import { SERIES_ID_KEY, SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
@@ -119,6 +120,14 @@ export class BoxSummaries {
             return summary;
         });
     }
+    /** Where each part of a box its value labels can write sits: beside the box, at the height of its value. */
+    static partPlacements(state) {
+        return ValueLabels.besideBand(state, ['min', 'p25', 'median', 'p75', 'max', 'outliers']);
+    }
+    /** Where a box's part label sits: at its category, level with the part's value, beside its band. */
+    static labelPoint(state) {
+        return ValueLabels.bandPoint(state, 'category');
+    }
     /** Where a box's summary sits for hover: at its category, level with its median. */
     static position(state) {
         const valueAxis = PlotAxes.valueOf(state);

package/dist/plots/distribution/box/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildBoxDefaults } from './defaults';
 	import type { BoxPlotProps, BoxPlotCoreProps } from '../../../types/plots/distribution/box/props';
 
@@ -25,7 +25,7 @@
 	}: BoxPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BoxPlotCoreProps<TData>}
 	defaults={buildBoxDefaults}
 	bind:margins

package/dist/plots/distribution/box/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { BoxPlotProps } from '../../../types/plots/distribution/box/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BoxPlotProps<TData>;

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

@@ -29,6 +29,17 @@ export function buildBoxDefaults() {
         },
         // Each value's box: its quartiles and whiskers, worked out once for its tooltip and hover to read.
         context: (state) => BoxSummaries.context(state),
+        styles: {
+            values: {
+                layout: 'point',
+                // A quartile is worked out, not read: at most two decimals, as the tooltip writes it.
+                format: (value, number) => number(Math.round(value * 100) / 100),
+                parts: {
+                    placements: BoxSummaries.partPlacements,
+                    default: ['min', 'median', 'max']
+                }
+            }
+        },
         markers: { marks: buildMarks },
         hover: {
             // The hovered category's band behind its shape.

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

@@ -1,3 +1,5 @@
+import { BoxSummaries } from './BoxSummaries';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 /**
  * BoxPlot's "markers" phase: one `box` per visual segment of each series,
  * one box per category of its rows, filled with its series' color (or its
@@ -10,7 +12,7 @@
 export function buildMarks(state, env) {
     const { channels } = state.processedData;
     const { cfg } = env;
-    return (state.processedGroups ?? []).flatMap((group) => {
+    const boxes = (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
         const disabled = env.interaction?.fillFor(name);
         return group.visualSegments.map((seg) => {
@@ -38,4 +40,11 @@ export function buildMarks(state, env) {
             };
         });
     });
+    // The parts of each box `styles.values` labels: its whiskers' ends and its median by default, beside it.
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, BoxSummaries.of(state), BoxSummaries.labelPoint(state), {
+            seriesColor: (row) => state.colorForSeries(String(row[SERIES_KEY]))
+        })
+        : [];
+    return [...boxes, ...labels];
 }

package/dist/plots/distribution/density/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildDensityDefaults } from './defaults';
 	import type {
 		DensityPlotProps,
@@ -28,7 +28,7 @@
 	}: DensityPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as DensityPlotCoreProps<TData>}
 	defaults={buildDensityDefaults}
 	bind:margins

package/dist/plots/distribution/density/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { DensityPlotProps } from '../../../types/plots/distribution/density/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: DensityPlotProps<TData>;

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

@@ -1,3 +1,4 @@
+import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { buildMarks } from './markers';
 import { RowContext } from '../../../phases/context/RowContext';
 import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
@@ -33,8 +34,23 @@ export function buildDensityDefaults() {
             }
         },
         transforms: {
+            // A curve is labelled at its peak.
+            labels: { select: 'max' },
             transforms: (state) => mergeDensity(state.transforms ?? [], state.axes?.isHorizontal ?? false)
         },
+        styles: {
+            values: {
+                layout: 'point',
+                layouts: { point: { side: 'above' }, path: { side: 'above', offset: 'max' } },
+                // The estimate tells a reader little: a label names the curve it is on, or a lone curve's peak position.
+                formatFor: (state) => {
+                    const position = PlotAxes.other(PlotAxes.valueOf(state));
+                    return (state.resolvedSeries?.length ?? 0) > 1
+                        ? (value, number, { series }) => series ?? number(value)
+                        : (_value, number, context) => number(Number(context[position]));
+                }
+            }
+        },
         scales: { zero: ['value'] },
         markers: { marks: buildMarks },
         hover: {

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

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 /**
  * DensityPlot's "markers" phase: one `area` - or `line`, by `styles.mark` - per
@@ -10,7 +11,7 @@ export function buildMarks(state, env) {
     const { cfg } = env;
     const styles = state.styles;
     const asLine = styles?.mark === 'line';
-    return (state.processedGroups ?? []).flatMap((group) => {
+    const marks = (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
         const disabledFill = env.interaction?.fillFor(name);
         const disabledStroke = env.interaction?.strokeFor(name);
@@ -43,4 +44,7 @@ export function buildMarks(state, env) {
             }, transforms);
         });
     });
+    // `styles.values` labels each curve: its name at its peak by default, or along it.
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return ValueLabels.onMarkers(marks, asLine ? 'line' : 'area', labels);
 }

package/dist/plots/distribution/histogram/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildHistogramDefaults } from './defaults';
 	import type {
 		HistogramPlotProps,
@@ -28,7 +28,7 @@
 	}: HistogramPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as HistogramPlotCoreProps<TData>}
 	defaults={buildHistogramDefaults}
 	bind:margins

package/dist/plots/distribution/histogram/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { HistogramPlotProps } from '../../../types/plots/distribution/histogram/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: HistogramPlotProps<TData>;

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

@@ -40,6 +40,7 @@ export function buildHistogramDefaults() {
             }
         },
         transforms: {
+            labels: {},
             transforms: (state, env) => mergeBin(state.transforms ?? [], env.cfg, state.axes?.isHorizontal ?? false)
         },
         // A bin's count and the edges it spans, for its label, its tooltip and its hover.
@@ -61,21 +62,25 @@ export function buildHistogramDefaults() {
         scales: { zero: ['value'] },
         styles: {
             values: {
+                layout: 'path',
+                // A bin's value runs up, or right on a horizontal histogram: its end is that edge.
+                layouts: (state) => {
+                    const end = state.axes?.isHorizontal ? 'right' : 'top';
+                    return {
+                        path: { edge: end, side: 'outside' },
+                        box: { anchor: 'middle' },
+                        point: { anchor: end, side: state.axes?.isHorizontal ? 'after' : 'above' }
+                    };
+                },
                 // An `'outside'` label sits past its bin's end, which the longest bin takes to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    const end = state.axes?.isHorizontal ? 'right' : 'top';
+                    const { edge, side = 'outside' } = labels.placement;
+                    if (labels.layout !== 'path' || edge !== end || side !== 'outside')
                         return [];
                     return state.axes?.isHorizontal
-                        ? [
-                            labels.edgeBox('0', { x: 'after', y: 'middle' }, { x: labels.offset('x') }, [
-                                'right'
-                            ])
-                        ]
-                        : [
-                            labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -labels.offset('y') }, [
-                                'top'
-                            ])
-                        ];
+                        ? [labels.edgeBox('0', { x: 'after', y: 'middle' }, { x: labels.offset() }, ['right'])]
+                        : [labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -labels.offset() }, ['top'])];
                 }
             }
         },

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

@@ -1,5 +1,4 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -23,9 +22,10 @@ export function buildMarks(state, env) {
     const bottomOf = read(channels[`${value}1`]) ?? (() => 0);
     const countRead = read(channels[value]);
     const countOf = (d) => countRead ? Number(countRead(d)) : Number(position[value](d)) - Number(bottomOf(d));
-    const labelFor = (name) => labels?.shapeLabel(env, (d) => (countOf(d) > 0 ? labels.format(countOf(d), d, name) : ''), {
+    const labelFor = (name) => labels?.label(env, (d) => (countOf(d) > 0 ? labels.text(d) : ''), {
         fill: 'currentColor',
-        ...ValueLabels.boxAnchor(labels.anchor, { isHorizontal: value === 'x' })
+        labelled: state.labelled,
+        seriesColor: () => state.colorForSeries(name)
     });
     const rects = (state.processedGroups ?? []).flatMap((group) => {
         const disabled = env.interaction?.fillFor(group.series.name);

package/dist/plots/distribution/pyramid/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildPyramidDefaults } from './defaults';
 	import type {
 		PyramidPlotProps,
@@ -27,7 +27,7 @@
 	}: PyramidPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as PyramidPlotCoreProps<TData>}
 	defaults={buildPyramidDefaults}
 	bind:margins

package/dist/plots/distribution/pyramid/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { PyramidPlotProps } from '../../../types/plots/distribution/pyramid/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: PyramidPlotProps<TData>;

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

@@ -45,15 +45,22 @@ export function buildPyramidDefaults() {
                 value: { tickFormat: (v) => String(Math.abs(Number(v))) }
             })
         },
+        transforms: { labels: {} },
         styles: {
             values: {
+                layout: 'path',
+                layouts: {
+                    path: { edge: 'tip', side: 'outside' },
+                    box: { anchor: 'middle' },
+                    point: { anchor: 'top', side: 'above' }
+                },
                 // A label past its bar's end reaches out on its own side, the longest bar's to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    if (!labels.pastTip)
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     const isHorizontal = state.axes?.isHorizontal ?? true;
-                    const offset = labels.offset(axis);
+                    const offset = labels.offset();
                     return labels.extremes(state.resolvedSeries ?? [], axis).map(({ series, value }) => {
                         const left = series.side === 'left';
                         const text = labels.format(Math.abs(value), undefined, series.name);

package/dist/plots/distribution/pyramid/markers.d.ts

@@ -1,11 +1,3 @@
 import type { PyramidPlotState, PyramidPlotEnv } from '../../../types/plots/distribution/pyramid/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
- * segment, along the category axis the "data" phase read (horizontal bars for
- * categories on y, signed magnitude on x; vertical ones the other way) and with
- * no insets - prepended onto whatever the "statistics" phase already put in
- * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
- * matches nearest points rather than hit-testing category bands.
- */
 export declare function buildMarks<TData extends Record<string, unknown>>(state: PyramidPlotState<TData>, env: PyramidPlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,4 +1,3 @@
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { resolveAccessor } from '../../../utils/accessors';
 import { seriesIdOf } from '../../../utils/grouping';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -8,14 +7,6 @@ const GAP_KINDS = ['start', 'middle', 'end'];
 function signFor(s, magnitude) {
     return s.side === 'left' ? -magnitude : magnitude;
 }
-/**
- * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
- * segment, along the category axis the "data" phase read (horizontal bars for
- * categories on y, signed magnitude on x; vertical ones the other way) and with
- * no insets - prepended onto whatever the "statistics" phase already put in
- * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
- * matches nearest points rather than hit-testing category bands.
- */
 export function buildMarks(state, env) {
     const { groupedSeries, gapFillMaps } = state;
     const gapDefaults = getConfiguration().pyramid.gap;
@@ -23,11 +14,6 @@ export function buildMarks(state, env) {
     const valueAxis = PlotAxes.valueOf(state);
     const isHorizontal = state.axes?.isHorizontal ?? true;
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    /**
-     * Where a series' labels sit on its bars, which run out from the shared baseline to its own side: left and right
-     * of it on a horizontal pyramid, down and up on a vertical one.
-     */
-    const anchorOf = (side) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', { isHorizontal, negative: side === 'left' });
     /** One bar's own channels: its category, and its span from the baseline to its signed value. */
     const span = (category, to) => ({
         isHorizontal,
@@ -62,10 +48,14 @@ export function buildMarks(state, env) {
                 data: realData,
                 hover: 'style',
                 ...span(processedCategory, signed),
-                // Each bar writes its own magnitude, on its side of the baseline.
+                // Each bar writes its own magnitude; a bar's tip is on its own side of the baseline.
                 ...(labels
                     ? {
-                        label: labels.shapeLabel(env, (d) => labels.format(Math.abs(Number(getMagnitude(d))), d, group.series.name), { fill: 'currentColor', ...anchorOf(group.series.side) })
+                        label: labels.label(env, (d) => labels.format(Math.abs(Number(getMagnitude(d))), d, group.series.name), {
+                            fill: 'currentColor',
+                            labelled: state.labelled,
+                            seriesColor: () => state.colorForSeries(group.series.name)
+                        })
                     }
                     : {}),
                 styles: {

package/dist/plots/distribution/violin/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildViolinDefaults } from './defaults';
 	import type {
 		ViolinPlotProps,
@@ -28,7 +28,7 @@
 	}: ViolinPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as ViolinPlotCoreProps<TData>}
 	defaults={buildViolinDefaults}
 	bind:margins

package/dist/plots/distribution/violin/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { ViolinPlotProps } from '../../../types/plots/distribution/violin/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: ViolinPlotProps<TData>;

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

@@ -52,6 +52,17 @@ export function buildViolinDefaults() {
         },
         // Each value's box: its quartiles and whiskers, worked out once for its tooltip and hover to read.
         context: (state) => BoxSummaries.context(state),
+        styles: {
+            values: {
+                layout: 'point',
+                // A quartile is worked out, not read: at most two decimals, as the tooltip writes it.
+                format: (value, number) => number(Math.round(value * 100) / 100),
+                parts: {
+                    placements: (state) => BoxSummaries.partPlacements(state),
+                    default: ['median']
+                }
+            }
+        },
         markers: { marks: buildMarks },
         hover: {
             // The hovered category's band behind its shape.

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

@@ -1,3 +1,6 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { BoxSummaries } from '../box/BoxSummaries';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { ViolinProfiles } from '../../../markers/violin/ViolinProfiles';
@@ -16,6 +19,16 @@ export function buildMarks(state, env) {
     const styles = state.styles;
     const { channels } = processed;
     const groups = state.processedGroups ?? [];
+    // Series share a band side by side only where they meet in it: one series per category - grouped by the category
+    // itself - fills each band.
+    const categoryOf = ProcessedPositions.of(processed, PlotAxes.valueOf(state))[PlotAxes.categoryOf(state)];
+    const seriesIn = new Map();
+    for (const row of processed.data) {
+        const key = String(categoryOf(row));
+        seriesIn.set(key, (seriesIn.get(key) ?? new Set()).add(row[SERIES_KEY]));
+    }
+    const shared = [...seriesIn.values()].some((series) => series.size > 1);
+    const slotOf = (index) => (shared ? { index, count: groups.length } : undefined);
     let peak;
     if (styles?.scale === 'shared') {
         const valueAxis = PlotAxes.valueOf(state);
@@ -43,7 +56,7 @@ export function buildMarks(state, env) {
             bandwidth: styles?.bandwidth,
             trim: styles?.trim,
             peak,
-            slot: { index, count: groups.length },
+            slot: slotOf(index),
             styles: {
                 // An outline asked for without a color is the fill's.
                 ...(seg.styles.strokeWidth !== undefined
@@ -65,11 +78,22 @@ export function buildMarks(state, env) {
             x: channels.x,
             y: channels.y,
             thickness: boxWidth,
-            slot: { index, count: groups.length },
+            slot: slotOf(index),
             bar: { fill: ink, fillOpacity: 1 },
             rule: { stroke: ink, strokeWidth: 1.5 },
             dot: { r: 0 },
             tickMinMax: false
         })));
-    return [...violins, ...boxes];
+    // The parts of each violin's box `styles.values` labels: its median by default, beside it, in its series' slot.
+    const slots = new Map(groups.map((group, index) => [group.series.name, index]));
+    const summaries = state;
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, BoxSummaries.of(summaries), 
+        // Beside the narrow box inside each violin, the violin itself as wide as its values are dense.
+        ValueLabels.bandPoint(state, 'category', boxWidth ?? 0, (row) => {
+            const index = slots.get(String(row[SERIES_KEY]));
+            return index === undefined ? undefined : slotOf(index);
+        }), { seriesColor: (row) => state.colorForSeries(String(row[SERIES_KEY])) })
+        : [];
+    return [...violins, ...boxes, ...labels];
 }

package/dist/plots/evolution/area/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildAreaDefaults } from './defaults';
 	import type { AreaPlotProps, AreaPlotCoreProps } from '../../../types/plots/evolution/area/props';
 
@@ -25,7 +25,7 @@
 	}: AreaPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as AreaPlotCoreProps<TData>}
 	defaults={buildAreaDefaults}
 	bind:margins

package/dist/plots/evolution/area/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { AreaPlotProps } from '../../../types/plots/evolution/area/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: AreaPlotProps<TData>;

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

@@ -6,20 +6,17 @@ export function buildAreaDefaults() {
         data: {
             segments: { color: (style) => style?.fill, base: { flat: 'area' } }
         },
-        statistics: { inheritPositions: true },
         scales: { zero: ['y'] },
         transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },
         styles: {
             values: {
-                anchor: 'start',
+                layout: 'point',
+                layouts: { point: { side: 'after' }, path: { edge: 'top', side: 'above', offset: 'end' } },
                 format: (v, number, context) => `${context.series} - ${number(v)}`,
-                reach: (labels, state) => labels.reachAtSeriesEnds(state)
+                reach: (labels, state) => (labels.layout === 'point' ? labels.reachAtSeriesEnds(state) : [])
             }
         },
-        markers: {
-            marks: buildMarks,
-            valueLabels: (labels, state) => labels.atSeriesEnds(state)
-        },
+        markers: { marks: buildMarks },
         timeline: { filterMode: 'upTo', interpolation: { value: 'y', key: ['grouping'] } }
     };
 }

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

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 /**
  * AreaPlot's "markers" phase: one `area` per visual segment of each series,
@@ -44,5 +45,6 @@ export function buildMarks(state, env) {
             ...dimByName(group.series.name)
         }, transforms);
     }));
-    return areas;
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return ValueLabels.onMarkers(areas, 'area', labels);
 }

package/dist/plots/evolution/line/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildLineDefaults } from './defaults';
 	import type { LinePlotProps, LinePlotCoreProps } from '../../../types/plots/evolution/line/props';
 
@@ -25,7 +25,7 @@
 	}: LinePlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as LinePlotCoreProps<TData>}
 	defaults={buildLineDefaults}
 	bind:margins

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

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { LinePlotProps } from '../../../types/plots/evolution/line/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: LinePlotProps<TData>;