reamkit 1.15.3 → 1.16.0

package/dist/esm/core/drawingml/chart-geometry.js

@@ -1,3 +1,4 @@
+import { applyNumberFormat } from "../number-format.js";
 var AXIS_COLOR = "595959";
 var GRID_COLOR = "D9D9D9";
 var LABEL_COLOR = "595959";
@@ -46,9 +47,10 @@ function niceScale(dataMin, dataMax, maxTicks = 6) {
 	let hi = Math.max(dataMin, dataMax);
 	if (lo === hi) hi = lo + 1;
 	const step = niceNum(niceNum(hi - lo, false) / Math.max(1, maxTicks - 1), true);
+	const headroom = hi > 0 ? hi * 1.05 : hi;
 	return {
 		min: Math.floor(lo / step) * step,
-		max: Math.ceil(hi / step) * step,
+		max: Math.ceil(headroom / step) * step,
 		step
 	};
 }
@@ -70,6 +72,27 @@ var ticks = (s) => {
 	for (let v = s.min; v <= s.max + 1e-9; v += s.step) out.push(Math.abs(v) < 1e-9 ? 0 : v);
 	return out;
 };
+/**
+* The value axis's {@link Scale}: the ends the author fixed where they fixed
+* them (§21.2.2.157 `c:scaling/c:min|c:max`), the data's own range where they
+* did not. A fixed end is exact — nice-rounding it would move a number the
+* author chose — so only the tick step comes from the rounding pass.
+*
+* @param chart   The chart (for its fixed ends).
+* @param dataMin The smallest value to cover.
+* @param dataMax The largest value to cover.
+* @param hPt     The chart's height — how many ticks fit is a question about
+*                the plot, not about the numbers.
+* @returns The axis min/max and tick step.
+*/
+function axisScale(chart, dataMin, dataMax, hPt) {
+	const rounded = niceScale(chart.valAxisMin ?? dataMin, chart.valAxisMax ?? dataMax, tickBudget(hPt));
+	return {
+		min: chart.valAxisMin ?? rounded.min,
+		max: chart.valAxisMax ?? rounded.max,
+		step: rounded.step
+	};
+}
 function pushChartTitle(labels, chart, wPt, hPt) {
 	if (!chart.title) return;
 	labels.push({
@@ -82,17 +105,20 @@ function pushChartTitle(labels, chart, wPt, hPt) {
 	});
 }
 function buildLegendBlock(chart, wPt, hPt, measure) {
-	return layoutLegend(chart.series.map((s, i) => ({
-		name: s.name ?? "",
-		colorHex: seriesColor(s, i, chart.seriesColorCycle)
-	})).filter((e) => e.name !== ""), chart.hasLegend, chart.legendPos ?? "b", wPt, hPt, measure);
+	const legendEntries = chart.series.map((s, i) => ({
+		name: legendSeriesName(s, i),
+		colorHex: seriesColor(s, i, chart.seriesColorCycle),
+		...s.line?.none ? { marker: "box" } : isLineLike(s) ? { marker: "line" } : {}
+	}));
+	const marker = chart.type === "line" || chart.type === "scatter" ? "line" : "box";
+	return layoutLegend(legendEntries, chart.hasLegend, chart.legendPos ?? "b", wPt, hPt, measure, marker);
 }
-function pushGridTicks(polylines, labels, tickVals, fmt, axis, at, x0, y0, plotW, plotH) {
+function pushGridTicks(gridlines, labels, tickVals, fmt, axis, at, x0, y0, plotW, plotH, grid) {
 	for (const v of tickVals) if (axis === "x") {
 		const gx = at(v);
-		polylines.push({
+		gridlines.push({
 			points: [[gx, y0], [gx, y0 + plotH]],
-			strokeHex: GRID_COLOR,
+			strokeHex: grid?.colorHex ?? GRID_COLOR,
 			widthPt: .75
 		});
 		labels.push({
@@ -105,9 +131,9 @@ function pushGridTicks(polylines, labels, tickVals, fmt, axis, at, x0, y0, plotW
 		});
 	} else {
 		const gy = at(v);
-		polylines.push({
+		gridlines.push({
 			points: [[x0, gy], [x0 + plotW, gy]],
-			strokeHex: GRID_COLOR,
+			strokeHex: grid?.colorHex ?? GRID_COLOR,
 			widthPt: .75
 		});
 		labels.push({
@@ -120,37 +146,57 @@ function pushGridTicks(polylines, labels, tickVals, fmt, axis, at, x0, y0, plotW
 		});
 	}
 }
-function pushAxisLines(polylines, x0, y0, plotW, plotH) {
-	polylines.push({
+/**
+* §21.2.2.196 — an axis draws the rule its `c:spPr/a:ln` asks for. `<a:noFill/>`
+* draws none at all, and both references honour it: 57362.xlsx gives its value
+* axis a 0.75pt #D9D9D9 hairline where we drew a 1pt #595959 one, and hides its
+* secondary axis's line entirely while keeping its labels.
+*/
+function axisStroke(style) {
+	if (style?.none) return null;
+	return {
+		hex: style?.colorHex ?? AXIS_COLOR,
+		widthPt: style?.widthPt ?? 1
+	};
+}
+function pushAxisLines(polylines, x0, y0, plotW, plotH, chart) {
+	const val = axisStroke(chart.valAxisLine);
+	if (val) polylines.push({
 		points: [[x0, y0], [x0, y0 + plotH]],
-		strokeHex: AXIS_COLOR,
-		widthPt: 1
+		strokeHex: val.hex,
+		widthPt: val.widthPt
 	});
-	polylines.push({
+	const cat = axisStroke(chart.catAxisLine);
+	if (cat) polylines.push({
 		points: [[x0, y0], [x0 + plotW, y0]],
-		strokeHex: AXIS_COLOR,
-		widthPt: 1
+		strokeHex: cat.hex,
+		widthPt: cat.widthPt
 	});
 }
 function buildFrame(chart, wPt, hPt, measure, horizontal, opts = {}) {
 	const rects = [];
 	const polylines = [];
+	const gridlines = [];
 	const labels = [];
 	const nCats = Math.max(chart.categories.length, ...chart.series.map((s) => s.values.length), 1);
-	const allVals = chart.series.flatMap((s) => s.values.slice(0, nCats));
+	const onSecondary = chart.series.filter((s) => s.secondaryAxis);
+	const allVals = (onSecondary.length > 0 ? chart.series.filter((s) => !s.secondaryAxis) : chart.series).flatMap((s) => s.values.slice(0, nCats));
 	const [dataMin, dataMax] = opts.dataRange ?? [Math.min(0, ...allVals), Math.max(0, ...allVals)];
-	const scale = niceScale(dataMin, dataMax);
+	const scale = axisScale(chart, dataMin, dataMax, hPt);
 	const fmtVal = opts.formatValue ?? ((v) => formatTick(v, scale.step));
 	const tickVals = ticks(scale);
+	const vals2 = onSecondary.flatMap((s) => s.values.slice(0, nCats));
+	const scale2 = vals2.length > 0 ? niceScale(Math.min(0, ...vals2), Math.max(0, ...vals2), Math.min(10, Math.max(4, Math.round(hPt / 24)))) : void 0;
+	const tickVals2 = scale2 ? ticks(scale2) : [];
 	let top = 4;
 	if (chart.title) top += 13 * 1.6;
-	if (chart.valAxisTitle) top += 9 * 1.4;
 	const legend = buildLegendBlock(chart, wPt, hPt, measure);
-	const plotRight = wPt - 4 - legend.rightWidth;
+	const tick2W = scale2 && !horizontal ? Math.max(0, ...tickVals2.map((v) => measure(formatTick(v, scale2.step), 9))) + 4 + (chart.secondaryValAxisTitle ? 9 * 1.5 : 0) : 0;
+	const plotRight = wPt - 4 - legend.rightWidth - tick2W;
 	const tickLabelW = Math.max(0, ...tickVals.map((v) => measure(fmtVal(v), 9))) + 4;
 	const catLabelH = 9 * 1.6;
 	const catTitleH = chart.catAxisTitle ? 9 * 1.5 : 0;
-	const x0 = 4 + tickLabelW;
+	const x0 = 4 + (chart.valAxisTitle ? 9 * 1.5 : 0) + tickLabelW;
 	const y0 = 4 + legend.bottomHeight + catTitleH + catLabelH;
 	const plotW = Math.max(1, plotRight - x0);
 	const plotH = Math.max(1, hPt - top - y0);
@@ -159,11 +205,12 @@ function buildFrame(chart, wPt, hPt, measure, horizontal, opts = {}) {
 	pushChartTitle(labels, chart, wPt, hPt);
 	if (chart.valAxisTitle) labels.push({
 		text: chart.valAxisTitle,
-		x: x0,
-		y: hPt - top + 3,
+		x: 12.1,
+		y: y0 + plotH / 2,
 		sizePt: 9,
 		colorHex: LABEL_COLOR,
-		align: "left"
+		align: "center",
+		rotationDeg: 90
 	});
 	if (chart.catAxisTitle) labels.push({
 		text: chart.catAxisTitle,
@@ -173,11 +220,39 @@ function buildFrame(chart, wPt, hPt, measure, horizontal, opts = {}) {
 		colorHex: LABEL_COLOR,
 		align: "center"
 	});
-	if (horizontal) pushGridTicks(polylines, labels, tickVals, fmtVal, "x", (v) => x0 + valueOffset(v), x0, y0, plotW, plotH);
-	else pushGridTicks(polylines, labels, tickVals, fmtVal, "y", (v) => y0 + valueOffset(v), x0, y0, plotW, plotH);
+	if (horizontal) pushGridTicks(gridlines, labels, tickVals, fmtVal, "x", (v) => x0 + valueOffset(v), x0, y0, plotW, plotH, chart.gridLine);
+	else pushGridTicks(gridlines, labels, tickVals, fmtVal, "y", (v) => y0 + valueOffset(v), x0, y0, plotW, plotH, chart.gridLine);
+	const valueOffset2 = scale2 && !horizontal ? (v) => (v - scale2.min) / (scale2.max - scale2.min) * plotH : void 0;
+	if (scale2 && valueOffset2) {
+		for (const v of tickVals2) labels.push({
+			text: formatTick(v, scale2.step),
+			x: x0 + plotW + 3,
+			y: y0 + valueOffset2(v) - 9 / 3,
+			sizePt: 9,
+			colorHex: LABEL_COLOR,
+			align: "left"
+		});
+		const sec = axisStroke(chart.secondaryValAxisLine);
+		if (sec) polylines.push({
+			points: [[x0 + plotW, y0], [x0 + plotW, y0 + plotH]],
+			strokeHex: sec.hex,
+			widthPt: sec.widthPt
+		});
+		if (chart.secondaryValAxisTitle) labels.push({
+			text: chart.secondaryValAxisTitle,
+			x: wPt - 4,
+			y: y0 + plotH / 2,
+			sizePt: 9,
+			colorHex: LABEL_COLOR,
+			align: "center",
+			rotationDeg: 90
+		});
+	}
 	const slot = (horizontal ? plotH : plotW) / nCats;
-	for (let c = 0; c < nCats; c++) {
-		const cat = chart.categories[c] ?? "";
+	const need = horizontal ? 9 * 1.4 : Math.max(0, ...chart.categories.map((t) => measure(t, 9))) + 4;
+	const step = Math.max(1, Math.ceil(need / Math.max(slot, .01)));
+	for (let c = 0; c < nCats; c += step) {
+		const cat = chart.categories[c] ?? String(c + 1);
 		if (!cat) continue;
 		const center = (horizontal ? y0 : x0) + c * slot + slot / 2;
 		if (horizontal) labels.push({
@@ -197,7 +272,7 @@ function buildFrame(chart, wPt, hPt, measure, horizontal, opts = {}) {
 			align: "center"
 		});
 	}
-	pushAxisLines(polylines, x0, y0, plotW, plotH);
+	pushAxisLines(polylines, x0, y0, plotW, plotH, chart);
 	legend.emit(rects, labels);
 	return {
 		x0,
@@ -209,13 +284,15 @@ function buildFrame(chart, wPt, hPt, measure, horizontal, opts = {}) {
 		horizontal,
 		zeroOffset,
 		valueOffset,
+		...valueOffset2 ? { valueOffset2 } : {},
 		rects,
 		polylines,
+		gridlines,
 		labels
 	};
 }
 var pctLabel = (v) => `${Math.round(v * 100)}%`;
-var fmtDataLabel = (v) => Number.isInteger(v) ? String(v) : String(Math.round(v * 100) / 100);
+var fmtDataLabel = (chart, v) => chartValueFormatter(chart)?.(v) ?? (Number.isInteger(v) ? String(v) : String(Math.round(v * 100) / 100));
 function catCount(chart) {
 	return Math.max(chart.categories.length, ...chart.series.map((s) => s.values.length), 1);
 }
@@ -244,11 +321,25 @@ function groupingFrameOpts(chart, nCats) {
 		dataRange: [0, 1],
 		formatValue: pctLabel
 	};
+	const format = chartValueFormatter(chart);
 	if (g === "stacked") {
 		const t = stackedTotals(chart, nCats);
-		return { dataRange: [Math.min(0, t.min), Math.max(0, t.max)] };
+		return {
+			dataRange: [Math.min(0, t.min), Math.max(0, t.max)],
+			...format ? { formatValue: format } : {}
+		};
 	}
-	return {};
+	return format ? { formatValue: format } : {};
+}
+var CHART_FORMAT_ID = 1e6;
+var formatterCache = /* @__PURE__ */ new WeakMap();
+function chartValueFormatter(chart) {
+	const hit = formatterCache.get(chart);
+	if (hit !== void 0) return hit ?? void 0;
+	const code = chart.numberFormat;
+	const made = code === void 0 ? null : ((formats) => (v) => applyNumberFormat(String(v), CHART_FORMAT_ID, formats))(new Map([[CHART_FORMAT_ID, code]]));
+	formatterCache.set(chart, made);
+	return made ?? void 0;
 }
 /**
 * Lay out a bar/column {@link Chart} into a {@link ChartScene}. Honours
@@ -267,15 +358,18 @@ function buildBarScene(chart, wPt, hPt, measure) {
 	const percent = g === "percentStacked";
 	const horizontal = chart.barDir === "bar";
 	const f = buildFrame(chart, wPt, hPt, measure, horizontal, groupingFrameOpts(chart, catCount(chart)));
+	const barIdx = [];
+	const lineIdx = [];
+	chart.series.forEach((s, i) => (isLineLike(s) ? lineIdx : barIdx).push(i));
 	if (stacked) {
 		const groupPad = f.slot * .15;
 		const barW = f.slot - 2 * groupPad;
 		for (let c = 0; c < f.nCats; c++) {
 			const along = (horizontal ? f.y0 : f.x0) + c * f.slot + groupPad;
-			const denom = percent ? chart.series.reduce((a, s) => a + Math.abs(s.values[c] ?? 0), 0) || 1 : 1;
+			const denom = percent ? barIdx.reduce((a, i) => a + Math.abs(chart.series[i].values[c] ?? 0), 0) || 1 : 1;
 			let cumPos = 0;
 			let cumNeg = 0;
-			for (let s = 0; s < chart.series.length; s++) {
+			for (const s of barIdx) {
 				const series = chart.series[s];
 				const v = (series.values[c] ?? 0) / denom;
 				const base = v >= 0 ? cumPos : cumNeg;
@@ -301,37 +395,41 @@ function buildBarScene(chart, wPt, hPt, measure) {
 				});
 				if (chart.showValues && span > 9) {
 					const raw = series.values[c] ?? 0;
-					if (horizontal) f.labels.push(centeredLabel(fmtDataLabel(raw), f.x0 + lo + span / 2, along + barW * .3));
-					else f.labels.push(centeredLabel(fmtDataLabel(raw), along + barW / 2, f.y0 + lo + span / 2 - 3));
+					if (horizontal) f.labels.push(centeredLabel(fmtDataLabel(chart, raw), f.x0 + lo + span / 2, along + barW * .3));
+					else f.labels.push(centeredLabel(fmtDataLabel(chart, raw), along + barW / 2, f.y0 + lo + span / 2 - 3));
 				}
 				if (v >= 0) cumPos = top;
 				else cumNeg = top;
 			}
 		}
+		pushComboLines(chart, f, lineIdx);
 		return {
 			rects: f.rects,
 			polylines: f.polylines,
+			gridlines: f.gridlines,
 			wedges: [],
 			labels: f.labels
 		};
 	}
-	const nSer = Math.max(1, chart.series.length);
-	const groupPad = f.slot * .15;
-	const barW = (f.slot - 2 * groupPad) / nSer;
+	const nSer = Math.max(1, barIdx.length);
+	const gap = (chart.gapPercent ?? 150) / 100;
+	const barW = f.slot / (nSer + gap);
+	const groupPad = (f.slot - barW * nSer) / 2;
 	for (let c = 0; c < f.nCats; c++) {
 		const slotStart = (horizontal ? f.y0 : f.x0) + c * f.slot + groupPad;
-		for (let s = 0; s < chart.series.length; s++) {
+		for (let b = 0; b < barIdx.length; b++) {
+			const s = barIdx[b];
 			const series = chart.series[s];
 			const len = f.valueOffset(series.values[c] ?? 0) - f.zeroOffset;
 			const color = pointColor(series, c) ?? seriesColor(series, s, chart.seriesColorCycle);
-			const along = slotStart + s * barW;
+			const along = slotStart + b * barW;
 			if (horizontal) {
 				const bx = f.x0 + f.zeroOffset + Math.min(0, len);
 				f.rects.push({
 					x: bx,
 					y: along,
 					w: Math.abs(len),
-					h: barW * .9,
+					h: barW,
 					fillHex: color
 				});
 			} else {
@@ -339,13 +437,13 @@ function buildBarScene(chart, wPt, hPt, measure) {
 				f.rects.push({
 					x: along,
 					y: by,
-					w: barW * .9,
+					w: barW,
 					h: Math.abs(len),
 					fillHex: color
 				});
 			}
 			if (chart.showValues) {
-				const txt = fmtDataLabel(series.values[c] ?? 0);
+				const txt = fmtDataLabel(chart, series.values[c] ?? 0);
 				if (horizontal) {
 					const end = f.x0 + f.zeroOffset + len;
 					f.labels.push({
@@ -363,13 +461,61 @@ function buildBarScene(chart, wPt, hPt, measure) {
 			}
 		}
 	}
+	pushComboLines(chart, f, lineIdx);
 	return {
 		rects: f.rects,
 		polylines: f.polylines,
+		gridlines: f.gridlines,
 		wedges: [],
 		labels: f.labels
 	};
 }
+/**
+* The name a series shows in the legend: its own `c:tx`, or Excel's positional
+* `SeriesN` when it has none. Exported because the SUBSET has to know it too —
+* a name invented at draw time is a name no glyph collector ever saw, and
+* 57362.xlsx drew its unnamed series as "eries1", the capital S appearing
+* nowhere else on the page and so nowhere in the font.
+*
+* @param series The series.
+* @param index  Its zero-based index in the chart.
+* @returns The legend text.
+*/
+function legendSeriesName(series, index) {
+	return series.name && series.name.length > 0 ? series.name : `Series${index + 1}`;
+}
+/** Whether a series plots as a line rather than as a bar of its own cluster. */
+function isLineLike(series) {
+	return series.type === "line" || series.type === "scatter";
+}
+/**
+* Draw a combo's line-group series over an already-built cartesian frame, at the
+* category slot centres the bars use (§21.2.2.145).
+*/
+function pushComboLines(chart, f, lineIdx) {
+	for (const s of lineIdx) {
+		const series = chart.series[s];
+		const color = seriesColor(series, s, chart.seriesColorCycle);
+		const at = (series.secondaryAxis ? f.valueOffset2 : void 0) ?? f.valueOffset;
+		const pts = [];
+		for (let c = 0; c < f.nCats; c++) pts.push([f.x0 + c * f.slot + f.slot / 2, f.y0 + at(series.values[c] ?? 0)]);
+		if (pts.length >= 2) f.polylines.push({
+			points: pts,
+			strokeHex: color,
+			widthPt: 1.5
+		});
+		else if (pts.length === 1) {
+			const [px, py] = pts[0];
+			f.rects.push({
+				x: px - 1.5,
+				y: py - 1.5,
+				w: 3,
+				h: 3,
+				fillHex: color
+			});
+		}
+	}
+}
 function centeredLabel(text, x, y) {
 	return {
 		text,
@@ -433,6 +579,7 @@ function buildAreaScene(chart, wPt, hPt, measure) {
 	return {
 		rects: f.rects,
 		polylines: f.polylines,
+		gridlines: f.gridlines,
 		wedges: [],
 		labels: f.labels,
 		polygons
@@ -452,6 +599,7 @@ function buildAreaScene(chart, wPt, hPt, measure) {
 function buildScatterScene(chart, wPt, hPt, measure) {
 	const rects = [];
 	const polylines = [];
+	const gridlines = [];
 	const labels = [];
 	const xs = [];
 	const ys = [];
@@ -462,11 +610,12 @@ function buildScatterScene(chart, wPt, hPt, measure) {
 	if (xs.length === 0) return {
 		rects,
 		polylines,
+		gridlines,
 		wedges: [],
 		labels
 	};
-	const xScale = niceScale(Math.min(...xs), Math.max(...xs));
-	const yScale = niceScale(Math.min(...ys), Math.max(...ys));
+	const xScale = niceScale(...autoRange(xs), tickBudget(wPt / 2));
+	const yScale = niceScale(...autoRange(ys), tickBudget(hPt));
 	const xTicks = ticks(xScale);
 	const yTicks = ticks(yScale);
 	let top = 4;
@@ -479,33 +628,88 @@ function buildScatterScene(chart, wPt, hPt, measure) {
 	const xAt = (v) => x0 + (v - xScale.min) / (xScale.max - xScale.min) * plotW;
 	const yAt = (v) => y0 + (v - yScale.min) / (yScale.max - yScale.min) * plotH;
 	pushChartTitle(labels, chart, wPt, hPt);
-	pushGridTicks(polylines, labels, yTicks, (v) => formatTick(v, yScale.step), "y", yAt, x0, y0, plotW, plotH);
-	pushGridTicks(polylines, labels, xTicks, (v) => formatTick(v, xScale.step), "x", xAt, x0, y0, plotW, plotH);
-	pushAxisLines(polylines, x0, y0, plotW, plotH);
+	pushGridTicks(gridlines, labels, yTicks, (v) => formatTick(v, yScale.step), "y", yAt, x0, y0, plotW, plotH, chart.gridLine);
+	pushGridTicks(gridlines, labels, xTicks, (v) => formatTick(v, xScale.step), "x", xAt, x0, y0, plotW, plotH, chart.gridLine);
+	pushAxisLines(polylines, x0, y0, plotW, plotH, chart);
+	const style = chart.scatterStyle ?? "marker";
+	const joins = style === "line" || style === "lineMarker" || style.startsWith("smooth");
+	const marks = style === "marker" || style === "lineMarker" || style === "smoothMarker";
+	const wedges = [];
 	for (let s = 0; s < chart.series.length; s++) {
 		const series = chart.series[s];
 		const color = seriesColor(series, s, chart.seriesColorCycle);
+		const pts = [];
 		for (let i = 0; i < series.values.length; i++) {
 			const px = xAt(series.xValues?.[i] ?? i);
 			const py = yAt(series.values[i] ?? 0);
-			rects.push({
-				x: px - 2,
-				y: py - 2,
-				w: 4,
-				h: 4,
-				fillHex: color
-			});
+			pts.push([px, py]);
+			if (marks) pushMarker(rects, wedges, series.marker, px, py, color);
 		}
+		if (joins && !series.line?.none && pts.length >= 2) polylines.push({
+			points: pts,
+			strokeHex: color,
+			widthPt: series.line?.widthPt ?? 1.5
+		});
 	}
 	legend.emit(rects, labels);
 	return {
 		rects,
 		polylines,
-		wedges: [],
+		gridlines,
+		wedges,
 		labels
 	};
 }
 /**
+* The data range an automatic axis covers: its own extent, except that data
+* starting within 5/6 of the top reads as data that belongs against a zero
+* baseline — Excel's own rule for when an automatic minimum stays at 0.
+*/
+function autoRange(vals) {
+	const lo = Math.min(...vals);
+	const hi = Math.max(...vals);
+	return [lo > 0 && lo < 5 / 6 * hi ? 0 : lo, hi];
+}
+/** Ticks that fit along an axis `extentPt` long (mirrors {@link axisScale}). */
+var tickBudget = (extentPt) => Math.min(10, Math.max(4, Math.round(extentPt / 24)));
+/** Side (points) of the square stamped for a series that names no symbol. */
+var DEFAULT_MARKER_PT = 4;
+/**
+* Stamp one data point's marker. §21.2.2.107: `none` draws nothing at all even
+* when the scatter style marks its points, a round symbol is a disc (a full
+* wedge — drawn last, so it sits over the line joining the points), and every
+* other symbol keeps the square we have always drawn.
+*
+* @param rects  Collects a square marker.
+* @param wedges Collects a round marker.
+* @param marker The series' `c:marker`, if it declared one.
+* @param x      Point centre, scene x.
+* @param y      Point centre, scene y.
+* @param color  The series colour.
+*/
+function pushMarker(rects, wedges, marker, x, y, color) {
+	if (marker?.symbol === "none") return;
+	const size = marker?.sizePt ?? DEFAULT_MARKER_PT;
+	if (marker?.symbol === "circle" || marker?.symbol === "dot") {
+		wedges.push({
+			cx: x,
+			cy: y,
+			r: size / 2,
+			startRad: 0,
+			sweepRad: -2 * Math.PI,
+			fillHex: color
+		});
+		return;
+	}
+	rects.push({
+		x: x - size / 2,
+		y: y - size / 2,
+		w: size,
+		h: size,
+		fillHex: color
+	});
+}
+/**
 * Lay out a line {@link Chart} into a {@link ChartScene}: each series becomes a
 * stroked polyline across the category slots, over the shared cartesian frame.
 * Unlike bars/areas the value axis auto-mins (it need not include 0).
@@ -518,7 +722,13 @@ function buildScatterScene(chart, wPt, hPt, measure) {
 */
 function buildLineScene(chart, wPt, hPt, measure) {
 	const allVals = chart.series.flatMap((s) => s.values);
-	const f = buildFrame(chart, wPt, hPt, measure, false, { dataRange: allVals.length > 0 ? [Math.min(...allVals), Math.max(...allVals)] : [0, 1] });
+	const range = allVals.length > 0 ? [Math.min(...allVals), Math.max(...allVals)] : [0, 1];
+	const lineFormat = chartValueFormatter(chart);
+	const f = buildFrame(chart, wPt, hPt, measure, false, {
+		dataRange: range,
+		...lineFormat ? { formatValue: lineFormat } : {}
+	});
+	const wedges = [];
 	for (let s = 0; s < chart.series.length; s++) {
 		const series = chart.series[s];
 		const color = seriesColor(series, s, chart.seriesColorCycle);
@@ -527,7 +737,8 @@ function buildLineScene(chart, wPt, hPt, measure) {
 			const x = f.x0 + c * f.slot + f.slot / 2;
 			const y = f.y0 + f.valueOffset(series.values[c] ?? 0);
 			pts.push([x, y]);
-			if (chart.showValues) f.labels.push(centeredLabel(fmtDataLabel(series.values[c] ?? 0), x, y + 3));
+			if (chart.lineMarkers) pushMarker(f.rects, wedges, series.marker, x, y, color);
+			if (chart.showValues) f.labels.push(centeredLabel(fmtDataLabel(chart, series.values[c] ?? 0), x, y + 3));
 		}
 		if (pts.length >= 2) f.polylines.push({
 			points: pts,
@@ -548,11 +759,15 @@ function buildLineScene(chart, wPt, hPt, measure) {
 	return {
 		rects: f.rects,
 		polylines: f.polylines,
-		wedges: [],
+		gridlines: f.gridlines,
+		wedges,
 		labels: f.labels
 	};
 }
-var sliceColor = (series, i) => pointColor(series, i) ?? SERIES_COLORS[i % SERIES_COLORS.length];
+var sliceColor = (series, i, cycle) => {
+	const palette = cycle && cycle.length > 0 ? cycle : SERIES_COLORS;
+	return pointColor(series, i) ?? palette[i % palette.length];
+};
 /**
 * Lay out a pie/doughnut {@link Chart} into a {@link ChartScene}: the first
 * series' values become proportional wedges (a centre hole for doughnut),
@@ -579,9 +794,9 @@ function buildPieScene(chart, wPt, hPt, measure) {
 	};
 	let top = 4;
 	if (chart.title) top += 13 * 1.6;
-	const legend = layoutLegend(chart.categories.map((c, i) => ({
-		name: c,
-		colorHex: sliceColor(series, i)
+	const legend = layoutLegend(values.map((_, i) => ({
+		name: chart.categories[i] ?? String(i + 1),
+		colorHex: sliceColor(series, i, chart.seriesColorCycle)
 	})), chart.hasLegend, chart.legendPos ?? "r", wPt, hPt, measure);
 	const availW = Math.max(1, wPt - 8 - legend.rightWidth);
 	const availH = Math.max(1, hPt - top - 4 - legend.bottomHeight);
@@ -601,17 +816,18 @@ function buildPieScene(chart, wPt, hPt, measure) {
 			r,
 			startRad: ang,
 			sweepRad: sweep,
-			fillHex: sliceColor(series, i),
+			fillHex: sliceColor(series, i, chart.seriesColorCycle),
 			strokeHex: "FFFFFF"
 		});
 		const mid = ang + sweep / 2;
 		const pct = Math.round(v / total * 100);
-		if (pct >= 5) labels.push({
-			text: `${pct}%`,
+		const custom = series.pointLabels?.find((l) => l.idx === i)?.text;
+		if (custom !== void 0 || pct >= 5) labels.push({
+			text: custom ?? `${pct}%`,
 			x: cx + Math.cos(mid) * labelR,
 			y: cy + Math.sin(mid) * labelR - 9 / 3,
 			sizePt: 9,
-			colorHex: chart.doughnut ? LABEL_COLOR : "FFFFFF",
+			colorHex: custom !== void 0 || chart.doughnut ? LABEL_COLOR : "FFFFFF",
 			align: "center"
 		});
 		ang += sweep;
@@ -643,7 +859,7 @@ function buildPieScene(chart, wPt, hPt, measure) {
 function pointColor(series, idx) {
 	return series.pointColors?.find((p) => p.idx === idx)?.colorHex;
 }
-function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure) {
+function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure, marker = "box") {
 	if (!hasLegend || entries.length === 0) return {
 		rightWidth: 0,
 		bottomHeight: 0,
@@ -651,7 +867,22 @@ function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure) {
 	};
 	const sw = 9;
 	const gap = 4;
-	const entryW = (e) => sw + 3 + measure(e.name, 9) + gap * 2;
+	const keyW = sw * 2.2;
+	const keyH = sw * .55;
+	const key = (x, y, e) => (e.marker ?? marker) === "line" ? {
+		x,
+		y: y + sw / 2 - .75,
+		w: keyW,
+		h: 1.5,
+		fillHex: e.colorHex
+	} : {
+		x,
+		y: y + (sw - keyH) / 2,
+		w: keyW,
+		h: keyH,
+		fillHex: e.colorHex
+	};
+	const entryW = (e) => keyW + 3 + measure(e.name, 9) + gap * 2;
 	if (pos === "r" || pos === "l") {
 		const colW = Math.max(...entries.map(entryW));
 		return {
@@ -661,16 +892,10 @@ function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure) {
 				const lx = pos === "r" ? wPt - colW + gap : gap;
 				let ly = hPt / 2 + entries.length * (sw + 4) / 2 - sw;
 				for (const e of entries) {
-					rects.push({
-						x: lx,
-						y: ly,
-						w: sw,
-						h: sw,
-						fillHex: e.colorHex
-					});
+					rects.push(key(lx, ly, e));
 					labels.push({
 						text: e.name,
-						x: lx + sw + 3,
+						x: lx + keyW + 3,
 						y: ly + 1,
 						sizePt: 9,
 						colorHex: LABEL_COLOR,
@@ -689,16 +914,10 @@ function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure) {
 			let lx = (wPt - totalW) / 2 + gap;
 			const ly = 2;
 			for (const e of entries) {
-				rects.push({
-					x: lx,
-					y: ly,
-					w: sw,
-					h: sw,
-					fillHex: e.colorHex
-				});
+				rects.push(key(lx, ly, e));
 				labels.push({
 					text: e.name,
-					x: lx + sw + 3,
+					x: lx + keyW + 3,
 					y: ly + 1,
 					sizePt: 9,
 					colorHex: LABEL_COLOR,
@@ -721,6 +940,41 @@ function layoutLegend(entries, hasLegend, pos, wPt, hPt, measure) {
 *          renderer then reserves the box with a light border).
 */
 function buildChartScene(chart, wPt, hPt, measure) {
+	const scene = buildTypedScene(chart.catAxisReversed ? withReversedCategories(chart) : chart, wPt, hPt, measure);
+	return scene && withFrame(scene, chart, wPt, hPt);
+}
+/**
+* §21.2.2.134 `maxMin` on the category axis — the categories run the other way,
+* which for a horizontal bar chart puts the FIRST one at the top (how every
+* ranked list reads). Reversing the plotted order says exactly that and leaves
+* every builder's geometry alone; the per-point overrides move with their
+* points.
+*
+* @param chart The chart as the file declares it.
+* @returns The same chart with its categories, values and per-point overrides
+*          in reverse.
+*/
+function withReversedCategories(chart) {
+	const n = Math.max(chart.categories.length, ...chart.series.map((s) => s.values.length), 1);
+	const flip = (i) => n - 1 - i;
+	return {
+		...chart,
+		categories: chart.categories.length > 0 ? Array.from({ length: n }, (_, i) => chart.categories[flip(i)] ?? "") : chart.categories,
+		series: chart.series.map((s) => ({
+			...s,
+			values: Array.from({ length: n }, (_, i) => s.values[flip(i)] ?? 0),
+			...s.pointColors ? { pointColors: s.pointColors.map((p) => ({
+				...p,
+				idx: flip(p.idx)
+			})) } : {},
+			...s.pointLabels ? { pointLabels: s.pointLabels.map((p) => ({
+				...p,
+				idx: flip(p.idx)
+			})) } : {}
+		}))
+	};
+}
+function buildTypedScene(chart, wPt, hPt, measure) {
 	if (chart.type === "bar") return buildBarScene(chart, wPt, hPt, measure);
 	if (chart.type === "line") return buildLineScene(chart, wPt, hPt, measure);
 	if (chart.type === "pie") return buildPieScene(chart, wPt, hPt, measure);
@@ -728,5 +982,34 @@ function buildChartScene(chart, wPt, hPt, measure) {
 	if (chart.type === "scatter") return buildScatterScene(chart, wPt, hPt, measure);
 	return null;
 }
+/**
+* §21.2.2.198 — the chart-space frame, first in the scene so everything else
+* draws over it. A chart that declares neither fill nor outline is returned
+* untouched, so a scene without one is unchanged rect for rect.
+*
+* @param scene The typed scene.
+* @param chart The chart (for its frame fill/outline).
+* @param wPt   The chart's width in points.
+* @param hPt   Its height.
+* @returns The scene with the frame behind it.
+*/
+function withFrame(scene, chart, wPt, hPt) {
+	if (!chart.frameFillHex && !chart.frameLineHex) return scene;
+	const frame = {
+		x: 0,
+		y: 0,
+		w: wPt,
+		h: hPt,
+		...chart.frameFillHex ? { fillHex: chart.frameFillHex } : {},
+		...chart.frameLineHex ? {
+			strokeHex: chart.frameLineHex,
+			strokeWidthPt: .75
+		} : {}
+	};
+	return {
+		...scene,
+		background: frame
+	};
+}
 //#endregion
-export { buildChartScene };
+export { buildChartScene, legendSeriesName };