@rokkit/chart 1.3.9 → 1.3.11

package/dist/Plot.svelte

@@ -43,6 +43,8 @@
 		summary?: string
 		tooltip?: boolean | ((data: Row) => string)
 		zoom?: boolean
+		/** Force chart direction (else inferred). Also settable via `spec.orientation`. */
+		orientation?: 'horizontal' | 'vertical'
 		xFormat?: (v: unknown) => string
 		yFormat?: (v: unknown) => string
 		xTicks?: number
@@ -78,6 +80,7 @@
 		summary = '',
 		tooltip = false,
 		zoom = false,
+		orientation = undefined,
 		xFormat = undefined,
 		yFormat = undefined,
 		xTicks = undefined,
@@ -138,7 +141,7 @@
 			colorScale: spec?.colorScale,
 			colorScheme: spec?.colorScheme,
 			colorMidpoint: spec?.colorMidpoint,
-			orientation: spec?.orientation,
+			orientation: orientation ?? spec?.orientation,
 			sort: spec?.sort,
 			continuousCategory: spec?.continuousCategory,
 			chartPreset,

package/dist/Plot.svelte.d.ts

@@ -26,6 +26,8 @@ type Props = {
     summary?: string;
     tooltip?: boolean | ((data: Row) => string);
     zoom?: boolean;
+    /** Force chart direction (else inferred). Also settable via `spec.orientation`. */
+    orientation?: 'horizontal' | 'vertical';
     xFormat?: (v: unknown) => string;
     yFormat?: (v: unknown) => string;
     xTicks?: number;

package/dist/PlotState.svelte.js

@@ -261,6 +261,11 @@ export class PlotState {
 		// Mirror buildStackedBars/subBandFields (group=fill first, then color, then pattern).
 		const stackField =
 			[fillField, colorField, patternField].find((f) => f && f !== xField) ?? (fillField ?? colorField)
+		// No grouping field → buildStackedBars falls back to buildBars (individual bars, no
+		// actual stacking), so there's no stacked total to size to. Bail to the normal value
+		// extent; otherwise every row collapses to the same cKey below and the lookup's set()
+		// overwrites, shrinking the domain to the last row per x — and the bars overflow.
+		if (!stackField) return null
 		const lookup = new SvelteMap()
 		for (const d of stackData) {
 			const xVal = d[xField]
@@ -278,6 +283,31 @@ export class PlotState {
 		return [0, Math.max(0, ...totals.values())]
 	}
 
+	// Waterfall bars sit at the RUNNING TOTAL, not the per-step value — so the y-domain must
+	// span the cumulative range, else bars overflow the axis. Mirrors buildWaterfallMarks.
+	#resolveWaterfallDomain(field) {
+		const geom = this.#geoms.find((g) => g.type === 'waterfall')
+		if (!geom) return null
+		const data = this.geomData(geom.id)
+		if (data.length === 0) return null
+		const totalField = geom.options?.totalField
+		let cumulative = 0
+		let min = 0
+		let max = 0
+		for (const d of data) {
+			if (totalField && d[totalField]) {
+				min = Math.min(min, 0, cumulative)
+				max = Math.max(max, 0, cumulative)
+			} else {
+				const start = cumulative
+				cumulative += Number(d[field]) || 0
+				min = Math.min(min, start, cumulative)
+				max = Math.max(max, start, cumulative)
+			}
+		}
+		return [min, max]
+	}
+
 	yScale = $derived.by(() => {
 		const field = this.#effectiveChannels.y
 		if (!field) return null
@@ -286,7 +316,11 @@ export class PlotState {
 		// includeZero applies to the VALUE axis: vertical charts (value on y) and flipped
 		// charts (value still y, but now the horizontal screen axis) both want a 0 baseline.
 		const includeZero = this.orientation === 'vertical' || this.#flipped
-		const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
+		const yDomain =
+			this.#yDomain ??
+			this.#resolveBoxDomain() ??
+			this.#resolveStackDomain(field) ??
+			this.#resolveWaterfallDomain(field)
 		// Flip: the value (y) axis runs along the horizontal screen → range over width.
 		const range = this.#flipped ? [0, this.#innerWidth] : undefined
 		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero, range })

package/dist/geoms/lib/areas.js

@@ -1,5 +1,6 @@
 import { area, stack, stackOffsetExpand, curveCatmullRom, curveStep } from 'd3-shape'
 import { toPatternId } from '../../lib/brewing/patterns.js'
+import { literalColor, markEntry } from '../../lib/brewing/colors.js'
 
 /**
  * Builds area path geometry for multi-series area charts.
@@ -15,16 +16,25 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y })) {
-	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	const { x: xf, y: yf, pattern: pf } = channels
+	// A literal color (var()/oklch()/hex/currentColor) isn't a data field — it's the exact
+	// fill the caller wants for THIS area. Don't group on it, and don't fall back to the
+	// shared color scale (one value across all geoms); use it directly.
+	const lit = literalColor(channels.color)
+	const cf = lit ? undefined : channels.color
 	const baseline = yScale.range()[0] // bottom of the chart (y pixel max)
 
 	const xPos = (d) =>
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
 
 	// Each area edge (baseline + top) is placed so the area transposes under orientation.
-	const toEdge = (d) => ({ base: place(xPos(d), baseline), top: place(xPos(d), yScale(d[yf])) })
+	// `v` carries the raw y-value so the generator can break the area at a gap (null).
+	const toEdge = (d) => ({ base: place(xPos(d), baseline), top: place(xPos(d), yScale(d[yf])), v: d[yf] })
 	const makeGen = () => {
 		const gen = area()
+			// A null y-value is a GAP (a missing period): break the area there instead of
+			// dropping it onto the 0 baseline. A genuine 0 stays defined and fills.
+			.defined((p) => Number.isFinite(p.top.y) && (yf === undefined || yf === null || (p.v !== undefined && p.v !== null)))
 			.x0((p) => p.base.x)
 			.y0((p) => p.base.y)
 			.x1((p) => p.top.x)
@@ -45,7 +55,8 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 	}
 
 	if (!cf) {
-		const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		// A literal color IS the fill; a single-series field uses the shared shade.
+		const entry = markEntry(lit, undefined, colors, colors?.values().next().value ?? { fill: '#888', stroke: '#888' })
 		const patternKey = pf ? data[0]?.[pf] : null
 		const patternId =
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)

package/dist/geoms/lib/bars.js

@@ -1,7 +1,7 @@
 import { scaleBand } from 'd3-scale'
 import { stack, stackOffsetExpand } from 'd3-shape'
 import { toPatternId } from '../../lib/brewing/patterns.js'
-import { isLiteralColor } from '../../lib/brewing/colors.js'
+import { isLiteralColor, literalColor, markEntry } from '../../lib/brewing/colors.js'
 
 /**
  * Returns a band scale suitable for bar x-positioning.
@@ -57,6 +57,9 @@ export function buildBars(
 	dodge = true
 ) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	// A literal color is the exact fill for every bar; a field indexes the shared color scale.
+	const lit = literalColor(cf)
+	const field = lit ? undefined : cf
 
 	// No sub-banding for a continuous (race) axis or position='identity' (dodge=false → overlap).
 	const subFields = continuousCategory || !dodge ? [] : subBandFields(channels)
@@ -96,12 +99,16 @@ export function buildBars(
 
 	return data.map((d, i) => {
 		const xVal = d[xf]
-		const colorKey = cf ? d[cf] : null
+		const colorKey = field ? d[field] : null
 		const patternKey = pf ? d[pf] : null
 		const subKey = getSubKey(d)
 
-		const colorEntry = colors?.get(colorKey) ??
+		const colorEntry = markEntry(
+			lit,
+			colorKey,
+			colors,
 			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		)
 		const patternId =
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
@@ -136,6 +143,8 @@ export function buildBars(
 
 export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place = (x, y) => ({ x, y }), normalize = false) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	const lit = literalColor(cf)
+	const field = lit ? undefined : cf
 
 	const bandScale = ensureBandX(xScale, data, xf)
 
@@ -175,8 +184,8 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 			const xVal = point.data[xf]
 
 			// Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
-			const colorKey = cf ? (cf === xf ? xVal : cf === stackField ? stackKey : null) : null
-			const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+			const colorKey = field ? (field === xf ? xVal : field === stackField ? stackKey : null) : null
+			const colorEntry = markEntry(lit, colorKey, colors, { fill: '#888', stroke: '#888' })
 
 			// Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
 			const patternKey = pf ? (pf === xf ? xVal : pf === stackField ? stackKey : null) : null
@@ -185,13 +194,19 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 					? toPatternId(String(patternKey))
 					: null
 
+			// Two opposite corners in (band, value) space, mapped through place() so the
+			// stack transposes under orientation='horizontal' (identity default → unchanged).
+			// Without this a grouped stack/fill ignored place() and always drew vertically.
+			const band = bandScale(xVal) ?? 0
+			const c1 = place(band, yScale(y0))
+			const c2 = place(band + bandScale.bandwidth(), yScale(y1))
 			bars.push({
 				data: point.data,
 				key: `${String(xVal)}::${String(stackKey)}`,
-				x: bandScale(xVal) ?? 0,
-				y: yScale(y1),
-				width: bandScale.bandwidth(),
-				height: yScale(y0) - yScale(y1),
+				x: Math.min(c1.x, c2.x),
+				y: Math.min(c1.y, c2.y),
+				width: Math.abs(c2.x - c1.x),
+				height: Math.abs(c2.y - c1.y),
 				fill: colorEntry.fill,
 				stroke: colorEntry.stroke,
 				patternId

package/dist/geoms/lib/marks/heatmap.js

@@ -1,4 +1,5 @@
 import { resolveAlpha } from '../aesthetics.js'
+import { literalColor } from '../../../lib/brewing/colors.js'
 
 /**
  * Build renderable heatmap cells. Cell fill is the continuous color scale (numeric color
@@ -10,6 +11,9 @@ export function buildHeatmapMarks({ data, plot, channels, alpha, type = 'heatmap
 	if (!data?.length || !xScale || !yScale) return []
 
 	const colorField = channels.fill ?? channels.color
+	// A literal fill/color paints every cell directly, skipping the value/palette scale.
+	const lit = literalColor(colorField)
+	const field = lit ? undefined : colorField
 	const continuous = plot.continuousColorScale
 	const bwX = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0
 	const bwY = typeof yScale.bandwidth === 'function' ? yScale.bandwidth() : 0
@@ -18,12 +22,14 @@ export function buildHeatmapMarks({ data, plot, channels, alpha, type = 'heatmap
 	return data.map((d, i) => {
 		const xVal = d[channels.x ?? '']
 		const yVal = d[channels.y ?? '']
-		const colorVal = colorField ? d[colorField] : null
-		let fill = '#ccc'
-		if (continuous) fill = continuous.scale(Number(colorVal))
-		else {
-			const entry = colors?.get(colorVal)
-			if (entry) fill = entry.fill
+		const colorVal = field ? d[field] : null
+		let fill = lit ?? '#ccc'
+		if (!lit) {
+			if (continuous) fill = continuous.scale(Number(colorVal))
+			else {
+				const entry = colors?.get(colorVal)
+				if (entry) fill = entry.fill
+			}
 		}
 		return {
 			key: `${xVal}-${yVal}-${i}`,

package/dist/geoms/lib/marks/ribbon.d.ts

@@ -2,11 +2,12 @@
  * Build a Sankey-style ribbon layout: links (flows) + source/target node boxes. Link fill
  * comes from the source (then target) palette entry; `alpha` is fixed (default 0.5). Returns
  * an object rather than a flat array, so the geom template renders links + node labels.
- * @param {{ data: any[], plot: any, options?: any, alpha?: number, type?: string }} ctx
+ * @param {{ data: any[], plot: any, channels?: any, options?: any, alpha?: number, type?: string }} ctx
  */
-export function buildRibbonMarks({ data, plot, options, alpha, type }: {
+export function buildRibbonMarks({ data, plot, channels, options, alpha, type }: {
     data: any[];
     plot: any;
+    channels?: any;
     options?: any;
     alpha?: number;
     type?: string;

package/dist/geoms/lib/marks/ribbon.js

@@ -1,12 +1,13 @@
 import { resolveAlpha } from '../aesthetics.js'
+import { literalColor } from '../../../lib/brewing/colors.js'
 
 /**
  * Build a Sankey-style ribbon layout: links (flows) + source/target node boxes. Link fill
  * comes from the source (then target) palette entry; `alpha` is fixed (default 0.5). Returns
  * an object rather than a flat array, so the geom template renders links + node labels.
- * @param {{ data: any[], plot: any, options?: any, alpha?: number, type?: string }} ctx
+ * @param {{ data: any[], plot: any, channels?: any, options?: any, alpha?: number, type?: string }} ctx
  */
-export function buildRibbonMarks({ data, plot, options = {}, alpha, type = 'ribbon' }) {
+export function buildRibbonMarks({ data, plot, channels = {}, options = {}, alpha, type = 'ribbon' }) {
 	const empty = { links: [], sourceNodes: [], targetNodes: [] }
 	if (!data?.length) return empty
 
@@ -14,6 +15,8 @@ export function buildRibbonMarks({ data, plot, options = {}, alpha, type = 'ribb
 	const sourceField = options.source ?? 'source'
 	const targetField = options.target ?? 'target'
 	const valueField = options.value ?? 'value'
+	// A literal color/fill paints every ribbon directly (else fill comes from the node palette).
+	const lit = literalColor(channels.color ?? channels.fill)
 	const a = resolveAlpha(alpha, type, plot.chartPreset)
 
 	const flows = data.map((d) => ({
@@ -69,7 +72,7 @@ export function buildRibbonMarks({ data, plot, options = {}, alpha, type = 'ribb
 		sourceOffsets.set(f.source, sy0 + sh)
 		targetOffsets.set(f.target, ty0 + th)
 
-		const fill = colors?.get(f.source)?.fill ?? colors?.get(f.target)?.fill ?? '#888'
+		const fill = lit ?? (colors?.get(f.source)?.fill ?? colors?.get(f.target)?.fill ?? '#888')
 		return { key: `ribbon-${i}`, d: path, fill, alpha: a, data: f.data }
 	})
 

package/dist/lib/brewing/colors.d.ts

@@ -1,10 +1,40 @@
 /**
  * Returns true if the value looks like a CSS color literal (not a field name).
- * Supports hex (#rgb, #rrggbb, #rrggbbaa), and functional notations (rgb, hsl, oklch, etc.).
+ * Supports hex (#rgb, #rrggbb, #rrggbbaa), functional notations (rgb, hsl, oklch, etc.),
+ * CSS custom-property refs (var(--token)), and the `currentColor` keyword.
  * @param {unknown} value
  * @returns {boolean}
  */
 export function isLiteralColor(value: unknown): boolean;
+/**
+ * A color-channel value as a literal CSS color (var()/oklch()/#hex/currentColor),
+ * or undefined when it names a data field. Pair with {@link markEntry}: a literal is
+ * painted directly on every mark; a field is grouped and looked up in the color scale.
+ * @param {unknown} value
+ * @returns {string | undefined}
+ */
+export function literalColor(value: unknown): string | undefined;
+/**
+ * Resolves the `{fill, stroke}` for one mark. A `literal` color IS the paint for every
+ * mark — applied directly, never grouped as a field or run through the shared `colors`
+ * scale (which holds a single value across all geoms). Otherwise `key` is looked up in
+ * `colors`, falling back to `fallback`.
+ * @param {string | undefined} literal
+ * @param {unknown} key
+ * @param {Map<unknown, {fill: string, stroke: string}> | undefined} colors
+ * @param {{fill: string, stroke: string}} fallback
+ * @returns {{fill: string, stroke: string}}
+ */
+export function markEntry(literal: string | undefined, key: unknown, colors: Map<unknown, {
+    fill: string;
+    stroke: string;
+}> | undefined, fallback: {
+    fill: string;
+    stroke: string;
+}): {
+    fill: string;
+    stroke: string;
+};
 /**
  * Extracts distinct values for a given field from the data array.
  * @param {Object[]} data

package/dist/lib/brewing/colors.js

@@ -6,7 +6,8 @@ import { defaultPreset } from '../preset.js'
 
 /**
  * Returns true if the value looks like a CSS color literal (not a field name).
- * Supports hex (#rgb, #rrggbb, #rrggbbaa), and functional notations (rgb, hsl, oklch, etc.).
+ * Supports hex (#rgb, #rrggbb, #rrggbbaa), functional notations (rgb, hsl, oklch, etc.),
+ * CSS custom-property refs (var(--token)), and the `currentColor` keyword.
  * @param {unknown} value
  * @returns {boolean}
  */
@@ -14,9 +15,41 @@ export function isLiteralColor(value) {
 	if (!value || typeof value !== 'string') return false
 	if (/^#([0-9a-fA-F]{3,8})$/.test(value)) return true
 	if (/^(rgb|rgba|hsl|hsla|oklch|oklab|hwb|lab|lch|color)\s*\(/i.test(value)) return true
+	// A `var(--token)` ref or `currentColor` resolves to a concrete color at paint time
+	// (and stays theme-reactive under [data-mode]), so it means "use this color", not
+	// "map the field with this name" — pass it straight through to fill/stroke.
+	if (/^var\(\s*--/.test(value)) return true
+	if (/^currentcolor$/i.test(value)) return true
 	return false
 }
 
+/**
+ * A color-channel value as a literal CSS color (var()/oklch()/#hex/currentColor),
+ * or undefined when it names a data field. Pair with {@link markEntry}: a literal is
+ * painted directly on every mark; a field is grouped and looked up in the color scale.
+ * @param {unknown} value
+ * @returns {string | undefined}
+ */
+export function literalColor(value) {
+	return isLiteralColor(value) ? /** @type {string} */ (value) : undefined
+}
+
+/**
+ * Resolves the `{fill, stroke}` for one mark. A `literal` color IS the paint for every
+ * mark — applied directly, never grouped as a field or run through the shared `colors`
+ * scale (which holds a single value across all geoms). Otherwise `key` is looked up in
+ * `colors`, falling back to `fallback`.
+ * @param {string | undefined} literal
+ * @param {unknown} key
+ * @param {Map<unknown, {fill: string, stroke: string}> | undefined} colors
+ * @param {{fill: string, stroke: string}} fallback
+ * @returns {{fill: string, stroke: string}}
+ */
+export function markEntry(literal, key, colors, fallback) {
+	if (literal) return { fill: literal, stroke: literal }
+	return colors?.get(key) ?? fallback
+}
+
 /**
  * Extracts distinct values for a given field from the data array.
  * @param {Object[]} data

package/dist/lib/brewing/marks/arcs.js

@@ -1,5 +1,6 @@
 import { pie, arc } from 'd3-shape'
 import { toPatternId } from '../../brewing/patterns.js'
+import { literalColor, markEntry } from '../colors.js'
 
 /**
  * Builds arc geometry for pie/donut charts.
@@ -14,6 +15,8 @@ import { toPatternId } from '../../brewing/patterns.js'
  */
 export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
 	const { color: lf, y: yf } = channels
+	// A literal color paints every slice directly; a field indexes the palette scale.
+	const lit = literalColor(lf)
 	const radius = Math.min(width, height) / 2
 	// innerRadius: a value <= 1 is a fraction of the radius (responsive donut);
 	// a value > 1 is absolute pixels. Clamp below the outer radius so a bad value
@@ -29,11 +32,13 @@ export function buildArcs(data, channels, colors, width, height, opts = {}, patt
 	// Label radius: midpoint between inner and outer (or 70% out for solid pie)
 	const labelRadius = innerRadius > 0 ? (innerRadius + radius) / 2 : radius * 0.65
 	const labelArc = arc().innerRadius(labelRadius).outerRadius(labelRadius)
-	return slices.map((slice) => {
-		const key = slice.data[lf]
-		const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#fff' }
+	return slices.map((slice, i) => {
+		// With a literal color there's no category field, so key each slice by index to keep
+		// them distinct (patterns, which are field-keyed, don't apply to a single literal fill).
+		const key = lit ? i : slice.data[lf]
+		const colorEntry = markEntry(lit, key, colors, { fill: '#888', stroke: '#fff' })
 		const patternId =
-			key !== null && key !== undefined && patterns?.has(key) ? toPatternId(String(key)) : null
+			!lit && key !== null && key !== undefined && patterns?.has(key) ? toPatternId(String(key)) : null
 		const pct = Math.round(((slice.endAngle - slice.startAngle) / total) * 100)
 		const [cx, cy] = labelArc.centroid(slice)
 		return {

package/dist/lib/brewing/marks/boxes.js

@@ -1,4 +1,5 @@
 import { toPatternId } from '../patterns.js'
+import { literalColor, markEntry } from '../colors.js'
 
 /**
  * Builds box geometry for box plot charts.
@@ -23,9 +24,12 @@ import { toPatternId } from '../patterns.js'
  */
 export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 	const { x: xf, fill: ff, pattern: pf } = channels
+	// A literal fill colours every box directly; a field sub-groups within each x-band.
+	const lit = literalColor(ff)
+	const field = lit ? undefined : ff
 	const { side = 'center', width, patterns } = opts
 	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
-	const grouped = ff && ff !== xf
+	const grouped = field && field !== xf
 	// Offset the box centre to the middle of the chosen half-lane.
 	const laneOffset = (unit) => (side === 'left' ? -unit / 4 : side === 'right' ? unit / 4 : 0)
 	// Texture fill: patternId per box from the pattern channel value (null = solid fill).
@@ -46,7 +50,7 @@ export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 			const subIndex = fillValues.indexOf(fillVal)
 			const bandStart = xScale(d[xf]) ?? 0
 			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2 + laneOffset(subBandWidth)
-			const colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+			const colorEntry = markEntry(lit, fillVal, colors, { fill: '#aaa', stroke: '#666' })
 
 			return {
 				data: d,
@@ -71,8 +75,8 @@ export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 	const whiskerWidth = width !== undefined ? boxWidth * 0.5 : bw * 0.3
 
 	return data.map((d) => {
-		const fillKey = ff ? d[ff] : d[xf]
-		const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
+		const fillKey = field ? d[field] : d[xf]
+		const colorEntry = markEntry(lit, fillKey, colors, { fill: '#aaa', stroke: '#666' })
 		const cx =
 			(xScale(d[xf]) ?? 0) +
 			(typeof xScale.bandwidth === 'function' ? bw / 2 : 0) +

package/dist/lib/brewing/marks/lines.js

@@ -1,4 +1,5 @@
 import { line, curveCatmullRom, curveStep } from 'd3-shape'
+import { literalColor } from '../colors.js'
 
 /**
  * @param {Object[]} data
@@ -10,7 +11,12 @@ import { line, curveCatmullRom, curveStep } from 'd3-shape'
  * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>, i: number}[], key?: unknown }[]}
  */
 export function buildLines(data, channels, xScale, yScale, colors, curve, place = (x, y) => ({ x, y })) {
-	const { x: xf, y: yf, color: cf } = channels
+	const { x: xf, y: yf } = channels
+	// A literal color (var()/oklch()/hex/currentColor) is NOT a data field — it's the exact
+	// stroke the caller wants for THIS geom. Don't group the series on it, and don't fall
+	// back to the shared color scale (which is one value across all geoms); use it directly.
+	const lit = literalColor(channels.color)
+	const cf = lit ? undefined : channels.color
 	const xPos = (d) =>
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
 	// Screen points, sorted by the x-channel position, each mapped through place() so the
@@ -25,6 +31,10 @@ export function buildLines(data, channels, xScale, yScale, colors, curve, place
 	}
 	const makeGen = () => {
 		const gen = line()
+			// A null y-value is a GAP (a missing period), not a zero: break the path there
+			// (d3 `.defined`) instead of letting yScale(null) collapse it onto the 0 baseline.
+			// A genuine 0 stays defined and plots.
+			.defined((p) => Number.isFinite(p.y) && (yf === undefined || yf === null || (p.data?.[yf] !== undefined && p.data?.[yf] !== null)))
 			.x((p) => p.x)
 			.y((p) => p.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
@@ -34,7 +44,8 @@ export function buildLines(data, channels, xScale, yScale, colors, curve, place
 
 	if (!cf) {
 		const pts = screenPoints(data)
-		const stroke = colors?.values().next().value?.stroke ?? '#888'
+		// A literal color IS the stroke; a single-series field uses the shared shade.
+		const stroke = lit ?? colors?.values().next().value?.stroke ?? '#888'
 		return [{ d: makeGen()(pts), fill: 'none', stroke, points: pts }]
 	}
 	const groups = groupBy(data, cf)

package/dist/lib/brewing/marks/points.js

@@ -8,6 +8,7 @@ import {
 	symbolStar
 } from 'd3-shape'
 import { defaultPreset } from '../../preset.js'
+import { literalColor, markEntry } from '../colors.js'
 
 const SYMBOL_TYPES = [
 	symbolCircle,
@@ -84,9 +85,13 @@ export function buildPoints(
 	jitter = null
 ) {
 	const { x: xf, y: yf, color: cf, size: sf, symbol: symf } = channels
+	// A literal color (var()/oklch()/#hex/currentColor) is the exact fill for every point,
+	// not a field to group on — apply it directly instead of looking it up in the scale.
+	const lit = literalColor(cf)
+	const field = lit ? undefined : cf
 	return data.map((d, i) => {
-		const colorKey = cf ? d[cf] : null
-		const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#444' }
+		const colorKey = field ? d[field] : null
+		const colorEntry = markEntry(lit, colorKey, colors, { fill: '#888', stroke: '#444' })
 		const r = sf && sizeScale ? sizeScale(d[sf]) : defaultRadius
 		const shapeName = symf && symbolMap ? (symbolMap.get(d[symf]) ?? 'circle') : null
 		const symbolPath = shapeName ? buildSymbolPath(shapeName, r) : null

package/dist/lib/brewing/marks/swarm.js

@@ -1,4 +1,5 @@
 import { ascending } from 'd3-array'
+import { literalColor, markEntry } from '../colors.js'
 
 /**
  * Deterministic pseudo-random in [0, 1) from a non-negative integer seed.
@@ -28,6 +29,9 @@ function hashUnit(n) {
  */
 export function buildSwarm(data, channels, xScale, yScale, colors, opts = {}) {
 	const { x: xf, y: yf, fill: ff } = channels
+	// A literal fill colours every point directly; otherwise group on the fill field.
+	const lit = literalColor(ff)
+	const field = lit ? undefined : ff
 	const { method = 'jitter', r = 2, side = 'center' } = opts
 	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
 	// One-sided layouts get the full half-band on their side; centred straddles ±halfBand.
@@ -51,8 +55,8 @@ export function buildSwarm(data, channels, xScale, yScale, colors, opts = {}) {
 				: rows.map((_, i) => jitterOffset(hashUnit(i), halfBand, side))
 
 		rows.forEach((d, i) => {
-			const fillKey = ff ? d[ff] : xVal
-			const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
+			const fillKey = field ? d[field] : xVal
+			const colorEntry = markEntry(lit, fillKey, colors, { fill: '#aaa', stroke: '#666' })
 			result.push({
 				data: d,
 				cx: center + offsets[i],

package/dist/lib/brewing/marks/violins.js

@@ -1,5 +1,6 @@
 import { line, curveCatmullRom } from 'd3-shape'
 import { toPatternId } from '../patterns.js'
+import { literalColor, markEntry } from '../colors.js'
 
 // Relative widths at each stat anchor (fraction of max half-width)
 const DENSITY_AT = { iqr_min: 0.08, q1: 0.55, median: 1.0, q3: 0.55, iqr_max: 0.08 }
@@ -49,8 +50,11 @@ export function buildViolins(
 	patterns
 ) {
 	const { x: xf, fill: ff, pattern: pf } = channels
+	// A literal fill colours every violin directly; a field sub-groups within each x-band.
+	const lit = literalColor(ff)
+	const field = lit ? undefined : ff
 	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
-	const grouped = ff && ff !== xf
+	const grouped = field && field !== xf
 	// Texture fill: patternId per violin from the pattern channel value (null = solid fill).
 	const patternIdFor = (d) => {
 		const key = pf ? d[pf] : null
@@ -73,7 +77,7 @@ export function buildViolins(
 			const subIndex = fillValues.indexOf(fillVal)
 			const bandStart = xScale(d[xf]) ?? 0
 			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2
-			const colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+			const colorEntry = markEntry(lit, fillVal, colors, { fill: '#aaa', stroke: '#666' })
 
 			return {
 				data: d,
@@ -90,8 +94,8 @@ export function buildViolins(
 	const halfMax = bw * 0.45
 
 	return data.map((d) => {
-		const fillKey = ff ? d[ff] : d[xf]
-		const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
+		const fillKey = field ? d[field] : d[xf]
+		const colorEntry = markEntry(lit, fillKey, colors, { fill: '#aaa', stroke: '#666' })
 		const cx = (xScale(d[xf]) ?? 0) + (typeof xScale.bandwidth === 'function' ? bw / 2 : 0)
 
 		return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {