@martinomagnifico/tablechart 1.0.6 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [1.1.0] - 2026-10-23
+
+### Added
+
+- A scatter and bubble chart, `data-chart="scatter"`, in the new additional types: `@martinomagnifico/tablechart/additional-types` or `tablechart-additional-types.js`.
+- `addType()`, to add one of the additional types.
+- Axes with numbers on the scatter chart, with a scale of your own (`data-chart-scale`).
+- A value axis (`data-chart-axis`) and gridlines (`data-chart-grid`) on the other types, off by default. With either, the scale ends on a number of the axis, or where `data-chart-scale` says.
+- A reference line annotation, at a value, the mean or the median.
+- `data-chart-animate="false"`, to show one chart from the start, without animation.
+
+### Changed
+
+- A line chart with three lines or more shows a number above or below each point where there is room. Before, it left all numbers out.
+
+### Removed
+
+- The old CSS variable names from 1.0.4, and the animate values `up` and `across`.
+- The `hover` option and `data-chart-hover`. Use `tooltip` and `data-chart-tooltip`.
+
+
+
+## [1.0.7] - 2026-10-16
+
+### Added
+
+- A `tooltipparent` option. Can by body or any other selector. 
+
+### Changed
+
+- The text of a tooltip has the size of the chart's text on the screen, also when the chart is scaled.
+- A scroll closes a tooltip, like a key. It opens again when the mouse moves.
+
+### Fixed
+
+- After a scroll, a tooltip could show at the top of the window, for a row that had scrolled away.
+- The arrow of a tooltip points at the middle of its row and stops just short of it, at every size. It was a little to the right, and on a large screen it covered the mark.
+
+
+
 ## [1.0.6] - 2026-10-16
 
 ### Changed

package/README.md

@@ -11,11 +11,11 @@
 
 Tablechart makes simple charts from a table: an HTML table, a Markdown table or a JSON file. You write the table, Tablechart shows it as a chart.
 
-* **Chart types:** column, bar, line, area, waterfall and donut
+* **Chart types:** column, bar, line, area, waterfall and donut, and scatter as an additional type
 * **The table stays:** it is hidden from sight, but screen readers, search engines and translation scripts still read it. Without JavaScript, the table is all there is.
 * **Real text:** names and numbers are HTML, so they use the font of the page and do not scale with the drawing.
 * **CSS for the looks:** colours, sizes and animation are CSS variables. Light and dark mode follow the page.
-* **Annotations:** badges, brackets, trend arrows and a break in the scale
+* **Annotations:** badges, brackets, trend arrows, reference lines and a break in the scale
 * **Tooltips:** when a chart leaves numbers out, point at a row, or tap it, to see all its values
 * **Print and PDF:** every chart prints whole, and the table can be shown under a chart that leaves numbers out
 * **Step by step:** show the rows one at a time, with Previous and Next buttons
@@ -50,6 +50,8 @@ Or with a script tag:
 </script>
 ```
 
+The scatter chart is an additional type, in a script of its own. To use it, see [Additional types](#additional-types).
+
 ## A chart
 
 A chart is a `figure` with `data-chart` and a table in it. The first cell of a row is its name, the other cells are its values. The `figcaption` is the title; text after a `br` is the subtitle.
@@ -69,6 +71,20 @@ A chart is a `figure` with `data-chart` and a table in it. The first cell of a r
 
 Use `bar`, `line`, `area`, `waterfall` or `donut` for the other types. With more than one value column, each column is a line, or a bar in each group. Add `data-chart-stack` to stack them.
 
+### Additional types
+
+The scatter chart is an additional type, in a script of its own. To use it, add it before `init()`:
+
+```js
+import { addType, init } from "@martinomagnifico/tablechart";
+import { scatter } from "@martinomagnifico/tablechart/additional-types";
+
+addType("scatter", scatter);
+init();
+```
+
+With a script tag, load `tablechart-additional-types.js` after `tablechart.js`. See [Additional types](https://martinomagnifico.github.io/tablechart/types/additional-types.html).
+
 ## Options
 
 ```js
