resolvcharts 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -1,12 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/charts/bar.ts
-const MAX_BAR_W$1 = 40;
-const RADIUS$1 = 3;
 function barGeometry(r, d, catIdx, seriesIdx, value) {
 	const cats = d.categories.length;
 	if (cats === 0) return null;
 	const slot = r.plot.w / cats;
-	const groupW = Math.min(slot * .8, MAX_BAR_W$1 * d.series.length);
+	const groupW = Math.min(slot * .8, 40 * d.series.length);
 	const barW = groupW / d.series.length;
 	const x = r.plot.x + slot * catIdx + (slot - groupW) / 2 + barW * seriesIdx;
 	const base = r.yScale(0);
@@ -46,7 +43,7 @@ function stackedGeometry(r, d, catIdx, v0, v1) {
 	const cats = d.categories.length;
 	if (cats === 0) return null;
 	const slot = r.plot.w / cats;
-	const w = Math.min(slot * .8, MAX_BAR_W$1);
+	const w = Math.min(slot * .8, 40);
 	const x = r.plot.x + slot * catIdx + (slot - w) / 2;
 	const yTop = r.yScale(Math.max(v0, v1));
 	const yBot = r.yScale(Math.min(v0, v1));
@@ -69,7 +66,7 @@ function renderBar(r) {
 	const slot = r.plot.w / Math.max(1, cats);
 	const animate = r.t < 1;
 	if (r.opts.stacked) {
-		const w = Math.min(slot * .8, MAX_BAR_W$1);
+		const w = Math.min(slot * .8, 40);
 		for (let ci = 0; ci < cats; ci++) {
 			const x = r.plot.x + slot * ci + (slot - w) / 2;
 			let pos = 0;
@@ -92,7 +89,7 @@ function renderBar(r) {
 			}
 		}
 	} else {
-		const groupW = Math.min(slot * .8, MAX_BAR_W$1 * d.series.length);
+		const groupW = Math.min(slot * .8, 40 * d.series.length);
 		const barW = groupW / d.series.length;
 		const base = r.yScale(0);
 		for (let si = 0; si < d.series.length; si++) {
@@ -113,7 +110,7 @@ function renderBar(r) {
 					y,
 					w: barW,
 					h
-				}, RADIUS$1, v >= 0);
+				}, 3, v >= 0);
 			}
 		}
 	}
