@martinomagnifico/tablechart 1.0.7 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [1.1.1] - 2026-10-23
+
+### Changed
+
+- Columns and bars now grow in 0.8s with an ease-in-out, and overlap more to avoid stutter.
+- Numbers now fade in as one group to avoid Safari issues.
+- Gaps in lines and gridlines now switch on instead of fading.
+- The mask under an annotation label is now set when the chart has built, not during the build.
+
+### Fixed
+
+- A value of zero no longer shows a sliver of a column or bar under the axis.
+
+
+
+## [1.1.0] - 2026-10-23
+
+### Added
+
+- Scatter and bubble charts: `data-chart="scatter"`. The first additional type, in `@martinomagnifico/tablechart/additional-types` or `tablechart-additional-types.js`. It is in a script of its own, so a page without a scatter chart does not load it.
+- `addType()`, to add an additional type.
+- A value axis with `data-chart-axis`, and gridlines with `data-chart-grid`. Off by default, because the numbers on the bars already show the values. A scatter chart always has its axes.
+- `data-chart-scale` for a scale of your own, such as 0 to 100%. On a scatter chart also `-x` and `-y`.
+- Reference lines: `data-annotation="reference"`, at a value, the mean or the median. For a target, or the mean and median of a histogram.
+- `data-chart-animate="false"`, for a chart that should just be there, without waiting to scroll into view.
+- `--tablechart-axis-text-color` and `--tablechart-name-color`, so the numbers on an axis can be lighter or darker than the names.
+
+### Changed
+
+- A line chart with three lines or more now shows its numbers where there is room, above or below the point. Before, they were all left out, so you only saw them in the tooltip.
+
+### Removed
+
+- The old CSS variable names from 1.0.4, and `up` and `across` for `animate`. Deprecated since 1.0.4.
+- `hover` and `data-chart-hover`. Use `tooltip` and `data-chart-tooltip`. Deprecated since 1.0.5, when tooltips replaced the numbers that appeared on hover.
+
+
+
 ## [1.0.7] - 2026-10-16
 
 ### Added

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,2 @@
+import { _ as scatter } from "./tablechart-shared.mjs";
+export { scatter };

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 { C as e, D as t, S as n, _ as r, b as i, g as a, j as o, v as s, w as c, x as l, y as u } from "./tablechart-shared.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: t, plot: n, rows: r, series: a, config: o }) {
+		let { x: s, y: l, size: u, group: f } = p(a), g = n.querySelector(":scope > .tablechart-categories")?.children ?? [], _ = /* @__PURE__ */ new Map();
+		r.forEach((e, t) => {
+			let n = h(e, s, l);
+			n && (_.get(n)?.push(t) ?? _.set(n, [t]));
+		});
+		let v = (e) => u === void 0 ? 0 : Math.abs(r[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(r, f);
+		if (y.length < 2 && u === void 0) return;
+		let b = document.createElement("div");
+		b.className = e, b.setAttribute("aria-hidden", "true"), b.inert = !0;
+		let x = Array.from(t.querySelectorAll(`tbody tr > td:nth-of-type(${f + 1})`)), S = (e, t) => {
+			let n = i(c, b);
+			return n.dataset.place = "legend", n.dataset.line = "none", n.textContent = e, t && o.langattribute && n.setAttribute(o.langattribute, t), n;
+		};
+		y.length > 1 && y.forEach((e, t) => {
+			let n = o.langattribute ? x.find((t) => t.textContent?.trim() === e)?.getAttribute(o.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(a[u].name, a[u].key).dataset.marker = "size"), t.appendChild(b);
+	},
+	draw(e) {
+		let { rows: i, series: c, x: h, y: g, frame: _, unit: v, svg: y, categories: b, seriesValues: x, height: S, config: C, plot: w } = e;
+		if (!h || !_) return;
+		let T = p(c), E = m(i, T.group), D = E.length > 1;
+		for (let e of x.flat()) e.dataset.place = "none";
+		let O = (e.length("--tablechart-marker-size", "10px") ?? 10 * v) / 2, k = (e.length("--tablechart-bubble-max", "24px") ?? 24 * v) / 2, A = (e) => T.size === void 0 ? void 0 : e.cells[T.size], j = u(i.map((e) => Math.abs(A(e)?.value ?? 0))), M = i.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 ? n(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
+		for (let e of F) {
+			let n = D ? d[e.g % d.length] : "circle";
+			y.appendChild(a(n, e.px, e.py, e.r, {
+				class: t,
+				"data-row": e.i + 1,
+				"data-marker": n,
+				style: `--i:${P.get(e.i)}; ${D ? `--n:${e.g}; --palette:var(--tablechart-color-${e.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: i }) => {
+			if (b[e].hasAttribute("data-same")) return [];
+			let { width: a, height: o } = r(b[e]), s = a * v, c = o * v, l = c * .1, u = i * .7 + R / 2, d = (e, t) => [
+				Math.max(B, Math.min(e, B + H - s)),
+				Math.max(V, Math.min(t, V + U - c)) + l,
+				s,
+				c - 2 * l
+			];
+			return [
+				d(t + i + R, n - c / 2),
+				d(t - i - R - s, n - c / 2),
+				d(t - s / 2, n - i - R - c),
+				d(t - s / 2, n + i + R),
+				d(t + u, n - u - c),
+				d(t - u - s, n - u - c),
+				d(t + u, n + u),
+				d(t - u - s, n + u)
+			];
+		}), G = L ? s(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, s, , c] = W[t][i];
+			l(n, a, s - (r(n).height * v - c) / 2, o, S);
+		}), e.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,26 +1,2 @@
-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
-//#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[];
-/** `data-chart-src` fills the figure's table with the rows of a JSON file, keeping a header row the author wrote; a file that fails is reported. */
-export declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
-/** In a Markdown table, a bold label makes the row a total, and a bold header puts that series in focus. */
-export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
-//#endregion
-//#region src/js/functions/read-table.d.ts
-/** 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 };
+import { A as defaultConfig, C as stepTo, D as PRINTING_CLASS, E as PLOT_CLASS, O as QUEUED_CLASS, S as StepPlan, T as PLACED_CLASS, b as Row, c as entranceOf, d as addType, f as build, g as unbuild, h as setShown, i as readMarkdownRows, k as SHOWN_CLASS, m as relabel, n as adoptTables, p as layout, r as loadSources, t as assignKeys, u as prepare, v as ChartState, w as Config, x as Series, y as ChartType } from "./tablechart-shared.mjs";
+export { type ChartState, type ChartType, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, addType, adoptTables, assignKeys, build, defaultConfig, entranceOf, layout, loadSources, prepare, readMarkdownRows, relabel, setShown, stepTo, unbuild };

package/dist/tablechart-core.mjs

@@ -1 +1 @@
-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";
+export { T as PLACED_CLASS, E as PLOT_CLASS, O as PRINTING_CLASS, k as QUEUED_CLASS, A as SHOWN_CLASS, c as addType, a as adoptTables, h as assignKeys, l as build, M as defaultConfig, n as entranceOf, u as layout, o as loadSources, i as prepare, s as readMarkdownRows, d as relabel, f as setShown, m as stepTo, p as unbuild } from "./tablechart-shared.mjs";

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,61 +320,23 @@ 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;
-  /** 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;
+//#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. */
+declare const scatter: ChartType;
+//#endregion
+//#region src/js/core.d.ts
+/** Adds a chart type for `data-chart="name"`, such as one from `@martinomagnifico/tablechart/additional-types`, before `init()`. */
+declare const addType: (name: string, type: ChartType) => void;
+/** Pass 2: everything a reader will read, before a translation script looks. */
+declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
+/** Pass 3. Needs layout; makes no text, only places it. */
+declare const layout: (state: ChartState, config: Config) => boolean;
+/** Numbers are reformatted in place, so a language change costs no redraw. */
+declare const relabel: (state: ChartState, config: Config) => void;
+/** Removes what `build` added, so the chart can be built again. */
+declare const unbuild: (state: ChartState) => void;
+/** One class, `is-shown`, starts the whole build. */
+declare const setShown: (state: ChartState, shown: boolean) => void;
 //#endregion
 //#region src/js/init.d.ts
 interface TablechartChart {
@@ -323,4 +377,16 @@ declare const create: (element: HTMLElement, options?: Partial<Config>) => Promi
 /** 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 };
+//#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. */
+declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
+/** `data-chart-src` fills the figure's table with the rows of a JSON file, keeping a header row the author wrote; a file that fails is reported. */
+declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
+/** In a Markdown table, a bold label makes the row a total, and a bold header puts that series in focus. */
+declare const readMarkdownRows: (figures: HTMLElement[]) => void;
+//#endregion
+//#region src/js/functions/read-table.d.ts
+/** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
+declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
+//#endregion
+export { defaultConfig as A, stepTo as C, PRINTING_CLASS as D, PLOT_CLASS as E, QUEUED_CLASS as O, StepPlan as S, PLACED_CLASS as T, scatter as _, TablechartChart as a, Row as b, entranceOf as c, addType as d, build as f, unbuild as g, setShown as h, readMarkdownRows as i, SHOWN_CLASS as k, init as l, relabel as m, adoptTables as n, TablechartInstance as o, layout as p, loadSources as r, create as s, assignKeys as t, prepare as u, ChartState as v, Config as w, Series as x, ChartType as y };