resolvcharts 0.1.0 → 0.2.0

package/README.md

@@ -13,7 +13,13 @@ At [Resolvo Cloud](https://resolvocloud.com), we experienced glitchy live charts
 npm install resolvcharts
 ```
 
-## Usage
+Or drop in the CDN build (exposes a global `ResolvCharts`):
+
+```html
+<script src="https://unpkg.com/resolvcharts/dist/resolvcharts.global.min.js"></script>
+```
+
+## Quick start
 
 ```ts
 import { createChart } from "resolvcharts";
@@ -27,12 +33,55 @@ const chart = createChart(document.querySelector("#chart")!, {
 });
 ```
 
-Chart types: `line`, `area`, `bar` (grouped or `stacked`), `sparkline`, `scatter`, `donut`, `candle`, `ohlc`, `waterfall`, `baseline`.
+## Chart types
+
+The `data` shape depends on `type` — pick the row you need:
+
+| `type` | `data` shape | Use case |
+|---|---|---|
+| `line` | `{ x, series: [{ y }] }` | Trends over an x axis |
+| `area` | `{ x, series: [{ y }] }` | Line + filled gradient |
+| `baseline` | `{ x, series: [{ y }] }` | Delta vs a reference value |
+| `sparkline` | `{ x, series: [{ y }] }` | Tiny inline chart, no axes |
+| `scatter` | `{ x, series: [{ y }] }` | Point clouds |
+| `bar` | `{ categories, series: [{ values }] }` | Categorical groups; `stacked` supported |
+| `combo` | `{ categories, series: [{ values, kind }] }` | Columns + line/area overlay |
+| `donut` | `{ slices: [{ label, value }] }` | Share of a total |
+| `candle` / `ohlc` | `{ candles: [{ x, open, high, low, close, volume? }] }` | Financial OHLC (+ volume band) |
+| `waterfall` | `{ categories, values, totals? }` | P&L bridges, signed deltas |
+
+## Examples
 
 ```ts
-// Candlestick (+ optional volume band)
+// Bar
+createChart(el, {
+  type: "bar",
+  data: { categories: ["Q1", "Q2", "Q3"], series: [{ label: "Sales", values: [4, 7, 5] }] },
+});
+
+// Stacked bar (negative values stack below zero)
+createChart(el, {
+  type: "bar", stacked: true,
+  data: { categories: ["Q1", "Q2"], series: [{ label: "A", values: [3, 5] }, { label: "B", values: [2, -1] }] },
+});
+
+// Combo — per-series `kind`: "column" (default), "line", or "area".
+// Columns group per category; line/area series overlay on category centers.
+createChart(el, {
+  type: "combo",
+  data: {
+    categories: ["Jan", "Feb", "Mar"],
+    series: [
+      { label: "Inflow",  values: [42, 55, 48], kind: "column" },
+      { label: "Outflow", values: [30, 41, 37], kind: "column" },
+      { label: "Net",     values: [12, 14, 11], kind: "area" },
+    ],
+  },
+});
+
+// Candlestick (+ optional volume band); "ohlc" renders bar-style
 createChart(el, {
-  type: "candle",  // or "ohlc" for bar-style
+  type: "candle",
   data: { candles: [{ x: 0, open: 100, high: 108, low: 98, close: 105, volume: 1200 }] },
 });
 
@@ -53,20 +102,6 @@ createChart(el, {
   data: { x: [0, 1, 2], series: [{ y: [-2, 4, -1] }] },
 });
 
-// Stacked bar (negative values stack below zero)
-createChart(el, {
-  type: "bar", stacked: true,
-  data: { categories: ["Q1", "Q2"], series: [{ label: "A", values: [3, 5] }, { label: "B", values: [2, -1] }] },
-});
-```
-
-```ts
-// Bar
-createChart(el, {
-  type: "bar",
-  data: { categories: ["Q1", "Q2", "Q3"], series: [{ label: "Sales", values: [4, 7, 5] }] },
-});
-
 // Donut
 createChart(el, {
   type: "donut",
@@ -76,29 +111,60 @@ createChart(el, {
 
 ## Options
 
+Universal:
+
 | Option | Default | Description |
 |---|---|---|
-| `type` | — | `line` `area` `bar` `sparkline` `scatter` `donut` `candle` `ohlc` `waterfall` `baseline` |
-| `data` | — | `{x, series}` · `{categories, series}` · `{slices}` · `{candles}` · waterfall shape |
+| `type` | — | Any row in the table above |
+| `data` | — | Matching shape from the table above |
 | `theme` | `"light"` | `"light"` `"dark"` or partial token object |
 | `accent` | — | Primary series color |
 | `curve` | `"linear"` | `linear` `step` `smooth` (monotone cubic, never overshoots) |
 | `grid` | `true` | Faint horizontal gridlines |
 | `tooltip` | auto | Hover tooltip (off for sparkline) |
+| `legend` | — | Reserved |
 | `animate` | `true` | `true` = 400 ms, a number = custom ms; respects `prefers-reduced-motion` |
-| `flow` | `false` | Continuous-flow mode for xy charts — ripple easing + tween duration auto-follows append cadence |
-| `window` | — | Visible points in the sliding window (xy charts) |
-| `maxPoints` | — | Hard cap on retained datapoints during `append()`; shows last N when `window` is unset |
-| `stacked` | `false` | Bar charts: stack series per category |
-| `baseline` | first value | Baseline chart reference value |
 | `height` | — | Chart height in px |
 | `labels` | — | `{x?: (v)=>string, y?: (v)=>string}` tick formatters |
 | `onHover` | — | `(info \| null) => void` |
 
+xy charts (`line` `area` `scatter` `sparkline` `baseline`):
+
+| Option | Default | Description |
+|---|---|---|
+| `flow` | `false` | Continuous-flow mode — ripple easing + tween duration auto-follows append cadence |
+| `window` | — | Visible points in the sliding window |
+| `maxPoints` | — | Hard cap on retained datapoints during `append()`; shows last N when `window` is unset |
+| `renderer` | `"canvas"` | `"webgpu"` rasterizes series on the GPU; `"auto"` uses it when available |
+| `gpu` | — | WebGPU adapter options (`powerPreference`, `compat`, `timing`) |
+
+Type-specific:
+
+| Option | Default | Description |
+|---|---|---|
+| `stacked` | `false` | `bar`/`combo`: stack column series per category |
+| `baseline` | first value | `baseline` chart reference value |
+| `canvas` | — | `getContext("2d", …)` settings for all layers, e.g. `{ willReadFrequently: true }` |
+
+## Theming
+
+```ts
+createChart(el, {
+  type: "line",
+  theme: "dark",
+  // or override individual tokens:
+  // theme: { bg: "#0b0e14", grid: "#1f2430", series: ["#7aa2f7", "#9ece6a"] },
+  accent: "#7aa2f7",
+  data: { x, series },
+});
+```
+
+Tokens: `bg` `text` `textMuted` `grid` `axisBaseline` `crosshair` `series[]` `contextGray` `up` `down` `tooltipBg` `tooltipText` `tooltipMuted` `tooltipBorder` `tooltipShadow` `fontFamily`.
+
 ## API
 
 ```ts
-chart.setData(newData);  // animated transition
+chart.setData(newData);  // animated transition; shape must match `type`
 chart.append(x, y);      // streaming: append one sample (xy charts)
                          // number → single series, number[] → per-series value
 chart.resize();          // manual resize (ResizeObserver handles automatically)

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;
@@ -1270,6 +1420,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 +1441,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 +1474,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 +1517,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 +1642,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 +1696,9 @@ 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;
+/** Chart instance. Create via {@link createChart}.
+* @category Charts
+*/
 var Chart = class {
 	constructor(el, options) {
 		this.tooltip = null;
@@ -1608,7 +1779,7 @@ 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);
@@ -1719,7 +1890,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 +1899,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
 				}))
@@ -1836,18 +2008,26 @@ var Chart = class {
 		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]);
@@ -1981,7 +2161,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;
@@ -2042,9 +2222,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 +2286,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,
@@ -2283,6 +2463,7 @@ function resortXY(d) {
 }
 /**
 * Create a chart inside `el`.
+* @category Charts
 *
 * @example
 * ```ts