@@ -376,6 +373,7 @@ function decimateSeriesPx(xs, ys, prev, t, yFallback, xScale, yScale, pixelWidth
 * ys must be pixel-space y coordinates of equal length.
 *
 * Returns interleaved [x, y] pairs ready for path construction.
+* @category Utilities
 */
 function decimateM4(xs, ys, pixelWidth) {
 	const n = Math.min(xs.length, ys.length);
@@ -437,6 +435,7 @@ function decimateM4(xs, ys, pixelWidth) {
 /**
 * Binary search for the index whose value is nearest to `target`.
 * `xs` must be sorted ascending. Returns -1 for empty input.
+* @category Utilities
 */
 function nearestIndex(xs, target) {
 	const n = xs.length;
@@ -846,8 +845,151 @@ function hitCandle(r, px) {
 	};
 }
 //#endregion
+//#region src/charts/combo.ts
+/** pooled scratch for overlay [x, y] pairs — consumed within the call */
+let ovScratch = /* @__PURE__ */ new Float64Array(0);
+function overlayPath(r, pts, n) {
+	const path = new Path2D();
+	if (n === 0) return path;
+	const curve = r.opts.curve ?? "linear";
+	if (curve === "step") {
+		path.moveTo(pts[0], pts[1]);
+		for (let i = 1; i < n; i++) {
+			const x = pts[2 * i];
+			path.lineTo(x, pts[2 * i - 1]);
+			path.lineTo(x, pts[2 * i + 1]);
+		}
+	} else if (curve === "smooth") smoothPath(path, pts, n);
+	else {
+		path.moveTo(pts[0], pts[1]);
+		for (let i = 1; i < n; i++) path.lineTo(pts[2 * i], pts[2 * i + 1]);
+	}
+	return path;
+}
+function renderCombo(r) {
+	if (r.data.kind !== "category") return;
+	const d = r.data;
+	const ctx = r.ctx;
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(r.plot.x, r.plot.y, r.plot.w, r.plot.h + 1);
+	ctx.clip();
+	const cats = d.categories.length;
+	const slot = r.plot.w / Math.max(1, cats);
+	const animate = r.t < 1;
+	const valAt = (s, ci) => {
+		const cur = s.values[ci] ?? 0;
+		const prev = s.prevValues?.[ci] ?? 0;
+		return animate ? prev + (cur - prev) * r.t : cur;
+	};
+	let nCols = 0;
+	for (const s of d.series) if (s.kind === "column") nCols++;
+	if (r.opts.stacked) {
+		const w = Math.min(slot * .8, 40);
+		for (let ci = 0; ci < cats; ci++) {
+			const x = r.plot.x + slot * ci + (slot - w) / 2;
+			let pos = 0;
+			let neg = 0;
+			for (const s of d.series) {
+				if (s.kind !== "column") continue;
+				const v = valAt(s, ci);
+				const v0 = v >= 0 ? pos : neg + v;
+				const v1 = v >= 0 ? pos + v : neg;
+				if (v >= 0) pos = v1;
+				else neg = v0;
+				const yTop = r.yScale(Math.max(v0, v1));
+				const h = Math.abs(r.yScale(Math.min(v0, v1)) - yTop);
+				if (h <= 0) continue;
+				ctx.fillStyle = s.color;
+				ctx.fillRect(x, yTop, w, h);
+			}
+		}
+	} else {
+		const groupW = Math.min(slot * .8, 40 * nCols);
+		const barW = groupW / Math.max(1, nCols);
+		const base = r.yScale(0);
+		let k = 0;
+		for (const s of d.series) {
+			if (s.kind !== "column") continue;
+			ctx.fillStyle = s.color;
+			for (let ci = 0; ci < cats; ci++) {
+				const v = valAt(s, ci);
+				const x = r.plot.x + slot * ci + (slot - groupW) / 2 + barW * k;
+				const yv = r.yScale(v);
+				const y = Math.min(base, yv);
+				const h = Math.abs(base - yv);
+				if (h <= 0) continue;
+				topRounded(ctx, {
+					x,
+					y,
+					w: barW,
+					h
+				}, 3, v >= 0);
+			}
+			k++;
+		}
+	}
+	const base = r.yScale(Math.max(0, r.yScale.domain[0]));
+	if (ovScratch.length < cats * 2) ovScratch = new Float64Array(cats * 2);
+	const pts = ovScratch;
+	for (const s of d.series) {
+		if (s.kind === "column") continue;
+		for (let ci = 0; ci < cats; ci++) {
+			pts[2 * ci] = r.plot.x + slot * (ci + .5);
+			pts[2 * ci + 1] = r.yScale(valAt(s, ci));
+		}
+		const path = overlayPath(r, pts, cats);
+		if (s.kind === "area" && cats > 1) {
+			const area = new Path2D(path);
+			area.lineTo(pts[2 * (cats - 1)], base);
+			area.lineTo(pts[0], base);
+			area.closePath();
+			const g = ctx.createLinearGradient(0, r.plot.y, 0, r.plot.y + r.plot.h);
+			g.addColorStop(0, withAlpha(s.color, .16));
+			g.addColorStop(1, withAlpha(s.color, 0));
+			ctx.fillStyle = g;
+			ctx.fill(area);
+		}
+		ctx.strokeStyle = s.color;
+		ctx.lineWidth = 2;
+		ctx.lineJoin = "round";
+		ctx.lineCap = "round";
+		ctx.stroke(path);
+	}
+	ctx.restore();
+}
+function hitCombo(r, px) {
+	if (r.data.kind !== "category") return null;
+	const d = r.data;
+	const cats = d.categories.length;
+	if (cats === 0 || px < r.plot.x || px > r.plot.x + r.plot.w) return null;
+	const cat = Math.min(cats - 1, Math.max(0, Math.floor((px - r.plot.x) / r.plot.w * cats)));
+	const slot = r.plot.w / cats;
+	let py = r.plot.y + r.plot.h;
+	const values = d.series.map((s) => {
+		const y = s.values[cat] ?? 0;
+		const sy = r.yScale(y);
+		if (sy < py) py = sy;
+		return {
+			label: s.label,
+			color: s.color,
+			y
+		};
+	});
+	return {
+		kind: "point",
+		index: cat,
+		x: cat,
+		px: r.plot.x + slot * (cat + .5),
+		py,
+		values,
+		title: d.categories[cat] ?? ""
+	};
+}
+//#endregion
 //#region src/core/format.ts
-/** Compact number formatting: integers verbatim, else 4 significant digits. */
+/** @category Formatting
+* Compact number formatting: integers verbatim, else 4 significant digits. */
 function formatNumber(v) {
 	if (!Number.isFinite(v)) return "";
 	if (Number.isInteger(v) && Math.abs(v) < 0x38d7ea4c68000) return String(v);
@@ -858,7 +1000,8 @@ const MAGNITUDES = [
 	[1e6, "M"],
 	[1e3, "k"]
 ];
-/** SI-suffixed formatting: `1.2k`, `3.4M`, `5B`. */
+/** @category Formatting
+* SI-suffixed formatting: `1.2k`, `3.4M`, `5B`. */
 function formatSI(v) {
 	if (!Number.isFinite(v)) return "";
 	const abs = Math.abs(v);
@@ -1110,13 +1253,13 @@ function makeCanvas(cssW, cssH) {
 	c.height = Math.max(1, Math.round(cssH));
 	return c;
 }
-function setup2d(canvas, alpha) {
-	const ctx = canvas.getContext("2d", { alpha });
+function setup2d(canvas, settings) {
+	const ctx = canvas.getContext("2d", settings);
 	if (!ctx) throw new Error("resolvcharts: could not get 2d context");
 	return ctx;
 }
 var CanvasBackend = class {
-	constructor(container, cssW, cssH) {
+	constructor(container, cssW, cssH, settings = {}) {
 		this.kind = "canvas2d";
 		this.plot = {
 			x: 0,
@@ -1127,14 +1270,18 @@ var CanvasBackend = class {
 		this.gridCache = null;
 		this.gridCtx = null;
 		this.container = container;
+		this.settings = {
+			alpha: true,
+			...settings
+		};
 		this.dpr = Math.max(1, window.devicePixelRatio || 1);
 		this.width = cssW;
 		this.height = cssH;
 		this.mainCanvas = makeCanvas(cssW, cssH);
 		this.overlayCanvas = makeCanvas(cssW, cssH);
 		this.overlayCanvas.style.pointerEvents = "none";
-		this.main = setup2d(this.mainCanvas, true);
-		this.overlay = setup2d(this.overlayCanvas, true);
+		this.main = setup2d(this.mainCanvas, this.settings);
+		this.overlay = setup2d(this.overlayCanvas, this.settings);
 		container.append(this.mainCanvas, this.overlayCanvas);
 		this.applySize();
 	}
@@ -1158,7 +1305,7 @@ var CanvasBackend = class {
 			this.gridCache = document.createElement("canvas");
 			this.gridCache.width = Math.max(1, this.width * this.dpr);
 			this.gridCache.height = Math.max(1, this.height * this.dpr);
-			this.gridCtx = setup2d(this.gridCache, true);
+			this.gridCtx = setup2d(this.gridCache, this.settings);
 			this.gridCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
 		}
 		const ctx = this.gridCtx;
@@ -1193,7 +1340,8 @@ var CanvasBackend = class {
 };
 //#endregion
 //#region src/core/scales.ts
-/** Linear scale from domain `[d0, d1]` to range `[r0, r1]`, with `invert`. */
+/** @category Utilities
+* Linear scale from domain `[d0, d1]` to range `[r0, r1]`, with `invert`. */
 function linearScale(d0, d1, r0, r1) {
 	const dd = d1 - d0 || 1;
 	const dr = r1 - r0;
@@ -1203,7 +1351,8 @@ function linearScale(d0, d1, r0, r1) {
 	fn.range = [r0, r1];
 	return fn;
 }
-/** `[min, max]` of `values`; degenerate inputs get a sane fallback domain. */
+/** @category Utilities
+* `[min, max]` of `values`; degenerate inputs get a sane fallback domain. */
 function extent(values) {
 	let min = Infinity;
 	let max = -Infinity;
@@ -1216,7 +1365,8 @@ function extent(values) {
 	if (min === max) return min === 0 ? [0, 1] : [min - Math.abs(min) * .1, max + Math.abs(max) * .1];
 	return [min, max];
 }
-/** Pad a domain by 5% on each end; `includeZero` anchors the axis at 0. */
+/** @category Utilities
+* Pad a domain by 5% on each end; `includeZero` anchors the axis at 0. */
 function padDomain(min, max, includeZero = false) {
 	let lo = includeZero ? Math.min(0, min) : min;
 	let hi = includeZero ? Math.max(0, max) : max;
@@ -1231,6 +1381,11 @@ function padDomain(min, max, includeZero = false) {
 	}
 	return [lo, hi];
 }
+/** @category Utilities
+* Pin domain ends — each defined bound overrides the fitted value. */
+function boundDomain(dom, min, max) {
+	return [min ?? dom[0], max ?? dom[1]];
+}
 //#endregion
 //#region src/core/scheduler.ts
 const raf = typeof requestAnimationFrame === "function" ? (cb) => requestAnimationFrame(cb) : (cb) => setTimeout(() => cb(Date.now()), 16);
@@ -1270,6 +1425,9 @@ const easeOutCubic = (t) => 1 - (1 - t) ** 3;
 //#endregion
 //#region src/core/theme.ts
 const FONT = "Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif";
+/** Built-in light theme.
+* @category Theming
+*/
 const lightTheme = {
 	bg: "#ffffff",
 	text: "#1f1f1f",
@@ -1288,6 +1446,9 @@ const lightTheme = {
 	tooltipShadow: "0 4px 14px rgba(0,0,0,0.08)",
 	fontFamily: FONT
 };
+/** Built-in dark theme.
+* @category Theming
+*/
 const darkTheme = {
 	bg: "#0a0a0a",
 	text: "#ededed",
@@ -1318,6 +1479,9 @@ const categoricalDark = [
 	"#a97ef0",
 	"#f5b84d"
 ];
+/** Merge a theme option (`"light" | "dark" | partial tokens`) into full {@link ThemeTokens}.
+* @category Theming
+*/
 function resolveTheme(opt, accent) {
 	const base = opt === "dark" ? {
 		...darkTheme,
@@ -1358,6 +1522,9 @@ function niceStep(range, target) {
 	}
 	return step * pow;
 }
+/** "Nice" round tick values covering `[min, max]`, ~`target` count.
+* @category Utilities
+*/
 function computeTicks(min, max, target = 5) {
 	if (!(min < max)) return [min];
 	const step = niceStep(max - min, target);
@@ -1480,6 +1647,12 @@ const MODULES = {
 		axes: true,
 		defaultTooltip: true
 	},
+	combo: {
+		render: renderCombo,
+		hit: (r, px) => hitCombo(r, px),
+		axes: true,
+		defaultTooltip: true
+	},
 	sparkline: {
 		render: renderSparkline,
 		hit: (r, px) => hitXY(r, px),
@@ -1528,6 +1701,11 @@ const GPU_KIND = {
 };
 /** points retained beyond the window's left edge so they slide off-screen instead of vanishing mid-plot */
 const EDGE_KEEP = 3;
+/** default point count at which `renderer: "auto"` engages the GPU path */
+const GPU_THRESHOLD = 1e5;
+/** Chart instance. Create via {@link createChart}.
+* @category Charts
+*/
 var Chart = class {
 	constructor(el, options) {
 		this.tooltip = null;
@@ -1550,6 +1728,8 @@ var Chart = class {
 		this.destroyed = false;
 		this.pendingView = false;
 		this.gpu = null;
+		this.gpuInit = false;
+		this.dataRev = 0;
 		this.lastAppendAt = 0;
 		this.estInterval = 400;
 		this.onScroll = () => {
@@ -1608,11 +1788,39 @@ var Chart = class {
 		if (options.height) el.style.height = `${options.height}px`;
 		const w = el.clientWidth || 320;
 		const h = el.clientHeight || (options.type === "sparkline" ? 32 : 240);
-		this.backend = new CanvasBackend(el, w, h);
+		this.backend = new CanvasBackend(el, w, h, options.canvas);
 		this.reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 		if (options.tooltip ?? this.mod.defaultTooltip) this.tooltip = new Tooltip(el, this.theme);
 		this.data = this.normalize(options.data, null);
-		if (GPU_KIND[options.type] && (options.renderer === "webgpu" || options.renderer === "auto")) Promise.resolve().then(() => require("./series-J_5Z6dah.cjs")).then(({ GpuSeries }) => GpuSeries.create(options.gpu).then((g) => {
+		this.maybeInitGpu();
+		this.bindEvents();
+		const dom = this.layout();
+		this.view = {
+			x: [...dom.x],
+			y: [...dom.y]
+		};
+		this.viewTo = {
+			x: [...dom.x],
+			y: [...dom.y]
+		};
+		this.startAnimation(dom);
+	}
+	/**
+	* Lazily acquire the WebGPU backend. `"webgpu"` attaches unconditionally;
+	* `"auto"` waits until the xy point count crosses `gpuThreshold` — small
+	* charts never pay adapter/device acquisition.
+	*/
+	maybeInitGpu() {
+		if (this.gpu || this.gpuInit || this.destroyed) return;
+		if (!GPU_KIND[this.options.type]) return;
+		const r = this.options.renderer ?? "auto";
+		if (r !== "auto" && r !== "webgpu") return;
+		if (r === "auto") {
+			const d = this.data;
+			if ((d.kind === "xy" ? d.sortedX.length * Math.max(1, d.series.length) : 0) < (this.options.gpuThreshold ?? GPU_THRESHOLD)) return;
+		}
+		this.gpuInit = true;
+		Promise.resolve().then(() => require("./series-PmAjztEh.cjs")).then(({ GpuSeries }) => GpuSeries.create(this.options.gpu).then((g) => {
 			if (!g || this.destroyed) {
 				g?.destroy();
 				return;
@@ -1625,17 +1833,6 @@ var Chart = class {
 				return false;
 			});
 		}));
-		this.bindEvents();
-		const dom = this.layout();
-		this.view = {
-			x: [...dom.x],
-			y: [...dom.y]
-		};
-		this.viewTo = {
-			x: [...dom.x],
-			y: [...dom.y]
-		};
-		this.startAnimation(dom);
 	}
 	normalize(data, prev) {
 		const t = this.options.type;
@@ -1719,7 +1916,7 @@ var Chart = class {
 				total: slices.reduce((a, s) => a + Math.max(0, s.value), 0)
 			};
 		}
-		if (t === "bar") {
+		if (t === "bar" || t === "combo") {
 			const d = data;
 			const prevSeries = prev?.kind === "category" ? prev.series : [];
 			return {
@@ -1728,6 +1925,7 @@ var Chart = class {
 				series: d.series.map((s, i) => ({
 					label: s.label ?? `Series ${i + 1}`,
 					color: seriesColor(this.theme, i, s.color),
+					kind: s.kind ?? "column",
 					values: Float64Array.from(s.values),
 					prevValues: prevSeries[i]?.values ?? null
 				}))
@@ -1830,24 +2028,32 @@ var Chart = class {
 			const includeZero = this.options.type === "area" || this.options.type === "sparkline";
 			return {
 				x,
-				y: padDomain(min, max, includeZero)
+				y: this.yDomain(padDomain(min, max, includeZero))
 			};
 		}
 		if (d.kind === "category") {
 			let min = Infinity;
 			let max = -Infinity;
-			if (this.options.stacked) for (let ci = 0; ci < d.categories.length; ci++) {
-				let pos = 0;
-				let neg = 0;
+			if (this.options.stacked) {
+				for (let ci = 0; ci < d.categories.length; ci++) {
+					let pos = 0;
+					let neg = 0;
+					for (const s of d.series) {
+						if (s.kind !== "column") continue;
+						const v = s.values[ci] ?? 0;
+						if (v >= 0) pos += v;
+						else neg += v;
+					}
+					min = Math.min(min, neg);
+					max = Math.max(max, pos);
+				}
 				for (const s of d.series) {
-					const v = s.values[ci] ?? 0;
-					if (v >= 0) pos += v;
-					else neg += v;
+					if (s.kind === "column") continue;
+					const e = extent(s.values);
+					min = Math.min(min, e[0]);
+					max = Math.max(max, e[1]);
 				}
-				min = Math.min(min, neg);
-				max = Math.max(max, pos);
-			}
-			else for (const s of d.series) {
+			} else for (const s of d.series) {
 				const e = extent(s.values);
 				min = Math.min(min, e[0]);
 				max = Math.max(max, e[1]);
@@ -1858,7 +2064,7 @@ var Chart = class {
 			}
 			return {
 				x: [0, d.categories.length],
-				y: padDomain(min, max, true)
+				y: this.yDomain(padDomain(min, max, true))
 			};
 		}
 		if (d.kind === "ohlc") {
@@ -1877,7 +2083,7 @@ var Chart = class {
 			}
 			return {
 				x,
-				y: padDomain(min, max)
+				y: this.yDomain(padDomain(min, max))
 			};
 		}
 		if (d.kind === "waterfall") {
@@ -1893,14 +2099,17 @@ var Chart = class {
 			}
 			return {
 				x: [0, d.bars.length],
-				y: padDomain(min, max, true)
+				y: this.yDomain(padDomain(min, max, true))
 			};
 		}
 		return {
 			x: [0, 1],
-			y: [0, 1]
+			y: this.yDomain([0, 1])
 		};
 	}
+	yDomain(y) {
+		return boundDomain(y, this.options.yMin, this.options.yMax);
+	}
 	lerpView(eased) {
 		const f = this.viewFrom;
 		const to = this.viewTo;
@@ -1981,7 +2190,7 @@ var Chart = class {
 				ctx.fillText(fmtX(t), px, plot.y + plot.h + 6);
 			}
 		}
-		if (this.options.type === "bar") {
+		if (this.options.type === "bar" || this.options.type === "combo") {
 			const base = Math.round(yScale(0)) + .5;
 			if (base >= plot.y && base <= plot.y + plot.h + 1) {
 				ctx.strokeStyle = this.theme.axisBaseline;
@@ -2002,30 +2211,35 @@ var Chart = class {
 		else this.mod.render(this.renderContext(t, scales));
 		if (this.hover) this.drawHover(this.hover, scales.yScale);
 	}
-	/** series rasterization on the GPU; grid/labels/hover stay on Canvas2D */
+	/**
+	* Series rasterization on the GPU; grid/labels/hover stay on Canvas2D.
+	* Raw data lives in GPU buffers — the per-frame cost is uniform writes +
+	* instanced draws, with compute decimation above the density threshold.
+	*/
 	gpuRender(t, scales) {
 		const g = this.gpu;
 		const d = this.data;
 		const kind = GPU_KIND[this.options.type];
-		if (!g || !kind || d.kind !== "xy") {
+		if (!g || g.unavailable || !kind || d.kind !== "xy") {
 			this.mod.render(this.renderContext(t, scales));
 			return;
 		}
-		const r = this.renderContext(t, scales);
+		g.syncData(d, this.dataRev);
+		const view = {
+			x: scales.xScale.domain,
+			y: scales.yScale.domain
+		};
 		const flow = this.options.flow ? FLOW_RIPPLE : 0;
-		g.begin(this.backend.plot);
-		for (const s of d.series) {
+		g.begin(this.backend.plot, t, flow);
+		for (let i = 0; i < d.series.length; i++) {
+			const s = d.series[i];
+			if (!s) continue;
 			if (kind === "points") {
-				const pts = mapSeriesPx(d.sortedX, s.y, s.prevY, t, scales.yScale.domain[0], scales.xScale, scales.yScale, flow);
-				g.points(pts, s.color, 2.5, .65);
+				g.points(i, s.color, 2.5, .65, view);
 				continue;
 			}
-			const pts = seriesPoints(r, s);
-			if (kind === "area") {
-				const base = scales.yScale(Math.max(0, scales.yScale.domain[0]));
-				g.area(pts, s.color, base, this.backend.plot);
-			}
-			g.line(pts, s.color, 2);
+			if (kind === "area") g.area(i, s.color, Math.max(0, scales.yScale.domain[0]), view);
+			g.line(i, s.color, 2, view);
 		}
 		g.end();
 	}
@@ -2042,9 +2256,9 @@ var Chart = class {
 			o.lineTo(x, plot.y + plot.h);
 			o.stroke();
 			const d = this.data;
-			if (d.kind === "xy" && info.kind === "point") for (const v of info.values) {
+			if (info.kind === "point" && (d.kind === "xy" || d.kind === "category")) for (const v of info.values) {
 				const s = d.series.find((s2) => s2.label === v.label && s2.color === v.color);
-				const yv = s ? s.y[info.index] : v.y;
+				const yv = s ? "y" in s ? s.y[info.index] : s.values[info.index] : v.y;
 				o.fillStyle = v.color;
 				o.strokeStyle = this.theme.bg;
 				o.lineWidth = 2;
@@ -2106,7 +2320,7 @@ var Chart = class {
 				color: v.color,
 				label: v.label,
 				value: fmtY(v.y)
-			})), fmtX(info.x));
+			})), info.title ?? fmtX(info.x));
 		} else if (info.kind === "bar") this.tooltip.show(info.px, info.py, [{
 			color: info.color,
 			label: info.label,
@@ -2160,6 +2374,8 @@ var Chart = class {
 	setData(data) {
 		const prev = this.data;
 		this.data = this.normalize(data, prev);
+		this.dataRev++;
+		this.maybeInitGpu();
 		const dom = this.layout();
 		this.startAnimation(dom);
 	}
@@ -2225,8 +2441,14 @@ var Chart = class {
 			sortedX,
 			series
 		};
-		if (m > 1 && x < sortedX[m - 2]) resortXY(nd);
+		const resort = m > 1 && x < sortedX[m - 2];
+		if (resort) resortXY(nd);
 		this.data = nd;
+		if (resort) this.dataRev++;
+		else if (this.gpu && !this.gpu.unavailable) {
+			if (!this.gpu.appended(x, d.series.map((s, i) => ys[i] ?? s.y[n - 1]), d.series.map((s) => s.y[n - 1]), drop)) this.dataRev++;
+		}
+		this.maybeInitGpu();
 		this.pendingView = true;
 		sharedScheduler.add(this.frame);
 	}
@@ -2283,6 +2505,7 @@ function resortXY(d) {
 }
 /**
 * Create a chart inside `el`.
+* @category Charts
 *
 * @example
 * ```ts
@@ -2301,6 +2524,7 @@ function createChart(el, options) {
 }
 //#endregion
 exports.Chart = Chart;
+exports.boundDomain = boundDomain;
 exports.computeTicks = computeTicks;
 exports.createChart = createChart;
 exports.darkTheme = darkTheme;