@rokkit/chart 1.3.6 → 1.3.8

package/dist/geoms/Point.svelte

@@ -4,6 +4,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildPoints } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -52,6 +53,21 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	function selectPoint(pt: { data: Row }, event: MouseEvent | KeyboardEvent) {
+		onselect?.(pt.data)
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(
+					pt.data,
+					plotState.data.indexOf(pt.data),
+					{ x, y },
+					'point',
+					color ? pt.data[color] : undefined,
+					event
+				)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'point',
@@ -91,7 +107,7 @@
 
 	const points = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildPoints(
+		const raw = buildPoints(
 			data,
 			{ x, y, color, size, symbol: symbolField },
 			xScale,
@@ -102,6 +118,12 @@
 			defaultRadius,
 			options?.jitter ?? null
 		)
+		if (!plotState.isFlipped) return raw
+		// Horizontal: swap each point's screen coords (value → screen-X, category → screen-Y).
+		return raw.map((p) => {
+			const s = plotState.place(p.cx, p.cy)
+			return { ...p, cx: s.x, cy: s.y }
+		})
 	})
 </script>
 
@@ -118,14 +140,16 @@
 					stroke-width="1"
 					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
 					data-plot-element="point"
-					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
-					tabindex={onselect || keyboard ? 0 : undefined}
-					style:cursor={onselect ? 'pointer' : undefined}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? 'pointer' : undefined}
 					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
-					onclick={onselect ? () => onselect(pt.data) : undefined}
-					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					onclick={onselect || keyboard || plotState.interactive ? (e) => selectPoint(pt, e) : undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{:else}
@@ -138,14 +162,16 @@
 					stroke-width="1"
 					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
 					data-plot-element="point"
-					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
-					tabindex={onselect || keyboard ? 0 : undefined}
-					style:cursor={onselect ? 'pointer' : undefined}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? 'pointer' : undefined}
 					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