@@ -79,6 +95,8 @@ init({
 	controls: true,     // Previous and Next buttons on a chart that steps
 	tooltip: "auto",    // Tooltips: "auto" only when a chart leaves numbers out, true or false
 	table: "never",     // The table under the chart: "never", "auto" (in print, if numbers are left out), "print" or "always"
+	axis: false,        // Numbers along the value axis
+	grid: false,        // Gridlines at the numbers of the axis
 	locale: undefined,  // Locale for numbers; the language of the page if not set
 });
 ```

package/dist/tablechart-additional-types.d.mts

@@ -0,0 +1,5 @@
+import { n as ChartType } from "./tablechart-shared.mjs";
+//#region src/js/charts/scatter.d.ts
+/** One marker per row, across by its first value and up by its second; a third value makes it a bubble. */
+export declare const scatter: ChartType;
+//#endregion

package/dist/tablechart-additional-types.js

@@ -0,0 +1 @@
+!function(t){var e=["circle","triangle","square","diamond"],o=["right","left","above","below","right","left","right","left"],n=t=>{const e=t.flatMap((t,e)=>t.group?[]:[e]);return{x:e[0],y:e[1],size:e[2],group:t.findIndex(t=>t.group)}},r=(t,e)=>e<0?[]:[...new Set(t.map(t=>t.cells[e]?.raw??""))],a=(t,e,o)=>t.cells[e]?.missing||t.cells[o]?.missing?null:`${t.cells[e]?.value} ${t.cells[o]?.value}`,s={aspect:.62,categories:"beside",columns:!0,axes:!0,text({figure:o,plot:s,rows:c,series:i,config:l}){const{x:u,y:f,size:h,group:d}=n(i),g=s.querySelector(":scope > .tablechart-categories")?.children??[],p=new Map;c.forEach((t,e)=>{const o=a(t,u,f);o&&(p.get(o)?.push(e)??p.set(o,[e]))});const M=t=>void 0===h?0:Math.abs(c[t].cells[h]?.value??0);for(const t of p.values()){if(t.length<2)continue;const e=t.reduce((t,e)=>M(e)>M(t)?e:t);for(const o of t){const n=g[o];o===e?n?.setAttribute("data-more",String(t.length-1)):n?.setAttribute("data-same","")}}const b=r(c,d);if(b.length<2&&void 0===h)return;const m=document.createElement("div");m.className=t.LEGEND_CLASS,m.setAttribute("aria-hidden","true"),m.inert=!0;const v=Array.from(o.querySelectorAll(`tbody tr > td:nth-of-type(${d+1})`)),x=(e,o)=>{const n=(0,t.htmlEl)(t.NAME_CLASS,m);return n.dataset.place="legend",n.dataset.line="none",n.textContent=e,o&&l.langattribute&&n.setAttribute(l.langattribute,o),n};b.length>1&&b.forEach((t,o)=>{const n=l.langattribute?v.find(e=>e.textContent?.trim()===t)?.getAttribute(l.langattribute):null,r=x(t,n);r.dataset.marker=e[o%e.length],r.style.setProperty("--n",String(o)),r.style.setProperty("--palette",`var(--tablechart-color-${o+1})`)}),void 0!==h&&(x(i[h].name,i[h].key).dataset.marker="size"),o.appendChild(m)},draw(a){const{rows:s,series:c,x:i,y:l,frame:u,unit:f,svg:h,categories:d,seriesValues:g,height:p,config:M,plot:b}=a;if(!i||!u)return;const m=n(c),v=r(s,m.group),x=v.length>1;for(const t of g.flat())t.dataset.place="none";const w=(a.length("--tablechart-marker-size","10px")??10*f)/2,y=(a.length("--tablechart-bubble-max","24px")??24*f)/2,$=t=>void 0===m.size?void 0:t.cells[m.size],S=(0,t.largest)(s.map(t=>Math.abs($(t)?.value??0))),z=s.flatMap((t,e)=>{const o=t.cells[m.x],n=t.cells[m.y];if(!o||!n||o.missing||n.missing)return[];const r=$(t),a=r&&!r.missing&&S>0?Math.max(.6*w,Math.sqrt(Math.abs(r.value)/S)*y):w,s=x?v.indexOf(t.cells[m.group]?.raw??""):-1;return[{i:e,px:i(o.value),py:l(n.value),r:a,g:s}]}),k=Math.min(z.length-1,6);b.style.setProperty("--count",String(k+1));const q=new Map([...z].sort((t,e)=>t.px-e.px||t.i-e.i).map((e,o)=>[e.i,k?(0,t.short)(o*k/(z.length-1)):0])),A=[...z].sort((t,e)=>e.r-t.r||t.i-e.i);for(const o of A){const n=x?e[o.g%e.length]:"circle";h.appendChild((0,t.markerEl)(n,o.px,o.py,o.r,{class:t.POINT_CLASS,"data-row":o.i+1,"data-marker":n,style:`--i:${q.get(o.i)}; ${x?`--n:${o.g}; --palette:var(--tablechart-color-${o.g+1})`:""}`}))}const T=b.parentElement?.getAttribute("data-chart-names"),V=null==T?M.names:"false"!==T,j=4*f,B=[u[0]+1.5*j,u[1],u[2]-1.5*j,u[3]-1.5*j],[C,D,E,F]=B,G=A.map(({i:e,px:o,py:n,r:r})=>{if(d[e].hasAttribute("data-same"))return[];const{width:a,height:s}=(0,t.sizeOf)(d[e]),c=a*f,i=s*f,l=.1*i,u=.7*r+j/2,h=(t,e)=>[Math.max(C,Math.min(t,C+E-c)),Math.max(D,Math.min(e,D+F-i))+l,c,i-2*l];return[h(o+r+j,n-i/2),h(o-r-j-c,n-i/2),h(o-c/2,n-r-j-i),h(o-c/2,n+r+j),h(o+u,n-u-i),h(o-u-c,n-u-i),h(o+u,n+u),h(o-u-c,n+u)]}),H=V?(0,t.avoidCollisions)(G,z.map(({px:t,py:e,r:o})=>[t-o,e-o,2*o,2*o]),B):A.map(()=>null);for(const t of d)t.hidden=!0,t.dataset.missing="";A.forEach((e,n)=>{const r=d[e.i],a=H[n];if(r.hidden=!1,delete r.dataset.missing,r.style.setProperty("--i",String(q.get(e.i))),r.toggleAttribute("data-left-out",null===a),null===a)return;r.dataset.side=o[a];const[s,c,,i]=G[n][a];(0,t.placeAt)(r,s,c-((0,t.sizeOf)(r).height*f-i)/2,t.VIEWBOX_WIDTH,p)}),a.rowAt=(t,e)=>{let o=null,n=6*f;for(const r of z){const a=Math.max(Math.hypot(r.px-t*f,r.py-e*f)-r.r,0);(a<n||a===n&&o&&r.r<o.r)&&(n=a,o=r)}return o?o.i:null}},tooltip(t,e){const{x:o,y:r}=n(t.series),s=a(t.rows[e],o,r),c=t.rows.flatMap((t,n)=>n===e||null!==s&&a(t,o,r)===s?[n]:[]),i=c.filter(e=>t.categories[e]?.hasAttribute("data-more"));return[...i,...c.filter(t=>!i.includes(t))].map(e=>({name:t.categories[e]?.textContent??"",value:""}))}};window.Tablechart.addType("scatter",s)}(Tablechart.kit);

package/dist/tablechart-additional-types.mjs

@@ -0,0 +1,140 @@
+import { B as e, I as t, M as n, Z as r, a as i, d as a, f as o, i as s, p as c, s as l, t as u } from "./tablechart-shared2.mjs";
+//#region src/js/charts/scatter.ts
+var d = [
+	"circle",
+	"triangle",
+	"square",
+	"diamond"
+], f = [
+	"right",
+	"left",
+	"above",
+	"below",
+	"right",
+	"left",
+	"right",
+	"left"
+], p = (e) => {
+	let t = e.flatMap((e, t) => e.group ? [] : [t]);
+	return {
+		x: t[0],
+		y: t[1],
+		size: t[2],
+		group: e.findIndex((e) => e.group)
+	};
+}, m = (e, t) => t < 0 ? [] : [...new Set(e.map((e) => e.cells[t]?.raw ?? ""))], h = (e, t, n) => e.cells[t]?.missing || e.cells[n]?.missing ? null : `${e.cells[t]?.value} ${e.cells[n]?.value}`, g = {
+	aspect: .62,
+	categories: "beside",
+	columns: !0,
+	axes: !0,
+	text({ figure: e, plot: r, rows: i, series: o, config: s }) {
+		let { x: c, y: l, size: u, group: f } = p(o), g = r.querySelector(":scope > .tablechart-categories")?.children ?? [], _ = /* @__PURE__ */ new Map();
+		i.forEach((e, t) => {
+			let n = h(e, c, l);
+			n && (_.get(n)?.push(t) ?? _.set(n, [t]));
+		});
+		let v = (e) => u === void 0 ? 0 : Math.abs(i[e].cells[u]?.value ?? 0);
+		for (let e of _.values()) {
+			if (e.length < 2) continue;
+			let t = e.reduce((e, t) => v(t) > v(e) ? t : e);
+			for (let n of e) {
+				let r = g[n];
+				n === t ? r?.setAttribute("data-more", String(e.length - 1)) : r?.setAttribute("data-same", "");
+			}
+		}
+		let y = m(i, f);
+		if (y.length < 2 && u === void 0) return;
+		let b = document.createElement("div");
+		b.className = n, b.setAttribute("aria-hidden", "true"), b.inert = !0;
+		let x = Array.from(e.querySelectorAll(`tbody tr > td:nth-of-type(${f + 1})`)), S = (e, n) => {
+			let r = a(t, b);
+			return r.dataset.place = "legend", r.dataset.line = "none", r.textContent = e, n && s.langattribute && r.setAttribute(s.langattribute, n), r;
+		};
+		y.length > 1 && y.forEach((e, t) => {
+			let n = s.langattribute ? x.find((t) => t.textContent?.trim() === e)?.getAttribute(s.langattribute) : null, r = S(e, n);
+			r.dataset.marker = d[t % d.length], r.style.setProperty("--n", String(t)), r.style.setProperty("--palette", `var(--tablechart-color-${t + 1})`);
+		}), u !== void 0 && (S(o[u].name, o[u].key).dataset.marker = "size"), e.appendChild(b);
+	},
+	draw(t) {
+		let { rows: n, series: a, x: h, y: g, frame: _, unit: v, svg: y, categories: b, seriesValues: x, height: S, config: C, plot: w } = t;
+		if (!h || !_) return;
+		let T = p(a), E = m(n, T.group), D = E.length > 1;
+		for (let e of x.flat()) e.dataset.place = "none";
+		let O = (t.length("--tablechart-marker-size", "10px") ?? 10 * v) / 2, k = (t.length("--tablechart-bubble-max", "24px") ?? 24 * v) / 2, A = (e) => T.size === void 0 ? void 0 : e.cells[T.size], j = l(n.map((e) => Math.abs(A(e)?.value ?? 0))), M = n.flatMap((e, t) => {
+			let n = e.cells[T.x], r = e.cells[T.y];
+			if (!n || !r || n.missing || r.missing) return [];
+			let i = A(e), a = i && !i.missing && j > 0 ? Math.max(O * .6, Math.sqrt(Math.abs(i.value) / j) * k) : O, o = D ? E.indexOf(e.cells[T.group]?.raw ?? "") : -1;
+			return [{
+				i: t,
+				px: h(n.value),
+				py: g(r.value),
+				r: a,
+				g: o
+			}];
+		}), N = Math.min(M.length - 1, 6);
+		w.style.setProperty("--count", String(N + 1));
+		let P = new Map([...M].sort((e, t) => e.px - t.px || e.i - t.i).map((e, t) => [e.i, N ? c(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
+		for (let t of F) {
+			let n = D ? d[t.g % d.length] : "circle";
+			y.appendChild(u(n, t.px, t.py, t.r, {
+				class: e,
+				"data-row": t.i + 1,
+				"data-marker": n,
+				style: `--i:${P.get(t.i)}; ${D ? `--n:${t.g}; --palette:var(--tablechart-color-${t.g + 1})` : ""}`
+			}));
+		}
+		let I = w.parentElement?.getAttribute("data-chart-names"), L = I == null ? C.names : I !== "false", R = 4 * v, z = [
+			_[0] + 1.5 * R,
+			_[1],
+			_[2] - 1.5 * R,
+			_[3] - 1.5 * R
+		], [B, V, H, U] = z, W = F.map(({ i: e, px: t, py: n, r }) => {
+			if (b[e].hasAttribute("data-same")) return [];
+			let { width: i, height: a } = s(b[e]), o = i * v, c = a * v, l = c * .1, u = r * .7 + R / 2, d = (e, t) => [
+				Math.max(B, Math.min(e, B + H - o)),
+				Math.max(V, Math.min(t, V + U - c)) + l,
+				o,
+				c - 2 * l
+			];
+			return [
+				d(t + r + R, n - c / 2),
+				d(t - r - R - o, n - c / 2),
+				d(t - o / 2, n - r - R - c),
+				d(t - o / 2, n + r + R),
+				d(t + u, n - u - c),
+				d(t - u - o, n - u - c),
+				d(t + u, n + u),
+				d(t - u - o, n + u)
+			];
+		}), G = L ? i(W, M.map(({ px: e, py: t, r: n }) => [
+			e - n,
+			t - n,
+			2 * n,
+			2 * n
+		]), z) : F.map(() => null);
+		for (let e of b) e.hidden = !0, e.dataset.missing = "";
+		F.forEach((e, t) => {
+			let n = b[e.i], i = G[t];
+			if (n.hidden = !1, delete n.dataset.missing, n.style.setProperty("--i", String(P.get(e.i))), n.toggleAttribute("data-left-out", i === null), i === null) return;
+			n.dataset.side = f[i];
+			let [a, c, , l] = W[t][i];
+			o(n, a, c - (s(n).height * v - l) / 2, r, S);
+		}), t.rowAt = (e, t) => {
+			let n = null, r = 6 * v;
+			for (let i of M) {
+				let a = Math.max(Math.hypot(i.px - e * v, i.py - t * v) - i.r, 0);
+				(a < r || a === r && n && i.r < n.r) && (r = a, n = i);
+			}
+			return n ? n.i : null;
+		};
+	},
+	tooltip(e, t) {
+		let { x: n, y: r } = p(e.series), i = h(e.rows[t], n, r), a = e.rows.flatMap((e, a) => a === t || i !== null && h(e, n, r) === i ? [a] : []), o = a.filter((t) => e.categories[t]?.hasAttribute("data-more"));
+		return [...o, ...a.filter((e) => !o.includes(e))].map((t) => ({
+			name: e.categories[t]?.textContent ?? "",
+			value: ""
+		}));
+	}
+};
+//#endregion
+export { g as scatter };

package/dist/tablechart-core.d.mts

@@ -1,16 +1,5 @@
-import { _ as StepPlan, c as PLACED_CLASS, d as QUEUED_CLASS, f as SHOWN_CLASS, g as Series, h as Row, i as entranceOf, l as PLOT_CLASS, m as ChartState, o as prepare, p as defaultConfig, s as Config, u as PRINTING_CLASS, v as stepTo } from "./tablechart-shared.mjs";
-//#region src/js/core.d.ts
-/** Pass 2: everything a reader will read, before a translation script looks. */
-export declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
-/** Pass 3. Needs layout; makes no text, only places it. */
-export declare const layout: (state: ChartState, config: Config) => boolean;
-/** Numbers are reformatted in place, so a language change costs no redraw. */
-export declare const relabel: (state: ChartState, config: Config) => void;
-/** Removes what `build` added, so the chart can be built again. */
-export declare const unbuild: (state: ChartState) => void;
-/** One class, `is-shown`, starts the whole build. */
-export declare const setShown: (state: ChartState, shown: boolean) => void;
-//#endregion
+import { a as StepPlan, c as PLACED_CLASS, d as QUEUED_CLASS, f as SHOWN_CLASS, i as Series, l as PLOT_CLASS, n as ChartType, o as stepTo, p as defaultConfig, r as Row, s as Config, t as ChartState, u as PRINTING_CLASS } from "./tablechart-shared.mjs";
+import { c as build, d as setShown, f as unbuild, i as entranceOf, l as layout, o as prepare, s as addType, u as relabel } from "./tablechart-shared2.mjs";
 //#region src/js/functions/sources.d.ts
 /** A Markdown table, or a caption with chart attributes, is wrapped in a figure with the caption and annotations beside it. */
 export declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
@@ -23,4 +12,4 @@ export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
 /** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
 export declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
 //#endregion
-export { type ChartState, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, defaultConfig, entranceOf, prepare, stepTo };
+export { type ChartState, type ChartType, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, addType, build, defaultConfig, entranceOf, layout, prepare, relabel, setShown, stepTo, unbuild };

package/dist/tablechart-core.mjs

@@ -1 +1,3 @@
-export { h as PLACED_CLASS, g as PLOT_CLASS, _ as PRINTING_CLASS, v as QUEUED_CLASS, y as SHOWN_CLASS, a as adoptTables, m as assignKeys, c as build, b as defaultConfig, n as entranceOf, l as layout, o as loadSources, i as prepare, s as readMarkdownRows, u as relabel, d as setShown, p as stepTo, f as unbuild } from "./tablechart-shared.mjs";
+import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, s as d, u as f } from "./tablechart-shared.mjs";
+import { H as p, K as m, Q as h, R as g, V as _, z as v } from "./tablechart-shared2.mjs";
+export { g as PLACED_CLASS, v as PLOT_CLASS, _ as PRINTING_CLASS, p as QUEUED_CLASS, m as SHOWN_CLASS, t as addType, e as adoptTables, i as assignKeys, o as build, h as defaultConfig, c as entranceOf, f as layout, l as loadSources, a as prepare, d as readMarkdownRows, n as relabel, r as setShown, s as stepTo, u as unbuild };

package/dist/tablechart-shared.d.mts

@@ -1,3 +1,63 @@
+//#region src/js/config.d.ts
+declare const PLOT_CLASS = "tablechart-plot";
+declare const PLACED_CLASS = "is-placed";
+declare const SHOWN_CLASS = "is-shown";
+declare const PRINTING_CLASS = "is-printing";
+declare const QUEUED_CLASS = "tablechart-queued";
+interface Config {
+  /** Which elements Tablechart turns into charts. */
+  selector: string;
+  /** Height of the plot as a share of its width. */
+  aspect: number;
+  /** Share of a band that a bar fills. */
+  barfill: number;
+  /** Share of a donut's radius that the ring itself takes. */
+  ringfill: number;
+  /** Locale for numbers. Unset, the document's language is used and followed when it changes. */
+  locale?: string;
+  /** Animate a chart when it builds. `"grow"` grows each element from zero, `"sweep"` reveals the chart in one movement; a figure overrides it with `data-chart-animate`, also with `"false"`. */
+  animate: boolean | Motion;
+  /** How far an animated parent is in before its chart builds: 0 when it starts moving, 1 when it is in. A figure overrides it with `data-chart-entrance`. */
+  entrance: number;
+  /** Where a column's number goes: on the bar, or inside it. A figure overrides it with `data-chart-labels`. */
+  labels: "outside" | "inside";
+  /** How a line or area runs between points: `straight`, `step` or `smooth`. A figure overrides it with `data-chart-shape`. */
+  shape: "straight" | "step" | "smooth";
+  /** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
+  legend: boolean;
+  /** Numbers along the value axis of a column, bar, line, area or waterfall chart. A figure overrides it with `data-chart-axis`. */
+  axis: boolean;
+  /** Gridlines across the plot at each number of the axis. A figure overrides it with `data-chart-grid`. */
+  grid: boolean;
+  /** The name of each marker beside it, on a scatter chart. A figure overrides it with `data-chart-names`. */
+  names: boolean;
+  /** A tooltip with the values of a row that is pointed at or tapped: `"auto"`, the default, only on a chart that does not show all its numbers; `true` always; `false` never. A figure overrides it with `data-chart-tooltip`. */
+  tooltip: boolean | "auto";
+  /** Where the tooltip goes in the page: an element or a selector, `body` by default. In a scaled element, such as the slides of a presentation, the tooltip has their scale. */
+  tooltipparent: HTMLElement | string | null;
+  /** The table under the chart: `"always"`, only in `"print"`, in print when numbers are left out (`"auto"`), or `"never"`. A figure overrides it with `data-chart-table`. */
+  table: "never" | "auto" | "print" | "always";
+  /** The name of the total that a donut without a total row works out, for screen readers. */
+  totallabel: string;
+  /** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
+  controls: boolean;
+  /** The text of the Previous button. */
+  previouslabel: string;
+  /** The text of the Next button. */
+  nextlabel: string;
+  /** Read by screen readers after the text of each button, so they know it only changes the chart. */
+  stephint: string;
+  /** How much of a chart must be in view before it builds, from 0 to 1. */
+  threshold: number;
+  /** Build again each time a chart scrolls back into view, not only the first time. */
+  replay: boolean;
+  /** The attribute for translation keys, for a translation script. `false` turns keys off. */
+  langattribute: string | false;
+  /** Show messages in the console for whoever is working on the page. */
+  debug?: boolean;
+}
+declare const defaultConfig: Config;
+//#endregion
 //#region src/js/functions/scale.d.ts
 /** A break in the scale: values from `lo` to `hi` get `share` of the length, and the cut is at `gap`. */
 interface Squeeze {
@@ -70,6 +130,8 @@ interface Series {
   /** `data-marker` on the header, such as `square` or `diamond open`. */
   marker: string | null;
   line: "dashed" | "dotted" | null;
+  /** `data-group` on the header: the cells name a group, such as "Predefined". */
+  group: boolean;
 }
 interface Segment extends Row {
   from: number;
@@ -82,6 +144,14 @@ interface Geometry {
   segments: Segment[];
   cx: (index: number) => number;
   y: (value: number) => number;
+  /** Across: on a chart with two axes, and the value scale of a bar chart, set by its drawing. */
+  x?: (value: number) => number;
+  /** The plot inside the axes, on a chart with axes. */
+  frame?: [number, number, number, number];
+  /** A chart that knows better which row is pointed at sets this, in screen pixels from the plot's corner. */
+  rowAt?: (x: number, y: number) => number | null;
+  /** A CSS length set on the figure, such as `--tablechart-marker-size`, in viewBox units. */
+  length: (name: string, fallback: string) => number | null;
   barWidth: number;
   barMax: number;
   height: number;
@@ -99,6 +169,8 @@ interface Geometry {
   squeeze: Squeeze | null;
   /** The empty space where the scale jumps, in viewBox units. */
   breakGap: number;
+  /** The range of the value axis, on a chart with an axis or gridlines; a chart that makes its own scale reaches it. */
+  domain: [number, number] | null;
   /** Where a bar chart is cut across, in viewBox units; set by its drawing. */
   breakX?: number;
   labels: "outside" | "inside";
@@ -122,6 +194,8 @@ interface Geometry {
   config: Config;
   /** Numbers an annotation worked out, against the ones the author wrote. */
   checks: Check[];
+  /** The labels of annotations placed so far, as left, top, width and height, so the next one finds room. */
+  taken: [number, number, number, number][];
 }
 interface Check {
   label: string;
@@ -143,6 +217,18 @@ interface ChartType {
   swatch?: "box";
   categories?: "under" | "beside";
   series?: boolean;
+  /** The value columns are the fields of one mark, such as x and y, rather than series: no names for them. */
+  columns?: boolean;
+  /** An axis across and an axis up, from the first two value columns, with their headers as titles. */
+  axes?: boolean;
+  /** Text of its own, made with the rest of the text so a translation script finds it, such as a legend. */
+  text?: (input: {
+    figure: HTMLElement;
+    plot: HTMLElement;
+    rows: Row[];
+    series: Series[];
+    config: Config;
+  }) => void;
   /** With several series, always a legend, with a sample of this shape. */
   legend?: "box";
   headroom?: (geo: HeadroomInput) => number;
@@ -204,6 +290,12 @@ interface ChartState {
   names: HTMLElement[];
   categories: HTMLElement[];
   centre: HTMLElement | null;
+  /** The axis titles and the place for the numbers along the axes. Without `numbers`, only for gridlines. */
+  axes: {
+    titles: HTMLElement[];
+    ticks: HTMLElement;
+    numbers: boolean;
+  } | null;
   stacked: boolean;
   totals: HTMLElement[];
   totalCell: HTMLElement | null;
@@ -228,97 +320,4 @@ interface ChartState {
   checks: Check[];
 }
 //#endregion
-//#region src/js/config.d.ts
-declare const PLOT_CLASS = "tablechart-plot";
-declare const PLACED_CLASS = "is-placed";
-declare const SHOWN_CLASS = "is-shown";
-declare const PRINTING_CLASS = "is-printing";
-declare const QUEUED_CLASS = "tablechart-queued";
-interface Config {
-  /** Which elements Tablechart turns into charts. */
-  selector: string;
-  /** Height of the plot as a share of its width. */
-  aspect: number;
-  /** Share of a band that a bar fills. */
-  barfill: number;
-  /** Share of a donut's radius that the ring itself takes. */
-  ringfill: number;
-  /** Locale for numbers. Unset, the document's language is used and followed when it changes. */
-  locale?: string;
-  /** Animate a chart when it builds. `"grow"` grows each element from zero, `"sweep"` reveals the chart in one movement; a figure overrides it with `data-chart-animate`. `"up"` and `"across"` are their old names. */
-  animate: boolean | Motion | "across" | "up";
-  /** How far an animated parent is in before its chart builds: 0 when it starts moving, 1 when it is in. A figure overrides it with `data-chart-entrance`. */
-  entrance: number;
-  /** Where a column's number goes: on the bar, or inside it. A figure overrides it with `data-chart-labels`. */
-  labels: "outside" | "inside";
-  /** How a line or area runs between points: `straight`, `step` or `smooth`. A figure overrides it with `data-chart-shape`. */
-  shape: "straight" | "step" | "smooth";
-  /** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
-  legend: boolean;
-  /** A tooltip with the values of a row that is pointed at or tapped: `"auto"`, the default, only on a chart that does not show all its numbers; `true` always; `false` never. A figure overrides it with `data-chart-tooltip`. */
-  tooltip: boolean | "auto";
-  /** The old name of `tooltip`, until the next minor version. */
-  hover?: boolean;
-  /** The table under the chart: `"always"`, only in `"print"`, in print when numbers are left out (`"auto"`), or `"never"`. A figure overrides it with `data-chart-table`. */
-  table: "never" | "auto" | "print" | "always";
-  /** The name of the total that a donut without a total row works out, for screen readers. */
-  totallabel: string;
-  /** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
-  controls: boolean;
-  /** The text of the Previous button. */
-  previouslabel: string;
-  /** The text of the Next button. */
-  nextlabel: string;
-  /** Read by screen readers after the text of each button, so they know it only changes the chart. */
-  stephint: string;
-  /** How much of a chart must be in view before it builds, from 0 to 1. */
-  threshold: number;
-  /** Build again each time a chart scrolls back into view, not only the first time. */
-  replay: boolean;
-  /** The attribute for translation keys, for a translation script. `false` turns keys off. */
-  langattribute: string | false;
-  /** Show messages in the console for whoever is working on the page. */
-  debug?: boolean;
-}
-declare const defaultConfig: Config;
-//#endregion
-//#region src/js/init.d.ts
-interface TablechartChart {
-  figure: HTMLElement;
-  /** Lays the chart out again, for example after a script has changed its text. */
-  refresh(): void;
-  /** Stops watching scroll, size and language. The chart stays as it is. */
-  destroy(): void;
-  /** On a chart that steps (`data-fragment`): shows one step more. */
-  next(): void;
-  /** On a chart that steps: shows one step less. */
-  previous(): void;
-  /** On a chart that steps: shows the chart up to `step`, from 0 to `steps`. */
-  stepTo(step: number): void;
-  /** How many steps are shown. */
-  readonly step: number;
-  /** How many steps the chart has; 0 for a chart that does not step. */
-  readonly steps: number;
-}
-interface TablechartInstance {
-  charts: TablechartChart[];
-  /** Lays out every chart again, for example after a script has changed its text. */
-  refresh(): void;
-  /** Stops watching scroll, size and language. The charts stay as they are. */
-  destroy(): void;
-}
-declare global {
-  interface HTMLElement {
-    tablechart?: TablechartChart;
-  }
-}
-/** How far an animated parent is in before the chart builds: the figure's `data-chart-entrance`, or else the option. */
-declare const entranceOf: (figure: HTMLElement, config: Config) => number;
-/** Turns elements into figures with a table and translation keys, all at once, so duplicate keys are found. */
-declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLElement[]>;
-/** Makes a chart of one figure; returns the existing chart if there is one, or null without data. */
-declare const create: (element: HTMLElement, options?: Partial<Config>) => Promise<TablechartChart | null>;
-/** Makes a chart of every figure in `root` that matches the selector, skipping existing charts. */
-declare const init: (options?: Partial<Config>, root?: ParentNode) => Promise<TablechartInstance>;
-//#endregion
-export { StepPlan as _, init as a, PLACED_CLASS as c, QUEUED_CLASS as d, SHOWN_CLASS as f, Series as g, Row as h, entranceOf as i, PLOT_CLASS as l, ChartState as m, TablechartInstance as n, prepare as o, defaultConfig as p, create as r, Config as s, TablechartChart as t, PRINTING_CLASS as u, stepTo as v };
+export { StepPlan as a, PLACED_CLASS as c, QUEUED_CLASS as d, SHOWN_CLASS as f, Series as i, PLOT_CLASS as l, ChartType as n, stepTo as o, defaultConfig as p, Row as r, Config as s, ChartState as t, PRINTING_CLASS as u };