-					onclick={onselect ? () => onselect(pt.data) : undefined}
-					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					onclick={onselect || keyboard || plotState.interactive ? (e) => selectPoint(pt, e) : undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{/if}

package/dist/geoms/Rule.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type RuleValue = number | string
+	type Props = {
+		/** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+		x?: RuleValue | RuleValue[]
+		/** Horizontal reference line(s) at these y-axis value(s). */
+		y?: RuleValue | RuleValue[]
+		stroke?: string
+		/** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+		dash?: string
+		strokeWidth?: number
+		/** Optional label drawn at the line's end. String, or a fn of the value. */
+		label?: string | ((value: RuleValue) => string)
+	}
+
+	let {
+		x,
+		y,
+		stroke = undefined,
+		dash = '4 4',
+		strokeWidth = 1,
+		label = undefined
+	}: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const toArray = (v: RuleValue | RuleValue[] | undefined): RuleValue[] =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v]
+
+	// Position along an axis: band scales resolve to the band centre, linear scales map directly.
+	function axisPos(scale: { (v: unknown): number | undefined; bandwidth?: () => number }, v: unknown) {
+		const base = scale(v) ?? 0
+		return typeof scale.bandwidth === 'function' ? base + scale.bandwidth() / 2 : base
+	}
+	// The full [min, max] screen extent of a scale's range (spans the perpendicular axis).
+	function axisExtent(scale: { range: () => number[] }) {
+		const r = scale.range()
+		return [Math.min(...r), Math.max(...r)]
+	}
+
+	const labelFor = (v: RuleValue) =>
+		typeof label === 'function' ? label(v) : typeof label === 'string' ? label : null
+
+	// Each rule is expressed in (x-channel, y-channel) space and placed to screen, so it
+	// transposes under orientation flip: a y-value reference is horizontal when vertical and
+	// vertical when flipped (it stays perpendicular to the value axis).
+	const rules = $derived.by(() => {
+		if (!xScale || !yScale) return []
+		const place = plotState.place.bind(plotState)
+		const out: Array<{
+			key: string
+			x1: number
+			y1: number
+			x2: number
+			y2: number
+			value: RuleValue
+			text: string | null
+		}> = []
+		const [xLo, xHi] = axisExtent(xScale)
+		const [yLo, yHi] = axisExtent(yScale)
+
+		for (const yv of toArray(y)) {
+			const yc = axisPos(yScale, yv)
+			const a = place(xLo, yc)
+			const b = place(xHi, yc)
+			out.push({ key: `y-${yv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: yv, text: labelFor(yv) })
+		}
+		for (const xv of toArray(x)) {
+			const xc = axisPos(xScale, xv)
+			const a = place(xc, yLo)
+			const b = place(xc, yHi)
+			out.push({ key: `x-${xv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: xv, text: labelFor(xv) })
+		}
+		return out
+	})
+
+	const strokeColor = $derived(stroke ?? 'currentColor')
+</script>
+
+{#if rules.length > 0}
+	<g data-plot-geom="rule">
+		{#each rules as rule (rule.key)}
+			<line
+				x1={rule.x1}
+				y1={rule.y1}
+				x2={rule.x2}
+				y2={rule.y2}
+				stroke={strokeColor}
+				stroke-width={strokeWidth}
+				stroke-dasharray={dash || undefined}
+				data-plot-element="rule"
+				data-plot-value={rule.value}
+			/>
+			{#if rule.text}
+				<text
+					x={rule.x2}
+					y={rule.y2}
+					dx="-4"
+					dy="-4"
+					text-anchor="end"
+					font-size="10"
+					fill={strokeColor}
+					data-plot-element="rule-label"
+				>{rule.text}</text>
+			{/if}
+		{/each}
+	</g>
+{/if}

package/dist/geoms/Rule.svelte.d.ts

@@ -0,0 +1,16 @@
+type RuleValue = number | string;
+type Props = {
+    /** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+    x?: RuleValue | RuleValue[];
+    /** Horizontal reference line(s) at these y-axis value(s). */
+    y?: RuleValue | RuleValue[];
+    stroke?: string;
+    /** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+    dash?: string;
+    strokeWidth?: number;
+    /** Optional label drawn at the line's end. String, or a fn of the value. */
+    label?: string | ((value: RuleValue) => string);
+};
+declare const Rule: import("svelte").Component<Props, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/geoms/Trend.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { line as d3line } from 'd3-shape'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { computeTrend } from '../lib/trend.js'
+	import { scalePos } from '../lib/scale.js'
+
+	type Method = string | number | { type: string; [k: string]: unknown }
+	type Props = { x?: string; y?: string; trend?: Method | Method[] }
+	let { x, y, trend = undefined }: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
+
+	const methods = $derived(
+		Array.isArray(trend) ? trend : trend === null || trend === undefined ? [] : [trend]
+	)
+
+	const typeOf = (m: Method) => {
+		const t = typeof m === 'string' ? m : typeof m === 'number' ? 'value' : (m?.type ?? '')
+		return t === 'mean' ? 'avg' : t
+	}
+
+	const paths = $derived.by(() => {
+		const rows = state?.data ?? []
+		const xs = state?.xScale
+		const ys = state?.yScale
+		if (!rows.length || !xs || !ys || !x || !y || !methods.length) return []
+		const out: { d: string; type: string; i: number }[] = []
+		methods.forEach((m, idx) => {
+			const res = computeTrend(rows, { x, y }, m)
+			if (!res) return
+			if (res.kind === 'constant') {
+				const yy = ys(res.value)
+				out.push({ d: `M0,${yy} L${state.innerWidth},${yy}`, type: typeOf(m), i: idx })
+			} else {
+				const pts = res.values
+					.map((v, i) => ({ vx: scalePos(xs, rows[i][x]), vy: ys(v) }))
+					.filter((p) => Number.isFinite(p.vx) && Number.isFinite(p.vy))
+				const gen = d3line<{ vx: number; vy: number }>()
+					.x((p) => p.vx)
+					.y((p) => p.vy)
+				const d = gen(pts)
+				if (d) out.push({ d, type: typeOf(m), i: idx })
+			}
+		})
+		return out
+	})
+</script>
+
+{#if paths.length}
+	<g data-plot-geom="trend">
+		{#each paths as p (p.i)}
+			<path d={p.d} data-plot-trend={p.type} />
+		{/each}
+	</g>
+{/if}
+
+<style>
+	[data-plot-trend] {
+		fill: none;
+		stroke: var(--chart-trend-color, currentColor);
+		stroke-width: var(--chart-trend-width, 1);
+		stroke-dasharray: var(--chart-trend-dash, 4 4);
+		opacity: var(--chart-trend-opacity, 0.7);
+	}
+</style>

package/dist/geoms/Trend.svelte.d.ts

@@ -0,0 +1,12 @@
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
+type Props = {
+    x?: string;
+    y?: string;
+    trend?: Method | Method[];
+};
+declare const Trend: import("svelte").Component<Props, {}, "">;
+type Trend = ReturnType<typeof Trend>;
+export default Trend;

package/dist/geoms/Violin.svelte

@@ -8,21 +8,30 @@
 		y?: string
 		fill?: string
 		stat?: string
+		/** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+		 *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+		side?: 'left' | 'right' | 'center'
+		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+		pattern?: string
 		options?: { opacity?: number }
 	}
 
-	let { x, y, fill, stat = 'boxplot', options = {} }: Props = $props()
+	let { x, y, fill, stat = 'boxplot', side = 'center', pattern, options = {} }: Props = $props()
 
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
-	// fill ?? x drives the colors map for both violin interior and outline
-	const fillChannel = $derived(fill ?? x)
+	// Fall back to the root Plot channels when the geom omits x/y (composes under
+	// <Plot.Root x y> without silently NaN-ing).
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// fill ?? effective-x drives the colors map for both violin interior and outline
+	const fillChannel = $derived(fill ?? xf)
 
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'violin',
-			channels: { x, y, color: fillChannel },
+			channels: { x: xf, y: yf, color: fillChannel, pattern },
 			stat,
 			options
 		})
@@ -32,17 +41,28 @@
 	})
 
 	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+		if (id)
+			plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel, pattern }, stat })
 	})
 
 	const data = $derived(id ? plotState.geomData(id) : [])
 	const xScale = $derived(plotState.xScale)
 	const yScale = $derived(plotState.yScale)
 	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
 
 	const violins = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
+		return buildViolins(
+			data,
+			{ x: xf, fill: fillChannel, pattern },
+			xScale,
+			yScale,
+			colors,
+			plotState.place.bind(plotState),
+			side,
+			patterns
+		)
 	})
 </script>
 
@@ -60,6 +80,10 @@
 				onmouseenter={() => plotState.setHovered(v.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			/>
+			{#if v.patternId}
+				<!-- Texture fill overlay (matches the violin silhouette) -->
+				<path d={v.d} fill="url(#{v.patternId})" pointer-events="none" />
+			{/if}
 		{/each}
 	</g>
 {/if}

package/dist/geoms/Violin.svelte.d.ts

@@ -3,6 +3,11 @@ type Props = {
     y?: string;
     fill?: string;
     stat?: string;
+    /** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+     *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+    side?: 'left' | 'right' | 'center';
+    /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+    pattern?: string;
     options?: {
         opacity?: number;
     };

package/dist/geoms/Waterfall.svelte

@@ -87,14 +87,19 @@
 				fill = yVal >= 0 ? positiveColor : negativeColor
 			}
 
+			// Place two (band, value) corners so the bar transposes under orientation flip.
+			const c1 = plotState.place(xPos, barTop)
+			const c2 = plotState.place(xPos + bw, barBottom)
 			return {
 				key: `${xVal}-${i}`,
-				x: xPos,
-				y: barTop,
-				width: bw,
-				height: Math.max(1, barBottom - barTop),
+				x: Math.min(c1.x, c2.x),
+				y: Math.min(c1.y, c2.y),
+				width: Math.abs(c2.x - c1.x),
+				height: Math.max(1, Math.abs(c2.y - c1.y)),
 				fill,
-				cumulative,
+				bandStart: xPos,
+				bandEnd: xPos + bw,
+				cumY: yScale(cumulative) ?? 0,
 				data: d
 			}
 		})
@@ -119,11 +124,13 @@
 			</rect>
 			<!-- Connector line to next bar -->
 			{#if i < bars.length - 1}
+				{@const cs = plotState.place(bar.bandEnd, bar.cumY)}
+				{@const ce = plotState.place(bars[i + 1].bandStart, bar.cumY)}
 				<line
-					x1={bar.x + bar.width}
-					y1={yScale(bar.cumulative)}
-					x2={bars[i + 1].x}
-					y2={yScale(bar.cumulative)}
+					x1={cs.x}
+					y1={cs.y}
+					x2={ce.x}
+					y2={ce.y}
 					stroke="currentColor"
 					stroke-width={connectorWidth}
 					stroke-dasharray="3 2"

package/dist/geoms/lib/areas.d.ts

@@ -8,6 +8,7 @@
  * @param {Map<unknown, {fill: string, stroke: string}>} colors
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
+ * @param {Function} [place] - orientation mapper (x, y) => {x, y}
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 export function buildAreas(data: Object[], channels: {
@@ -18,7 +19,7 @@ export function buildAreas(data: Object[], channels: {
 }, xScale: Function, yScale: Function, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>): {
+}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: Function): {
     d: string;
     fill: string;
     stroke: string;
@@ -45,7 +46,10 @@ export function buildStackedAreas(data: Object[], channels: {
 }, xScale: Function, yScale: Function, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>): {
+}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}): {
     d: string;
     fill: string;
     stroke: string;

package/dist/geoms/lib/areas.js

@@ -11,20 +11,24 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * @param {Map<unknown, {fill: string, stroke: string}>} colors
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
+ * @param {Function} [place] - orientation mapper (x, y) => {x, y}
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
-export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+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 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])) })
 	const makeGen = () => {
 		const gen = area()
-			.x(xPos)
-			.y0(baseline)
-			.y1((d) => yScale(d[yf]))
+			.x0((p) => p.base.x)
+			.y0((p) => p.base.y)
+			.x1((p) => p.top.x)
+			.y1((p) => p.top.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
@@ -47,7 +51,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+		return [{ d: makeGen()(sortByX(data).map(toEdge)), fill: entry.fill, stroke: 'none', key: null, patternId }]
 	}
 
 	// Group by color field
@@ -72,7 +76,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
+		return { d: makeGen()(sortByX(rows).map(toEdge)), fill: entry.fill, stroke: 'none', key, patternId }
 	})
 }
 
@@ -88,7 +92,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
  * @param {Map<unknown, string>} [patterns]
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
-export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 	if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
 
@@ -115,11 +119,13 @@ export function buildStackedAreas(data, channels, xScale, yScale, colors, curve,
 			? xScale(d.data[xf]) + xScale.bandwidth() / 2
 			: xScale(d.data[xf])
 
+	const toEdge = (d) => ({ base: place(xPos(d), yScale(d[0])), top: place(xPos(d), yScale(d[1])) })
 	const makeGen = () => {
 		const gen = area()
-			.x(xPos)
-			.y0((d) => yScale(d[0]))
-			.y1((d) => yScale(d[1]))
+			.x0((p) => p.base.x)
+			.y0((p) => p.base.y)
+			.x1((p) => p.top.x)
+			.y1((p) => p.top.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
@@ -144,7 +150,7 @@ export function buildStackedAreas(data, channels, xScale, yScale, colors, curve,
 				? toPatternId(String(patternKey))
 				: null
 		return {
-			d: makeGen()(layer) ?? '',
+			d: makeGen()(layer.map(toEdge)) ?? '',
 			fill: entry.fill,
 			stroke: 'none',
 			key: colorKey,

package/dist/geoms/lib/bars.d.ts

@@ -1,3 +1,18 @@
-export function buildGroupedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any): any;
-export function buildStackedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any): any;
-export function buildHorizontalBars(data: any, channels: any, xScale: any, yScale: any, colors: any, _innerHeight: any): any;
+/**
+ * The one bar builder. Expresses each bar in abstract (category, value) space and maps it to
+ * screen via `place()`, so it renders vertical or horizontal (flip) with the same code.
+ *
+ * Category (x) positioning has two modes:
+ * - band (default): a scaleBand slots each category; sub-bands split grouped series.
+ * - continuous (`continuousCategory`): a LINEAR position scale (e.g. a bar-chart race's tweened
+ *   `_rank`). Each bar centres on `xScale(pos)` with a fixed thickness from the scale step, so a
+ *   fractional position tweens smoothly (a band scale can only jump between slots). No sub-banding.
+ */
+export function buildBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}, continuousCategory?: boolean): any;
+export function buildStackedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}): any;