chartist 2.0.0-rc.2 → 2.0.0

package/dist/index.js

@@ -533,6 +533,21 @@ function deserialize(data) {
 	return parsedData;
 }
 //#endregion
+//#region src/render/style.ts
+/**
+* Applies a style declaration list through the CSSOM. A Content Security
+* Policy without `'unsafe-inline'` for styles blocks a `style` attribute set
+* by a script, but not `element.style`; the browser still reflects the
+* declarations into the `style` attribute, so the markup stays the same.
+* Elements without a `style` property (none in HTML or SVG documents) get
+* the attribute.
+*/
+function setStyle(element, value) {
+	const { style } = element;
+	if (style) style.cssText = value;
+	else element.setAttribute("style", value);
+}
+//#endregion
 //#region src/svg/SvgList.ts
 /**
 * A list of {@link Svg} wrappers that calls an `Svg` method on all of them
@@ -781,6 +796,160 @@ const easings = {
 		1.55
 	]
 };
+/** The CSS easing keywords as cubic Bézier curves. */
+const CSS_EASINGS = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	],
+	"ease-in": [
+		.42,
+		0,
+		1,
+		1
+	],
+	"ease-out": [
+		0,
+		0,
+		.58,
+		1
+	],
+	"ease-in-out": [
+		.42,
+		0,
+		.58,
+		1
+	]
+};
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+/** The four numbers of a cubic Bézier easing, or nothing for other easings. */
+function curveOf(easing) {
+	const css = easing.trim();
+	if (CSS_EASINGS[css]) return CSS_EASINGS[css];
+	if (easings[css]) return easings[css];
+	const numbers = css.startsWith("cubic-bezier(") ? css.match(NUMBER) : null;
+	return numbers?.length === 4 ? numbers.map(Number) : void 0;
+}
+/** A cubic Bézier easing as a function of time, solved for x by bisection. */
+function bezier([x1, y1, x2, y2]) {
+	const at = (a, b, t) => 3 * a * t * (1 - t) ** 2 + 3 * b * t ** 2 * (1 - t) + t ** 3;
+	return (time) => {
+		let low = 0;
+		let high = 1;
+		let t = time;
+		for (let i = 0; i < 30; i++) {
+			const x = at(x1, x2, t);
+			if (Math.abs(x - time) < 1e-6) break;
+			if (x < time) low = t;
+			else high = t;
+			t = (low + high) / 2;
+		}
+		return at(y1, y2, t);
+	};
+}
+/** `steps(n, position)` as a function of time. */
+function steps(css) {
+	const count = Math.max(1, Math.round(Number(css.match(NUMBER)?.[0] ?? 1)));
+	const position = css.match(/(jump-)?(start|end|none|both)\s*\)/)?.[2] ?? "end";
+	const jumps = position === "none" ? count - 1 : position === "both" ? count + 1 : count;
+	const offset = position === "start" || position === "both" ? 1 : 0;
+	return (time) => Math.min(1, (Math.min(Math.floor(time * count), count - 1) + offset) / Math.max(1, jumps));
+}
+/** `linear(…)` as a function of time: its stops, evenly spread where not given. */
+function linearStops(css) {
+	const stops = css.slice(css.indexOf("(") + 1, css.lastIndexOf(")")).split(",").map((stop) => stop.trim().split(/\s+/).map(parseFloat));
+	const ys = stops.map(([value]) => value);
+	const xs = stops.map(([, at], index) => at === void 0 || Number.isNaN(at) ? index / Math.max(1, stops.length - 1) : at / 100);
+	return (time) => {
+		let i = 1;
+		while (i < xs.length - 1 && time > xs[i]) i++;
+		const span = xs[i] - xs[i - 1] || 1;
+		return ys[i - 1] + (ys[i] - ys[i - 1]) * (time - xs[i - 1]) / span;
+	};
+}
+/** An easing as a function of time, `ease` for easings it doesn't know. */
+function easingFunction(easing) {
+	if (typeof easing !== "string") return bezier(easing);
+	const css = easing.trim();
+	if (css.startsWith("steps(")) return steps(css);
+	if (css.startsWith("linear(")) return linearStops(css);
+	return bezier(curveOf(css) ?? CSS_EASINGS.ease);
+}
+/**
+* The SMIL `keySplines` of an easing SMIL can express: a cubic Bézier
+* curve whose four numbers lie within 0 and 1 (the CSS keywords, many
+* `cubic-bezier()` curves, most names of {@link easings}). Browsers ignore
+* an animation whose `keySplines` leave that range, so for other easings
+* it returns nothing: sample them with {@link sampleEasing} instead.
+*
+* @example
+* ```ts
+* import { keySplinesOf } from 'chartist';
+*
+* keySplinesOf('ease-out'); // '0 0 0.58 1'
+* keySplinesOf('easeOutBack'); // undefined: it overshoots
+* ```
+* @param easing A CSS easing, a name of {@link easings}, or four numbers
+* @returns The `keySplines` value, or nothing
+*/
+function keySplinesOf(easing) {
+	const curve = typeof easing === "string" ? curveOf(easing) : easing;
+	return curve?.length === 4 && curve.every((value) => value >= 0 && value <= 1) ? curve.join(" ") : void 0;
+}
+/**
+* The eased progress of an animation at evenly spaced times, for SMIL
+* `values` with even `keyTimes`: 12 points, and one per 50 ms for
+* animations longer than 600 ms, at most 40. It takes the CSS easings
+* (the keywords, `cubic-bezier()` curves, also ones that overshoot,
+* `linear()` and `steps()`), the names of {@link easings} and four
+* numbers of a cubic Bézier curve; anything else is sampled as `ease`.
+* Points lie below 0 or above 1 where the easing overshoots.
+*
+* @example
+* ```ts
+* import { sampleEasing } from 'chartist';
+*
+* // A value that grows from 10 to 20 and overshoots a little on the way.
+* const progress = sampleEasing('cubic-bezier(0.34, 1.56, 0.64, 1)', 400);
+* const values = progress.map(p => 10 + (20 - 10) * p).join(';');
+* ```
+* @param easing The easing
+* @param duration The animation's duration in ms
+* @returns The progress at each point, from 0 to 1
+*/
+function sampleEasing(easing, duration) {
+	const count = duration > 600 ? Math.min(40, Math.max(12, Math.round(duration / 50))) : 12;
+	const at = easingFunction(easing);
+	return Array.from({ length: count }, (_, index) => {
+		const time = index / (count - 1);
+		return index === 0 ? 0 : index === count - 1 ? 1 : at(time);
+	});
+}
+/**
+* The value between `from` and `to` at `progress`: the numbers in `to`
+* moved from their counterparts in `from`, when both have the same shape
+* (`10px` and `40px`, two paths with the same commands), else `from`
+* until halfway and `to` after.
+*/
+function between(from, to, progress) {
+	const fromNumbers = from.match(NUMBER) ?? [];
+	const toNumbers = to.match(NUMBER) ?? [];
+	if (fromNumbers.length !== toNumbers.length || from.replace(NUMBER, "#") !== to.replace(NUMBER, "#")) return progress < .5 ? from : to;
+	let index = 0;
+	return to.replace(NUMBER, () => {
+		const start = Number(fromNumbers[index]);
+		const end = Number(toNumbers[index++]);
+		return String(+(start + (end - start) * progress).toFixed(4));
+	});
+}
 /**
 * The property of an element that holds the emitter its descendants'
 * animations report to when `animate()` gets none. The compat plugin
@@ -800,13 +969,22 @@ function createAnimation(element, attribute, animationDefinition, createGuided =
 	const attributeProperties = {};
 	let animationEasing;
 	let timeout;
-	if (easing) animationEasing = Array.isArray(easing) ? easing : easings[easing];
+	if (easing) animationEasing = Array.isArray(easing) ? easing : easings[easing] ?? easing;
 	def.begin = ensureUnit(def.begin, "ms");
 	def.dur = ensureUnit(def.dur, "ms");
 	if (animationEasing) {
-		def.calcMode = "spline";
-		def.keySplines = animationEasing.join(" ");
-		def.keyTimes = "0;1";
+		const keySplines = keySplinesOf(animationEasing);
+		if (keySplines) {
+			def.calcMode = "spline";
+			def.keySplines = keySplines;
+			def.keyTimes = "0;1";
+		} else if (def.from !== void 0 && def.to !== void 0) {
+			const duration = quantity(def.dur);
+			const progress = sampleEasing(animationEasing, duration.unit === "s" ? duration.value * 1e3 : duration.value);
+			def.calcMode = String(animationEasing).trim().startsWith("steps(") ? "discrete" : "linear";
+			def.values = progress.map((at) => between(String(def.from), String(def.to), at)).join(";");
+			def.keyTimes = progress.map((_, index) => +(index / (progress.length - 1)).toFixed(4)).join(";");
+		}
 	}
 	if (createGuided) {
 		def.fill = "freeze";
@@ -920,7 +1098,8 @@ var Svg = class Svg {
 		}
 		Object.keys(attributes).forEach((key) => {
 			if (attributes[key] === void 0) return;
-			if (key.indexOf(":") !== -1) {
+			if (key === "style") setStyle(this._node, String(attributes[key]));
+			else if (key.indexOf(":") !== -1) {
 				const namespacedAttribute = key.split(":");
 				this._node.setAttributeNS(namespaces[namespacedAttribute[0]], key, String(attributes[key]));
 			} else this._node.setAttribute(key, String(attributes[key]));
@@ -1505,6 +1684,65 @@ var BaseChart = class {
 	}
 };
 //#endregion
+//#region src/scene/node.ts
+const splitClasses = (names) => names.split(/\s+/).filter(Boolean);
+const builder = {
+	attr(attributes) {
+		const attrs = { ...this.attrs };
+		for (const [name, value] of Object.entries(attributes)) if (value === void 0 || value === null) delete attrs[name];
+		else attrs[name] = value;
+		return withFields(this, { attrs });
+	},
+	addClass(names) {
+		const added = splitClasses(names).filter((name, i, all) => !this.classes.includes(name) && all.indexOf(name) === i);
+		return added.length ? withFields(this, { classes: [...this.classes, ...added] }) : this;
+	},
+	removeClass(names) {
+		const removed = splitClasses(names);
+		return withFields(this, { classes: this.classes.filter((name) => !removed.includes(name)) });
+	},
+	append(child, insertFirst = false) {
+		return withFields(this, { children: insertFirst ? [child, ...this.children] : [...this.children, child] });
+	},
+	remove(child) {
+		return withFields(this, { children: this.children.filter((existing) => existing !== child) });
+	},
+	replace(child, next) {
+		return withFields(this, { children: this.children.map((existing) => existing === child ? next : existing) });
+	},
+	text(content) {
+		return withFields(this, { content });
+	},
+	empty() {
+		return withFields(this, {
+			children: [],
+			content: void 0
+		});
+	}
+};
+function create(fields) {
+	const created = Object.create(builder);
+	for (const [field, value] of Object.entries(fields)) if (value !== void 0) created[field] = value;
+	return created;
+}
+function withFields(source, changes) {
+	return create({
+		...source,
+		...changes
+	});
+}
+function node(name, attributes = {}, className = "", meta = {}) {
+	const attrs = {};
+	for (const [attr, value] of Object.entries(attributes)) if (value !== void 0 && value !== null) attrs[attr] = value;
+	return create({
+		name,
+		attrs,
+		classes: [...new Set(splitClasses(className))],
+		children: [],
+		...meta
+	});
+}
+//#endregion
 //#region src/svg/SvgPath.ts
 /**
 * The parameters of each SVG path command, in the order the `d` attribute
@@ -2031,63 +2269,57 @@ function monotoneCubic(options) {
 	};
 }
 //#endregion
-//#region src/scene/node.ts
-const splitClasses = (names) => names.split(/\s+/).filter(Boolean);
-const builder = {
-	attr(attributes) {
-		const attrs = { ...this.attrs };
-		for (const [name, value] of Object.entries(attributes)) if (value === void 0 || value === null) delete attrs[name];
-		else attrs[name] = value;
-		return withFields(this, { attrs });
-	},
-	addClass(names) {
-		const added = splitClasses(names).filter((name, i, all) => !this.classes.includes(name) && all.indexOf(name) === i);
-		return added.length ? withFields(this, { classes: [...this.classes, ...added] }) : this;
-	},
-	removeClass(names) {
-		const removed = splitClasses(names);
-		return withFields(this, { classes: this.classes.filter((name) => !removed.includes(name)) });
-	},
-	append(child, insertFirst = false) {
-		return withFields(this, { children: insertFirst ? [child, ...this.children] : [...this.children, child] });
-	},
-	remove(child) {
-		return withFields(this, { children: this.children.filter((existing) => existing !== child) });
-	},
-	replace(child, next) {
-		return withFields(this, { children: this.children.map((existing) => existing === child ? next : existing) });
-	},
-	text(content) {
-		return withFields(this, { content });
-	},
-	empty() {
-		return withFields(this, {
-			children: [],
-			content: void 0
-		});
-	}
-};
-function create(fields) {
-	const created = Object.create(builder);
-	for (const [field, value] of Object.entries(fields)) if (value !== void 0) created[field] = value;
-	return created;
+//#region src/layers/path.ts
+/** The interpolation for a `lineSmooth` option: smooth, straight or given. */
+function interpolationOf(lineSmooth) {
+	return typeof lineSmooth === "function" ? lineSmooth : lineSmooth ? monotoneCubic() : none();
 }
-function withFields(source, changes) {
-	return create({
-		...source,
-		...changes
-	});
+/**
+* The px shift that puts points in the middle of each step of a step axis,
+* where bars are centered, for `align: 'center'`.
+*/
+function centerShift(axisX, align) {
+	return align === "center" && axisX.kind === "step" && !axisX.stretch ? (axisX.step ?? 0) / 2 : 0;
 }
-function node(name, attributes = {}, className = "", meta = {}) {
-	const attrs = {};
-	for (const [attr, value] of Object.entries(attributes)) if (value !== void 0 && value !== null) attrs[attr] = value;
-	return create({
-		name,
-		attrs,
-		classes: [...new Set(splitClasses(className))],
-		children: [],
-		...meta
+/**
+* Projects a series' values into the chart area and interpolates a path
+* through them. Holes break the path unless the interpolation fills them.
+* @param meta The meta of a value, attached to its path element.
+*/
+function seriesPath(values, axes, area, shift, interpolation, meta = () => void 0) {
+	const pathCoordinates = [];
+	const pathData = [];
+	values.forEach((value, valueIndex) => {
+		pathCoordinates.push(area.x1 + shift + axes.x.project(value, valueIndex, values), area.y1 - axes.y.project(value, valueIndex, values));
+		pathData.push({
+			value,
+			valueIndex,
+			meta: meta(valueIndex)
+		});
 	});
+	return interpolation(pathCoordinates, pathData);
+}
+/**
+* The same path traced backward: it starts where the path ends, and each
+* segment runs to the previous point, with a curve's control points
+* swapped, so it draws the same shape. Holes (`M` commands within the
+* path) are kept between the same points. Arcs aren't supported.
+*/
+function reversePath(path) {
+	const reversed = new SvgPath();
+	const elements = path.pathElements;
+	for (let i = elements.length - 1; i >= 0; i--) {
+		const element = elements[i];
+		const target = elements[i - 1];
+		if (i === elements.length - 1 || elements[i + 1].command === "M") reversed.move(element.x, element.y, false, element.data);
+		if (element.command === "M" || !target) continue;
+		if (element.command === "C") {
+			const curve = element;
+			reversed.curve(curve.x2, curve.y2, curve.x1, curve.y1, target.x, target.y, false, target.data);
+		} else if (element.command === "L") reversed.line(target.x, target.y, false, target.data);
+		else throw new Error(`Chartist: can't reverse a path with "${element.command}" commands`);
+	}
+	return reversed;
 }
 //#endregion
 //#region src/layers/line.ts
@@ -2102,7 +2334,7 @@ const DEFAULTS = {
 	showArea: false,
 	areaBase: 0
 };
-const CLASS_NAMES$2 = {
+const CLASS_NAMES$5 = {
 	series: "ct-series",
 	line: "ct-line",
 	point: "ct-point",
@@ -2164,11 +2396,10 @@ function seriesOption(series, options, key) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function line(options = {}) {
 	const classNames = {
-		...CLASS_NAMES$2,
+		...CLASS_NAMES$5,
 		...options.classNames
 	};
 	return {
@@ -2183,7 +2414,7 @@ function line(options = {}) {
 			const { x: axisX, y: axisY } = axes;
 			if (!axisX || !axisY || !normalized) throw new Error("Layer \"line\" needs an x and a y axis");
 			if (seriesIndexes && options.reverseData) throw new Error("Layer \"line\": a series selection can't be combined with reverseData");
-			const shift = options.align === "center" && axisX.kind === "step" && !axisX.stretch ? (axisX.step ?? 0) / 2 : 0;
+			const shift = centerShift(axisX, options.align);
 			const order = data.series.map((_, i) => i);
 			if (options.reverseData) order.reverse();
 			return order.map((dataIndex, localIndex) => {
@@ -2193,18 +2424,11 @@ function line(options = {}) {
 				const seriesName = safeHasProperty(series, "name") && series.name;
 				const seriesClassName = safeHasProperty(series, "className") && series.className;
 				const seriesMeta = safeHasProperty(series, "meta") ? series.meta : void 0;
-				const pathCoordinates = [];
-				const pathData = [];
-				values.forEach((value, valueIndex) => {
-					pathCoordinates.push(area.x1 + shift + axisX.project(value, valueIndex, values), area.y1 - axisY.project(value, valueIndex, values));
-					pathData.push({
-						value,
-						valueIndex,
-						meta: getMetaData(series, valueIndex)
-					});
-				});
-				const lineSmooth = seriesOption(series, options, "lineSmooth");
-				const path = (typeof lineSmooth === "function" ? lineSmooth : lineSmooth ? monotoneCubic() : none())(pathCoordinates, pathData);
+				const smoothing = interpolationOf(seriesOption(series, options, "lineSmooth"));
+				const path = seriesPath(values, {
+					x: axisX,
+					y: axisY
+				}, area, shift, smoothing, (valueIndex) => getMetaData(series, valueIndex));
 				const seriesContext = {
 					series,
 					seriesIndex,
@@ -2242,7 +2466,8 @@ function line(options = {}) {
 					ctx: {
 						...seriesContext,
 						values,
-						path: path.clone()
+						path: path.clone(),
+						smoothing
 					}
 				}), ...children];
 				if (seriesOption(series, options, "showArea") && axisY.range) {
@@ -2251,14 +2476,15 @@ function line(options = {}) {
 					path.splitByCommand("M").filter((segment) => segment.pathElements.length > 1).map((segment) => {
 						const first = segment.pathElements[0];
 						const last = segment.pathElements[segment.pathElements.length - 1];
-						return segment.clone(true).position(0).remove(1).move(first.x, areaBaseProjected).line(first.x, first.y).position(segment.pathElements.length + 1).line(last.x, areaBaseProjected);
+						return segment.clone(true).position(0).remove(1).move(first.x, areaBaseProjected).line(first.x, first.y, false, first.data).position(segment.pathElements.length + 1).line(last.x, areaBaseProjected);
 					}).forEach((areaPath) => {
 						children = [node("path", { d: areaPath.stringify() }, classNames.area, {
 							role: "area",
 							ctx: {
 								...seriesContext,
 								values,
-								path: areaPath.clone()
+								path: areaPath.clone(),
+								smoothing
 							}
 						}), ...children];
 					});
@@ -2667,7 +2893,6 @@ function presetAxes(config, boundOf) {
 *   `{ x, y }` form.
 * @param extra `reverseData` and `normalize`, for the list form (the
 *   `{ x, y }` form takes them inline).
-* @experimental
 */
 function cartesianAxes(input, extra = {}) {
 	const withOffset = (setup, dimension) => ({
@@ -2734,7 +2959,6 @@ const valueOf = (value, dimension) => Number(getMultiValue(value, dimension));
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function stepAxis() {
 	return {
@@ -2793,7 +3017,6 @@ function stepAxis() {
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function autoScaleAxis() {
 	return {
@@ -2853,7 +3076,6 @@ function autoScaleAxis() {
 *   layers: [axisGrid(), line({ showLine: false }), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function fixedScaleAxis() {
 	return {
@@ -2987,8 +3209,9 @@ function createPhaseEmitter() {
 			return current;
 		},
 		notify(name, value) {
-			(listeners.get(name) ?? []).forEach(({ listener }) => listener(value));
+			const results = (listeners.get(name) ?? []).map(({ listener }) => listener(value));
 			observe(name, value);
+			return results;
 		},
 		clear() {
 			listeners.clear();
@@ -3055,7 +3278,6 @@ function findAll(scene, query = {}) {
 * });
 * const markup = mapped ? renderToString(mapped) : '';
 * ```
-* @experimental
 */
 function mapNodes(scene, mapper) {
 	let children = scene.children;
@@ -3200,10 +3422,9 @@ function layout(emitter, config, width, height) {
 	validate(result);
 	return result;
 }
-function compose(emitter, config, data, area, measureText, axes = {}, normalized, padding = config.padding, bindings = [], labels = "html", measureStyle) {
-	const composed = [];
+function compose(emitter, config, data, area, measureText, axes = {}, normalized, padding = config.padding, bindings = [], labels = "html", measureStyle, drawn = []) {
 	const byId = new Map((axes.all ?? []).map((axis) => [axis.id, axis]));
-	config.layers.forEach((layer, layerIndex) => {
+	const layers = config.layers.map((layer, layerIndex) => {
 		const binding = bindings[layerIndex] ?? {};
 		const selection = data.flat ? void 0 : binding.series;
 		const layerData = selection ? {
@@ -3214,7 +3435,7 @@ function compose(emitter, config, data, area, measureText, axes = {}, normalized
 			...normalized,
 			series: selection.map((i) => normalized.series[i])
 		} : normalized;
-		const nodes = layer.compose({
+		const context = {
 			data: layerData,
 			area,
 			padding,
@@ -3230,12 +3451,38 @@ function compose(emitter, config, data, area, measureText, axes = {}, normalized
 			seriesIndexes: selection,
 			labels,
 			measureStyle
+		};
+		const nodes = layer.compose(context).map((top) => assignKeys(top, layerIndex));
+		drawn.push({
+			nodes: [],
+			context
 		});
-		for (const top of nodes) {
-			const result = mapNodes(assignKeys(top, layerIndex), (current) => current.role === void 0 ? void 0 : emitter.transform("compose", current));
-			if (result) composed.push(result);
-		}
+		return {
+			layer,
+			context,
+			nodes,
+			layerIndex
+		};
 	});
+	const refiners = layers.flatMap(({ layer, context }) => layer.refine ? [{
+		refine: layer.refine.bind(layer),
+		context
+	}] : []);
+	const refine = (current) => refiners.reduce((refined, { refine: refineNode, context }) => {
+		const result = refineNode(refined, context);
+		return result ? withFields(result, {
+			key: refined.key,
+			children: refined.children
+		}) : refined;
+	}, current);
+	const composed = [];
+	for (const { nodes, layerIndex } of layers) for (const top of nodes) {
+		const result = mapNodes(top, (current) => current.role === void 0 ? void 0 : emitter.transform("compose", refiners.length > 0 ? refine(current) : current));
+		if (result) {
+			drawn[layerIndex].nodes.push(result);
+			composed.push(result);
+		}
+	}
 	return composed;
 }
 function scene(emitter, config, children, size) {
@@ -3263,6 +3510,7 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 		rootClass: className,
 		...measureOptions
 	}) : measure;
+	const drawn = [];
 	const measureText = withRootClass(environment.measureText);
 	const measureStyle = withRootClass(environment.measureStyle);
 	return {
@@ -3271,10 +3519,11 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 		layout: laidOut,
 		axes,
 		normalized,
-		scene: scene(emitter, config, compose(emitter, config, data, laidOut.area, measureText, axes, normalized, laidOut.padding, bindings, config.labels ?? environment.labels ?? "html", measureStyle), environment.rootSize ?? {
+		scene: scene(emitter, config, compose(emitter, config, data, laidOut.area, measureText, axes, normalized, laidOut.padding, bindings, config.labels ?? environment.labels ?? "html", measureStyle, drawn), environment.rootSize ?? {
 			width: config.width ?? laidOut.width,
 			height: config.height ?? laidOut.height
-		})
+		}),
+		drawn
 	};
 }
 /**
@@ -3282,7 +3531,6 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 * below the top of the line (a typical font's ascent). Lines are one font
 * size apart, so a renderer finds a line's vertical center at
 * `y - (textAscent - 0.5) * fontSize` from its `y`.
-* @experimental
 */
 const textAscent = .85;
 /**
@@ -3300,7 +3548,6 @@ const textAscent = .85;
 *   return { ...size, width: size.width * 1.1 };
 * };
 * ```
-* @experimental
 */
 const estimateText = (text, options = {}) => {
 	const fontSize = options.fontSize ?? 12;
@@ -3312,24 +3559,62 @@ const estimateText = (text, options = {}) => {
 };
 //#endregion
 //#region src/render/dom.ts
-function setAttribute(element, name, value) {
+/**
+* Sets one scene attribute on an element as the DOM renderer does: names
+* with a known prefix (`ct:value`) in their namespace, and `style` through
+* the CSSOM, which a Content Security Policy allows. For renderers that
+* change elements they keep.
+*
+* @example
+* ```ts
+* import { applyAttribute } from 'chartist';
+*
+* const point = document.querySelector('.ct-point');
+* if (point) {
+*   applyAttribute(point, 'ct:value', 12);
+*   applyAttribute(point, 'style', 'stroke-width: 12px;');
+* }
+* ```
+* @param element The element to change
+* @param name The attribute's name, as in a scene node's `attrs`
+* @param value The attribute's value
+*/
+function applyAttribute(element, name, value) {
 	const separator = name.indexOf(":");
 	const prefix = separator > 0 ? name.slice(0, separator) : "";
-	if (prefix && prefix !== "xmlns" && namespaces[prefix]) element.setAttributeNS(namespaces[prefix], name, String(value));
+	if (name === "style") setStyle(element, String(value));
+	else if (prefix && prefix !== "xmlns" && namespaces[prefix]) element.setAttributeNS(namespaces[prefix], name, String(value));
 	else element.setAttribute(name, String(value));
 }
 /**
-* Creates the element tree. Content of a `foreignObject` is HTML and is
-* created in the XHTML namespace.
+* Creates the element tree of a scene node as the DOM renderer does: SVG
+* elements, HTML elements inside a `foreignObject`, attributes set with
+* {@link applyAttribute}. For renderers that create elements.
+*
+* @example
+* ```ts
+* import { node, renderElement } from 'chartist';
+*
+* const dot = renderElement(node('circle', { cx: 5, cy: 5, r: 4 }, 'ct-dot'), document);
+* document.querySelector('svg')?.append(dot);
+* ```
+* @param current The node to create
+* @param document The document to create the elements in
+* @param options The namespace, and a callback for each created element
+* @returns The node's element, with its children
 */
-function build(document, current, elements, html = false) {
+function renderElement(current, document, options = {}) {
+	const { html = false, created } = options;
 	const element = document.createElementNS(html ? namespaces.xhtml : namespaces.svg, current.name);
 	if (current.classes.length) element.setAttribute("class", current.classes.join(" "));
-	for (const [name, value] of Object.entries(current.attrs)) setAttribute(element, name, value);
+	for (const [name, value] of Object.entries(current.attrs)) applyAttribute(element, name, value);
 	if (current.content) element.appendChild(document.createTextNode(current.content));
-	const childrenAreHtml = html || current.name === "foreignObject";
-	for (const child of current.children) element.appendChild(build(document, child, elements, childrenAreHtml));
-	elements.set(current, element);
+	const childOptions = html || current.name !== "foreignObject" ? options : {
+		...options,
+		html: true
+	};
+	for (const child of current.children) element.appendChild(renderElement(child, document, childOptions));
+	created?.(current, element);
 	return element;
 }
 /** Removes Chartist SVGs (the ones with the ct namespace) from a container. */
@@ -3343,7 +3628,7 @@ function removePrevious(container) {
 */
 function probe(document, name, options, read) {
 	const svg = document.createElementNS(namespaces.svg, "svg");
-	svg.setAttribute("style", "position: absolute; visibility: hidden; width: 0; height: 0;");
+	setStyle(svg, "position: absolute; visibility: hidden; width: 0; height: 0;");
 	if (options.rootClass) svg.setAttribute("class", options.rootClass);
 	const node = document.createElementNS(namespaces.svg, name);
 	if (options.classes?.length) node.setAttribute("class", options.classes.join(" "));
@@ -3377,8 +3662,10 @@ function measureInDocument(document) {
 /**
 * Creates the renderer `chart()` uses by default: it renders scenes as
 * inline SVG into the container, replacing an earlier Chartist SVG there
-* (as 1.x does), and measures text and reads styles for layout in the
-* container, so its CSS applies.
+* (as 1.x does) on every render, and measures text and reads styles for
+* layout in the container, so its CSS applies. It ignores the previous
+* render it gets from a chart's second render on; `liveDomRenderer()`
+* from `chartist/live` keeps its SVG and changes it instead.
 * Wrap it to change what every render puts on the page.
 *
 * @example
@@ -3404,7 +3691,6 @@ function measureInDocument(document) {
 *   renderer
 * });
 * ```
-* @experimental
 */
 function domRenderer() {
 	return {
@@ -3412,7 +3698,7 @@ function domRenderer() {
 		render(scene, container) {
 			const document = container.ownerDocument;
 			const elements = /* @__PURE__ */ new WeakMap();
-			const svg = build(document, scene, elements);
+			const svg = renderElement(scene, document, { created: (node, element) => elements.set(node, element) });
 			svg.setAttributeNS(namespaces.xmlns, "xmlns:ct", namespaces.ct);
 			removePrevious(container);
 			container.appendChild(svg);
@@ -3434,6 +3720,35 @@ function domRenderer() {
 	};
 }
 //#endregion
+//#region src/chart/changes.ts
+/** Adds an entry for `current` and each of its descendants, in document order. */
+function each$1(current, op, into) {
+	into.push({
+		op,
+		node: current
+	});
+	current.children.forEach((child) => each$1(child, op, into));
+}
+/**
+* The changes of a render that replaced its output: every node of the
+* previous scene removed, every node of the new one added.
+*/
+function replacementChanges(previous, next) {
+	const changes = [];
+	if (previous) each$1(previous, "remove", changes);
+	each$1(next, "add", changes);
+	return changes;
+}
+/**
+* Set on a chart handle by the 1.x classes and the compat plugin: the
+* chart never hands its renderer the previous render, so every render
+* draws new elements, as 1.x code expects. A global symbol, so the compat
+* build sets the same one as the core.
+*/
+const REPLACES_OUTPUT = Symbol.for("chartist.replacesOutput");
+/** Whether the chart must replace its output on every render. */
+const replacesOutput = (handle) => handle[REPLACES_OUTPUT] === true;
+//#endregion
 //#region src/chart/className.ts
 /**
 * The chart type class for a chart's layers, so the stylesheet's chart
@@ -3486,7 +3801,6 @@ function withChartTypeClass(config) {
 *   { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
 * );
 * ```
-* @experimental
 */
 function withOptions(plugin, options) {
 	return [plugin, options];
@@ -3552,16 +3866,37 @@ function asUserListeners(chart, add) {
 	else add();
 }
 /**
-* Installs v2 plugins in order and returns the event names they provide.
-* Provided names are known before any plugin installs, so a plugin may
-* listen to events another plugin provides. Listeners added while a
-* plugin installs belong to plugins.
+* Installs v2 plugins in order and adds the event names they provide to
+* `provided`. Provided names are known before any plugin installs, so a
+* plugin may listen to events another plugin provides. Listeners added
+* while a plugin installs belong to plugins.
 */
 function installPlugins(chart, plugins = [], provided, scope) {
 	scopes.set(chart, scope);
 	const entries = normalize(plugins);
 	for (const [plugin] of entries) plugin.provides?.forEach((name) => provided.add(name));
-	for (const [plugin, options] of entries) addingAs(scope, "plugin", () => plugin.install(chart, options));
+	const cleanups = [];
+	for (const [plugin, options] of entries) addingAs(scope, "plugin", () => {
+		const cleanup = plugin.install(chart, options);
+		if (typeof cleanup === "function") cleanups.push(cleanup);
+	});
+	return {
+		plugins: entries.map(([plugin]) => plugin),
+		cleanups
+	};
+}
+/**
+* Calls every function, also when one throws, and throws the first error
+* afterwards.
+*/
+function runAll(functions) {
+	const errors = [];
+	for (const run of functions) try {
+		run();
+	} catch (error) {
+		errors.push(error);
+	}
+	if (errors.length) throw errors[0];
 }
 /** Registers `config.on` listeners. */
 function registerListeners(chart, listeners = {}) {
@@ -3662,7 +3997,6 @@ function resolveTarget(target) {
 * @param target The container element, or a CSS selector for it.
 * @param config The data, axes, layers and the rest of the chart.
 * @returns A handle to update the chart, listen to it or remove it.
-* @experimental
 */
 function chart(target, config) {
 	const container = resolveTarget(target);
@@ -3688,6 +4022,12 @@ function chart(target, config) {
 	let watcher;
 	let state;
 	let output;
+	let cleanups = [];
+	let installed = {
+		plugins: [],
+		cleanups: []
+	};
+	let layerOf;
 	let observer;
 	let destroyed = false;
 	let attached = true;
@@ -3695,7 +4035,7 @@ function chart(target, config) {
 	const view = container.ownerDocument.defaultView;
 	const fonts = container.ownerDocument.fonts;
 	const onFontsLoaded = () => {
-		if (!destroyed && state && measuredText) render("layout");
+		if (!destroyed && state && measuredText) render("layout", "fonts");
 	};
 	let printed;
 	let printing = false;
@@ -3725,7 +4065,7 @@ function chart(target, config) {
 		probe.setAttribute("width", width);
 		probe.setAttribute("height", height);
 		const px = (value) => typeof value === "number" ? "px" : "";
-		probe.setAttribute("style", `width: ${width}${px(effective.width)}; height: ${height}${px(effective.height)};`);
+		setStyle(probe, `width: ${width}${px(effective.width)}; height: ${height}${px(effective.height)};`);
 		container.appendChild(probe);
 		const measured = {
 			width: probe.clientWidth,
@@ -3741,9 +4081,33 @@ function chart(target, config) {
 			height: effective.viewBox?.height || svg.height || (fixedSize(effective.height) ?? container.clientHeight)
 		};
 	}
-	function render(from) {
+	/**
+	* Asks the plugins with `keyframes`, in order, then the layer that drew
+	* the node, for the keyframes of a node's update animation.
+	*/
+	function keyframes(previous, next, progress) {
+		for (const plugin of installed.plugins) {
+			const frames = plugin.keyframes?.(previous, next, progress);
+			if (frames) return frames;
+		}
+		if (!state) return;
+		if (!layerOf) {
+			const map = /* @__PURE__ */ new WeakMap();
+			const mark = (drawnNode, index) => {
+				map.set(drawnNode, index);
+				drawnNode.children.forEach((child) => mark(child, index));
+			};
+			state.drawn.forEach(({ nodes }, index) => nodes.forEach((top) => mark(top, index)));
+			layerOf = map;
+		}
+		const index = layerOf.get(next);
+		return index === void 0 ? void 0 : state.config.layers[index].keyframes?.(previous, next, state.drawn[index].context, progress);
+	}
+	function render(from, cause) {
 		const { width, height } = size();
 		measuredText = false;
+		const previous = state;
+		const previousOutput = output;
 		state = runPipeline(emitter, withChartTypeClass(effective), {
 			width,
 			height,
@@ -3756,18 +4120,35 @@ function chart(target, config) {
 			}
 		}, state, from);
 		const { scene } = state;
-		output = renderer.render(scene, container);
+		layerOf = void 0;
+		const pending = cleanups;
+		cleanups = [];
+		runAll(pending);
+		const update = previous && previousOutput && !replacesOutput(handle) ? {
+			previous: previousOutput,
+			previousScene: previous.scene,
+			cause,
+			labels: state.data.labels,
+			previousLabels: previous.data.labels,
+			keyframes
+		} : void 0;
+		const rendered = renderer.render(scene, container, update);
+		output = rendered;
 		if (printing) applyPrintViewBox();
-		emitter.notify("render", {
-			scene,
-			output
-		});
-		const elementOf = output.elementOf ?? (() => void 0);
-		emitter.notify("mount", {
+		const event = {
 			scene,
-			output,
-			elementOf
-		});
+			output: rendered,
+			cause,
+			changes: update && rendered.patched && rendered.changes ? rendered.changes : replacementChanges(previous?.scene, scene),
+			previous: previous?.scene
+		};
+		emitter.notify("render", event);
+		const elementOf = (node) => rendered.elementOf?.(node) ?? previousOutput?.elementOf?.(node);
+		cleanups = emitter.notify("mount", {
+			...event,
+			elementOf,
+			animation: rendered.animation
+		}).filter((result) => typeof result === "function");
 	}
 	function resolveResponsive() {
 		const entries = current.responsive?.entries;
@@ -3783,7 +4164,7 @@ function chart(target, config) {
 			previousConfig,
 			currentConfig: effective
 		});
-		render("resolve");
+		render("resolve", "responsive");
 	}
 	/** (Re)creates the watcher of the responsive entries. */
 	function watch() {
@@ -3802,7 +4183,7 @@ function chart(target, config) {
 			};
 			if ("responsive" in changes) watch();
 			else resolveResponsive();
-			render("resolve");
+			render("resolve", "update");
 			return handle;
 		},
 		detach() {
@@ -3821,8 +4202,15 @@ function chart(target, config) {
 			if (destroyed) return;
 			destroyed = true;
 			handle.detach();
-			output?.remove?.();
-			emitter.clear();
+			const pending = cleanups;
+			cleanups = [];
+			try {
+				runAll(pending);
+			} finally {
+				output?.remove?.();
+				emitter.clear();
+				runAll([...installed.cleanups].reverse());
+			}
 		},
 		...eventMethods(emitter, () => handle, provided, scope)
 	};
@@ -3838,15 +4226,15 @@ function chart(target, config) {
 				return;
 			}
 			const { width, height } = size();
-			if (width !== state.layout.width || height !== state.layout.height) render("layout");
+			if (width !== state.layout.width || height !== state.layout.height) render("layout", "resize");
 		});
 		observer.observe(container);
 	}
-	installPlugins(handle, config.plugins, provided, scope);
+	installed = installPlugins(handle, config.plugins, provided, scope);
 	registerListeners(handle, config.on);
 	if (attached) watch();
 	else resolveResponsive();
-	render("resolve");
+	render("resolve", "create");
 	return handle;
 }
 //#endregion
@@ -3874,7 +4262,7 @@ function axisNodes(axis, frame) {
 	const options = frame.options ?? (axis.dimension === "x" ? frame.axisX : frame.axisY);
 	const place = frame.place;
 	const projected = axis.ticks.map((tick, i) => axis.project(tick, i));
-	const labelValues = axis.ticks.map(options.labelInterpolationFnc);
+	const labelValues = axis.ticks.map(options.labelTransform);
 	const gridOffset = axis.dimension === "x" ? area.y2 : area.x1;
 	const gridLength = axis.dimension === "x" ? area.height : area.width;
 	const grids = [];
@@ -3969,6 +4357,12 @@ function gridBackground(area, className) {
 	}, className, { role: "gridBackground" });
 }
 //#endregion
+//#region src/layers/label.ts
+/** The label function to use; `labelTransform` wins when both are set. */
+function labelTransformOf(options) {
+	return options.labelTransform ?? options.labelInterpolationFnc ?? ((value) => value);
+}
+//#endregion
 //#region src/scales/svgLabels.ts
 /**
 * SVG text labels: the label text wrapped into `tspan` lines and aligned
@@ -4067,13 +4461,15 @@ function svgLabels(measureText, kind, override = {}) {
 *       container('(width < 400px)'),
 *       {
 *         showPoint: false,
-*         axisX: { labelInterpolationFnc: value => String(value)[0] }
+*         axisX: { labelTransform: value => String(value)[0] }
 *       }
 *     ]
 *   ]
 * );
 * ```
-* @experimental
+* @experimental It rests on `Element.matchContainer()`, a draft standard
+*   (w3c/csswg-drafts#6205), through a polyfill: it may still change in a
+*   2.x minor.
 */
 function container(query) {
 	return Object.freeze({
@@ -4190,7 +4586,6 @@ function watchResponsive(entries, host, onChange, observeResize = false) {
 *   ])
 * });
 * ```
-* @experimental
 */
 function responsive(entries) {
 	return {
@@ -4209,13 +4604,18 @@ function applyResponsive(base, entries, matching, merge) {
 * option merge, window responsive options, the preset state that plugins
 * (compat) read, and the grid and label layers.
 */
+/** An axis's options with its label function resolved from either name. */
+const drawn = (axis) => ({
+	...axis,
+	labelTransform: labelTransformOf(axis)
+});
 function frame(options, context, svgLabel) {
 	return {
 		svgLabel,
 		area: context.area,
 		padding: context.padding,
-		axisX: options.axisX,
-		axisY: options.axisY,
+		axisX: drawn(options.axisX),
+		axisY: drawn(options.axisY),
 		classNames: options.classNames
 	};
 }
@@ -4243,10 +4643,10 @@ function labelLayer(options, order = ["x", "y"]) {
 		type: "labels",
 		coordinates: ["cartesian"],
 		compose(context) {
-			const svgLabel = context.labels === "svg" ? svgLabels(context.measureText, options.labelKind ?? "line") : void 0;
 			return [group(options.classNames.labelGroup, order.flatMap((dimension) => {
 				const axis = context.axes[dimension];
-				return axis ? axisNodes(axis, frame(options, context, svgLabel)).labels : [];
+				if (!axis) return [];
+				return axisNodes(axis, frame(options, context, context.labels === "svg" ? svgLabels(context.measureText, options.labelKind ?? "line", options[dimension === "x" ? "axisX" : "axisY"].labelAlign) : void 0)).labels;
 			}))];
 		}
 	};
@@ -4293,7 +4693,7 @@ function rootStyle(getOptions, state) {
 */
 function presetConfig(spec, data, options) {
 	const resolved = extend({}, spec.defaults, options);
-	const { plugins, on } = options ?? {};
+	const { plugins, on, renderer } = options ?? {};
 	return {
 		...spec.config({
 			...data,
@@ -4301,7 +4701,8 @@ function presetConfig(spec, data, options) {
 			series: data.series || []
 		}, resolved),
 		plugins,
-		on
+		on,
+		...renderer && { renderer }
 	};
 }
 /** Internal: creates a preset chart; used by the preset functions and classes. */
@@ -4357,7 +4758,8 @@ function createPreset(spec, target, initialData, options = {}, responsiveOptions
 	const inner = chart(target, {
 		...withState(spec.config(data, current)),
 		plugins: [rootStyle(() => current, state), ...plugins ?? []],
-		on: options.on
+		on: options.on,
+		renderer: options.renderer
 	});
 	function onResponsiveChange() {
 		const previousOptions = current;
@@ -4446,6 +4848,7 @@ const lineSpec = {
 	config(data, preset) {
 		const options = preset;
 		const axisOptions = options;
+		const { below = [], above = [] } = options.layers ?? {};
 		return {
 			data,
 			axes: presetAxes(axesConfig$1(options)),
@@ -4457,6 +4860,7 @@ const lineSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions),
+				...below,
 				seriesGroup(line({
 					lineSmooth: options.lineSmooth,
 					showPoint: options.showPoint,
@@ -4467,6 +4871,7 @@ const lineSpec = {
 					reverseData: options.reverseData,
 					classNames: options.classNames
 				})),
+				...above,
 				labelLayer(axisOptions)
 			]
 		};
@@ -4489,7 +4894,6 @@ const lineSpec = {
 *   toScene(config, { width: 600, height: 300 })
 * );
 * ```
-* @experimental
 */
 function lineChartConfig(data, options = {}) {
 	return presetConfig(lineSpec, data, options);
@@ -4502,7 +4906,6 @@ function createLineChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a line chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function lineChart(target, data, options = {}, responsiveOptions) {
 	return createLineChart(target, data, options, responsiveOptions).handle;
@@ -4574,6 +4977,7 @@ var PresetChart = class extends BaseChart {
 			name: "chart-listeners",
 			install: (handle) => {
 				this.installing = handle;
+				handle[REPLACES_OUTPUT] = true;
 				asUserListeners(handle, () => queued.forEach(([event, listener]) => this.on(event, listener)));
 			}
 		};
@@ -4767,7 +5171,6 @@ function rawSeries(series) {
 *   className: 'ct-chart-bar'
 * });
 * ```
-* @experimental
 */
 function bar(options = {}) {
 	const classNames = {
@@ -4777,6 +5180,7 @@ function bar(options = {}) {
 	};
 	const horizontal = Boolean(options.horizontalBars);
 	const seriesBarDistance = options.seriesBarDistance ?? 15;
+	const offset = options.offset ?? 0;
 	const stackMode = options.stackMode ?? "accumulate";
 	const stacks = options.stackBars && stackMode !== "overlap" && stackMode !== true;
 	return {
@@ -4837,6 +5241,7 @@ function bar(options = {}) {
 						if (!labelAxis.stretch) projected[labelPos] += periodHalfLength * (horizontal ? -1 : 1);
 						projected[labelPos] += options.stackBars || options.distributeSeries ? 0 : biPol * seriesBarDistance * (horizontal ? -1 : 1);
 					}
+					projected[labelPos] += offset;
 					if (isAccumulateRelative) stack = Number(horizontal ? valueX : valueY) < 0 ? negStack : posStack;
 					const previousStack = stack[valueIndex] || zeroPoint;
 					stack[valueIndex] = previousStack - (zeroPoint - projected[counterPos]);
@@ -5037,6 +5442,7 @@ const barSpec = {
 			...seriesGroup(layer),
 			extent: extentOf.extent
 		};
+		const { below = [], above = [] } = options.layers ?? {};
 		return {
 			data,
 			axes: presetAxes(axesConfig(options)),
@@ -5048,7 +5454,9 @@ const barSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions, order),
+				...below,
 				bars,
+				...above,
 				labelLayer({
 					...axisOptions,
 					labelKind: options.horizontalBars ? "horizontalBar" : "bar"
@@ -5062,7 +5470,6 @@ const barSpec = {
 * options, without a container: the bar layer with its axes, grid and labels, horizontal or stacked as the options say. Pass it to `toScene()` to render
 * the preset chart with another renderer. Responsive options and the
 * inline size style of the root svg are left out; both need a container.
-* @experimental
 */
 function barChartConfig(data, options = {}) {
 	return presetConfig(barSpec, data, options);
@@ -5075,7 +5482,6 @@ function createBarChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a bar chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function barChart(target, data, options = {}, responsiveOptions) {
 	return createBarChart(target, data, options, responsiveOptions).handle;
@@ -5136,12 +5542,40 @@ function cssWidth(measureStyle, sliceClass) {
 	const width = measureStyle?.("stroke-width", { classes: sliceClass.split(" ") });
 	return width && /^[\d.]+px$/.test(width) ? parseFloat(width) : void 0;
 }
-const CLASS_NAMES$1 = {
+const CLASS_NAMES$4 = {
 	series: "ct-series",
 	slicePie: "ct-slice-pie",
 	sliceDonut: "ct-slice-donut",
 	label: "ct-label"
 };
+/** The line height of a pie label with line breaks, in `em`. */
+const LINE_HEIGHT = 1.2;
+/**
+* A pie label's `text` at its anchor. One line is placed with `dx`/`dy`,
+* as in 1.x. A label with line breaks gets one `tspan` per line, one line
+* height apart, the block centered on the anchor (see #546).
+*/
+function labelText(text, position, anchor, className, ctx) {
+	const lines = text.split("\n");
+	const meta = {
+		role: "label",
+		ctx
+	};
+	if (lines.length === 1) return node("text", {
+		dx: position.x,
+		dy: position.y,
+		"text-anchor": anchor
+	}, className, meta).text(text);
+	const shift = Math.round(-(lines.length - 1) * LINE_HEIGHT * 50) / 100;
+	return withFields(node("text", {
+		x: position.x,
+		y: position.y,
+		"text-anchor": anchor
+	}, className, meta), { children: lines.map((line, index) => node("tspan", {
+		x: position.x,
+		dy: `${index ? LINE_HEIGHT : shift}em`
+	}).text(line)) });
+}
 /**
 * Creates a layer that draws a flat series as pie or donut slices with
 * labels, in the markup of the 1.x pie chart (a `g.ct-series` per slice,
@@ -5163,14 +5597,13 @@ const CLASS_NAMES$1 = {
 *   className: 'ct-chart-donut'
 * });
 * ```
-* @experimental
 */
 function pie(options = {}) {
 	const classNames = {
-		...CLASS_NAMES$1,
+		...CLASS_NAMES$4,
 		...options.classNames
 	};
-	const labelInterpolationFnc = options.labelInterpolationFnc ?? ((value) => value);
+	const transform = labelTransformOf(options);
 	return {
 		type: "pie",
 		chartType: options.donut ? "donut" : "pie",
@@ -5266,7 +5699,7 @@ function pie(options = {}) {
 						y: center.y
 					} : polarToCartesian(center.x, center.y, labelRadius, startAngle + (endAngle - startAngle) / 2);
 					const rawValue = labels && !isFalseyButZero(labels[index]) ? labels[index] : values[index];
-					const interpolated = labelInterpolationFnc(rawValue, index);
+					const interpolated = transform(rawValue, index);
 					if (interpolated || interpolated === 0) {
 						const text = String(interpolated);
 						if (options.preventOverlappingLabelOffset) {
@@ -5274,24 +5707,17 @@ function pie(options = {}) {
 							labelPositions.forEach((item) => moveLabel(labelPosition, item, options.preventOverlappingLabelOffset, length));
 							labelPositions.push(labelPosition);
 						}
-						labelNodes.push(node("text", {
-							dx: labelPosition.x,
-							dy: labelPosition.y,
-							"text-anchor": determineAnchorPosition(center, labelPosition, options.labelDirection ?? "neutral")
-						}, classNames.label, {
-							role: "label",
-							ctx: {
-								kind: "pie",
-								index,
-								seriesIndex: index,
-								valueIndex: 0,
-								text,
-								series,
-								meta: seriesMeta,
-								x: labelPosition.x,
-								y: labelPosition.y
-							}
-						}).text(text));
+						labelNodes.push(labelText(text, labelPosition, determineAnchorPosition(center, labelPosition, options.labelDirection ?? "neutral"), classNames.label, {
+							kind: "pie",
+							index,
+							seriesIndex: index,
+							valueIndex: 0,
+							text,
+							series,
+							meta: seriesMeta,
+							x: labelPosition.x,
+							y: labelPosition.y
+						}));
 					}
 				}
 				startAngle = endAngle;
@@ -5338,6 +5764,7 @@ const pieSpec = {
 	defaults: pieDefaults,
 	config(data, preset) {
 		const options = preset;
+		const { below = [], above = [] } = preset.layers ?? {};
 		return {
 			data,
 			coordinates: "polar",
@@ -5346,20 +5773,25 @@ const pieSpec = {
 			height: options.height,
 			viewBox: options.viewBox,
 			className: options.donut ? options.classNames.chartDonut : options.classNames.chartPie,
-			layers: [pie({
-				startAngle: options.startAngle,
-				total: options.total,
-				donut: options.donut,
-				donutWidth: options.donutWidth,
-				showLabel: options.showLabel,
-				labelOffset: options.labelOffset,
-				labelPosition: options.labelPosition,
-				labelInterpolationFnc: options.labelInterpolationFnc,
-				labelDirection: options.labelDirection,
-				ignoreEmptyValues: options.ignoreEmptyValues,
-				preventOverlappingLabelOffset: options.preventOverlappingLabelOffset,
-				classNames: options.classNames
-			})]
+			layers: [
+				...below,
+				pie({
+					startAngle: options.startAngle,
+					total: options.total,
+					donut: options.donut,
+					donutWidth: options.donutWidth,
+					showLabel: options.showLabel,
+					labelOffset: options.labelOffset,
+					labelPosition: options.labelPosition,
+					labelTransform: options.labelTransform,
+					labelInterpolationFnc: options.labelInterpolationFnc,
+					labelDirection: options.labelDirection,
+					ignoreEmptyValues: options.ignoreEmptyValues,
+					preventOverlappingLabelOffset: options.preventOverlappingLabelOffset,
+					classNames: options.classNames
+				}),
+				...above
+			]
 		};
 	}
 };
@@ -5368,7 +5800,6 @@ const pieSpec = {
 * options, without a container: the pie layer with its labels. Pass it to `toScene()` to render
 * the preset chart with another renderer. Responsive options and the
 * inline size style of the root svg are left out; both need a container.
-* @experimental
 */
 function pieChartConfig(data, options = {}) {
 	return presetConfig(pieSpec, data, options);
@@ -5381,7 +5812,6 @@ function createPieChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a pie or donut chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function pieChart(target, data, options = {}, responsiveOptions) {
 	return createPieChart(target, data, options, responsiveOptions).handle;
@@ -5693,7 +6123,6 @@ var interpolation_exports = /* @__PURE__ */ __exportAll({
 * // The color of series `c`, the third.
 * export const third = seriesColors[2];
 * ```
-* @experimental
 */
 const seriesColors = [
 	"#d70206",
@@ -5715,16 +6144,22 @@ const seriesColors = [
 //#endregion
 //#region src/render/string.ts
 const escape = (value) => String(value).replace(/[&<>"']/g, (char) => escapingMap[char]);
+const nameStart = "A-Z_:a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
+const xmlName = new RegExp(`^[${nameStart}][${nameStart}\\-.0-9\\u00B7\\u0300-\\u036F\\u203F\\u2040]*$`);
+function checked(name, kind) {
+	if (!xmlName.test(name)) throw new Error(`Chartist: "${name}" is not a valid ${kind} name`);
+	return name;
+}
 function attributes(current, position) {
 	const parts = [];
 	if (position === "root") parts.push(`xmlns="${namespaces.svg}"`, `xmlns:ct="${namespaces.ct}"`);
 	else if (position === "html-root") parts.push(`xmlns="${namespaces.xhtml}"`);
 	if (current.classes.length) parts.push(`class="${escape(current.classes.join(" "))}"`);
-	for (const [name, value] of Object.entries(current.attrs)) if (name !== "xmlns") parts.push(`${name}="${escape(value)}"`);
+	for (const [name, value] of Object.entries(current.attrs)) if (name !== "xmlns") parts.push(`${checked(name, "attribute")}="${escape(value)}"`);
 	return parts.length ? ` ${parts.join(" ")}` : "";
 }
 function serialize$1(current, position) {
-	const open = `<${current.name}${attributes(current, position)}`;
+	const open = `<${checked(current.name, "element")}${attributes(current, position)}`;
 	const childPosition = current.name === "foreignObject" ? "html-root" : "other";
 	const content = (current.content === void 0 ? "" : escape(current.content)) + current.children.map((child) => serialize$1(child, childPosition)).join("");
 	return content ? `${open}>${content}</${current.name}>` : `${open}/>`;
@@ -5770,7 +6205,6 @@ function serialize$1(current, position) {
 *   return renderToString(scene);
 * }
 * ```
-* @experimental
 */
 function renderToString(scene) {
 	return serialize$1(scene, "root");
@@ -5833,7 +6267,6 @@ function unavailable(method) {
 *
 * export const markup = renderToString(scene);
 * ```
-* @experimental
 */
 function toScene(config, size) {
 	const emitter = createPhaseEmitter();
@@ -5855,6 +6288,548 @@ function toScene(config, size) {
 	}).scene;
 }
 //#endregion
+//#region src/layers/band.ts
+const CLASS_NAMES$3 = {
+	band: "ct-band",
+	area: "ct-band-area",
+	inBand: "ct-in-band",
+	outBand: "ct-out-band"
+};
+/** The series an edge follows, if it's a series. */
+function selectorOf(edge) {
+	return typeof edge === "number" || isValues(edge) ? void 0 : typeof edge === "string" ? edge : edge.series;
+}
+function isValues(edge) {
+	return Array.isArray(edge);
+}
+/** An edge's own values, normalized like a series' values. */
+function normalizedValues(values) {
+	return values.map((value) => isNumeric(value) ? { y: Number(value) } : value && typeof value === "object" ? value : void 0);
+}
+/** The value of a normalized value along Y, or `undefined` for a hole. */
+function yOf(value) {
+	const y = value !== null && typeof value === "object" ? value.y : value;
+	return isNumeric(y) ? Number(y) : void 0;
+}
+function xOf(value) {
+	return value !== null && typeof value === "object" ? value.x : void 0;
+}
+/**
+* The position of a series in the layer's data: the layer gets only the
+* series it selects, with their chart-wide indexes in `seriesIndexes`.
+*/
+function localIndex(selector, context) {
+	const { data, seriesIndexes } = context;
+	if (typeof selector === "string") return data.series.findIndex((series) => series.name === selector);
+	return seriesIndexes ? seriesIndexes.indexOf(selector) : selector;
+}
+function chartIndex(selector, context) {
+	const index = localIndex(selector, context);
+	return context.seriesIndexes?.[index] ?? index;
+}
+/**
+* Works out the band's edges from the data in the context.
+* @param constant Changes a constant edge before it's used, e.g. to keep it
+* within the axis range for drawing.
+*/
+function bandEdges(options, context, constant = (value) => value) {
+	const all = context.normalized?.series ?? [];
+	const seriesOf = (selector) => all[localIndex(selector, context)] ?? [];
+	if (options.series) {
+		const group = options.series.map(seriesOf);
+		return {
+			constant: false,
+			length: Math.max(0, ...group.map((values) => values.length)),
+			at(valueIndex) {
+				const defined = group.map((values) => values[valueIndex]).filter((value) => yOf(value) !== void 0);
+				if (defined.length === 0) return;
+				const ys = defined.map((value) => yOf(value));
+				return {
+					x: xOf(defined[0]),
+					low: Math.min(...ys),
+					high: Math.max(...ys)
+				};
+			}
+		};
+	}
+	const edge = (option) => {
+		if (option !== void 0 && isValues(option)) return { values: normalizedValues(option) };
+		const selector = option === void 0 ? void 0 : selectorOf(option);
+		return selector === void 0 ? { value: constant(option) } : { values: seriesOf(selector) };
+	};
+	const low = edge(options.low);
+	const high = edge(options.high);
+	const lengths = [low, high].flatMap((e) => "values" in e ? [e.values.length] : []);
+	return {
+		constant: lengths.length === 0,
+		length: Math.max(0, ...lengths),
+		at(valueIndex) {
+			const lowValue = "values" in low ? low.values[valueIndex] : void 0;
+			const highValue = "values" in high ? high.values[valueIndex] : void 0;
+			const lowY = "value" in low ? low.value : yOf(lowValue);
+			const highY = "value" in high ? high.value : yOf(highValue);
+			if (lowY === void 0 || highY === void 0) return;
+			return {
+				x: xOf(lowValue) ?? xOf(highValue),
+				low: lowY,
+				high: highY
+			};
+		}
+	};
+}
+/** The value a mark compares with the band: `y`, else `x`. */
+function markValue(value) {
+	if (value !== null && typeof value === "object") {
+		const { x, y } = value;
+		return isNumeric(y) ? Number(y) : isNumeric(x) ? Number(x) : void 0;
+	}
+	return isNumeric(value) ? Number(value) : void 0;
+}
+function edgeContext(option, context) {
+	if (option === void 0) return;
+	if (isValues(option)) return { values: normalizedValues(option).map(yOf) };
+	const selector = selectorOf(option);
+	return selector === void 0 ? { value: option } : { seriesIndex: chartIndex(selector, context) };
+}
+/**
+* Creates a layer that fills the area between a low and a high edge
+* (`g.ct-band` with a `path.ct-band-area` per piece; the band breaks at
+* holes). Each edge is a constant value, values of its own (one per
+* label) or a series, or `series` names a group and the band covers their
+* minimum to their maximum at each value index. Constants and own values
+* widen the Y axis to include them. List the band
+* before the series layers to draw it behind them. It needs an X and a Y
+* axis, from {@link cartesianAxes}.
+*
+* @example
+* ```ts
+* import {
+*   autoScaleAxis,
+*   axisGrid,
+*   axisLabels,
+*   band,
+*   cartesianAxes,
+*   chart,
+*   line,
+*   stepAxis
+* } from 'chartist';
+*
+* const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+*
+* chart('#chart', {
+*   data: {
+*     labels: days,
+*     series: [{ name: 'visits', data: [12, 9, 7, 8, 5] }]
+*   },
+*   axes: cartesianAxes([
+*     { id: 'day', side: 'bottom', type: stepAxis(), ticks: days },
+*     { id: 'count', side: 'left', type: autoScaleAxis(), low: 0 }
+*   ]),
+*   layers: [
+*     axisGrid(),
+*     band({ low: 6, high: 10, mark: true }),
+*     line(),
+*     axisLabels()
+*   ]
+* });
+* ```
+*/
+function band(options) {
+	const hasEdges = options.low !== void 0 || options.high !== void 0;
+	if (options.series && hasEdges) throw new Error("Layer \"band\": series can't be combined with low and high");
+	if (!options.series && (options.low === void 0 || options.high === void 0)) throw new Error("Layer \"band\": the band needs low and high, or series");
+	const classNames = {
+		...CLASS_NAMES$3,
+		...options.classNames
+	};
+	const edgeSelectors = options.series ? void 0 : [options.low, options.high].flatMap((edge) => {
+		const selector = edge === void 0 ? void 0 : selectorOf(edge);
+		return selector === void 0 ? [] : [selector];
+	});
+	const ownValues = options.series ? [] : [options.low, options.high].flatMap((edge) => typeof edge === "number" ? [edge] : edge !== void 0 && isValues(edge) ? normalizedValues(edge).flatMap((value) => {
+		const y = yOf(value);
+		return y === void 0 ? [] : [y];
+	}) : []);
+	const layer = {
+		type: "band",
+		coordinates: ["cartesian"],
+		axes: {
+			x: options.x,
+			y: options.y
+		},
+		series: options.series ?? edgeSelectors,
+		extent({ axes }) {
+			return axes.y !== void 0 && ownValues.length > 0 ? { [axes.y]: {
+				low: Math.min(...ownValues),
+				high: Math.max(...ownValues)
+			} } : {};
+		},
+		compose(context) {
+			const { area, axes } = context;
+			const { x: axisX, y: axisY } = axes;
+			if (!axisX || !axisY || !context.normalized) throw new Error("Layer \"band\" needs an x and a y axis");
+			const range = axisY.range;
+			const clamp = (value) => range ? Math.min(Math.max(value, range.min), range.max) : value;
+			const edges = bandEdges(options, context, clamp);
+			let pieces;
+			const interpolation = interpolationOf(options.lineSmooth ?? true);
+			if (edges.constant) {
+				const { low, high } = edges.at(0);
+				const lowY = area.y1 - axisY.project(low);
+				const highY = area.y1 - axisY.project(high);
+				pieces = [new SvgPath(true).move(area.x1, highY).line(area.x2, highY).line(area.x2, lowY).line(area.x1, lowY)];
+			} else {
+				const upper = [];
+				const lower = [];
+				for (let valueIndex = 0; valueIndex < edges.length; valueIndex++) {
+					const at = edges.at(valueIndex);
+					upper.push(at && {
+						x: at.x,
+						y: at.high
+					});
+					lower.push(at && {
+						x: at.x,
+						y: at.low
+					});
+				}
+				const shift = centerShift(axisX, options.align);
+				const pathOf = (values) => seriesPath(values, {
+					x: axisX,
+					y: axisY
+				}, area, shift, interpolation).splitByCommand("M").filter((piece) => piece.pathElements.length > 1);
+				const lowerPieces = pathOf(lower);
+				pieces = pathOf(upper).flatMap((upperPiece, index) => {
+					const lowerPiece = lowerPieces[index];
+					if (!lowerPiece || lowerPiece.pathElements.length !== upperPiece.pathElements.length) return [];
+					const back = reversePath(lowerPiece);
+					const start = back.pathElements[0];
+					back.position(0).remove(1).line(start.x, start.y, false, start.data);
+					return [SvgPath.join([upperPiece, back], true)];
+				});
+			}
+			const edgesContext = options.series ? { series: options.series.map((s) => chartIndex(s, context)) } : {
+				low: edgeContext(options.low, context),
+				high: edgeContext(options.high, context)
+			};
+			const children = pieces.map((path) => node("path", { d: path.stringify() }, classNames.area, {
+				role: "band",
+				ctx: {
+					...edgesContext,
+					path: path.clone(),
+					smoothing: interpolation
+				}
+			}));
+			return [withFields(node("g", {}, options.className ? `${classNames.band} ${options.className}` : classNames.band), { children })];
+		}
+	};
+	if (!options.mark) return layer;
+	return {
+		...layer,
+		refine(current, context) {
+			if (current.role !== "point" && current.role !== "bar") return;
+			const value = markValue(current.ctx.value);
+			const at = bandEdges(options, context).at(current.ctx.valueIndex);
+			if (value === void 0 || !at) return;
+			const inBand = value >= Math.min(at.low, at.high) && value <= Math.max(at.low, at.high);
+			return current.addClass(inBand ? classNames.inBand : classNames.outBand);
+		}
+	};
+}
+//#endregion
+//#region src/layers/targetLine.ts
+/**
+* Target line layer: a line across the chart area at a constant value on
+* one axis, such as a goal, a limit or an average, with an optional label.
+*/
+const CLASS_NAMES$2 = {
+	line: "ct-target-line",
+	label: "ct-target-label"
+};
+/** The distance in px between a label and its line or the area's edge. */
+const LABEL_INSET = 4;
+/**
+* Creates a layer that draws a line across the chart area at a constant
+* value on one axis, such as a goal or a limit (`line.ct-target-line`).
+* On a Y axis the line is horizontal, on an X axis vertical. It can have
+* a label, drawn as SVG text (`text.ct-target-label`) next to it inside
+* the chart area, and a class, e.g. `ct-series-b` for a series' color.
+* The axis widens to include the value, unless its own `low` or `high`
+* leave it out; a line outside the axis isn't drawn. For several lines,
+* add a layer per line.
+*
+* @example
+* ```ts
+* import {
+*   autoScaleAxis,
+*   axisGrid,
+*   axisLabels,
+*   cartesianAxes,
+*   chart,
+*   line,
+*   stepAxis,
+*   targetLine
+* } from 'chartist';
+*
+* const months = ['Jan', 'Feb', 'Mar', 'Apr'];
+*
+* chart('#chart', {
+*   data: { labels: months, series: [[620, 810, 740, 930]] },
+*   axes: cartesianAxes([
+*     { id: 'month', side: 'bottom', type: stepAxis(), ticks: months },
+*     { id: 'sales', side: 'left', type: autoScaleAxis(), low: 0 }
+*   ]),
+*   layers: [
+*     axisGrid(),
+*     line(),
+*     targetLine({ value: 700, label: 'Min' }),
+*     targetLine({ value: 1000, label: 'Goal', className: 'ct-series-b' }),
+*     axisLabels()
+*   ]
+* });
+* ```
+*/
+function targetLine(options) {
+	const { value, label, className } = options;
+	if (!Number.isFinite(value)) throw new Error("Layer \"targetLine\" needs a value");
+	const classNames = {
+		...CLASS_NAMES$2,
+		...options.classNames
+	};
+	const atStart = options.labelPosition === "start";
+	return {
+		type: "targetLine",
+		coordinates: ["cartesian"],
+		series: [],
+		extent({ axes }) {
+			const id = options.axis ?? axes.y;
+			return id === void 0 ? {} : { [id]: {
+				low: value,
+				high: value
+			} };
+		},
+		compose({ area, axes, measureText }) {
+			const all = axes.all ?? [];
+			const axis = options.axis === void 0 ? all.find((candidate) => candidate.dimension === "y") : all.find((candidate) => candidate.id === options.axis);
+			if (!axis) throw new Error(options.axis === void 0 ? "Layer \"targetLine\" needs a y axis" : `Chartist: unknown axis "${options.axis}" in layer "targetLine"`);
+			const horizontal = axis.dimension === "y";
+			const relative = axis.project(value, value);
+			if (!Number.isFinite(relative) || relative < -1e-9 || relative > axis.length + 1e-9) return [];
+			const ends = horizontal ? {
+				x1: area.x1,
+				y1: area.y1 - relative,
+				x2: area.x2,
+				y2: area.y1 - relative
+			} : {
+				x1: area.x1 + relative,
+				y1: area.y2,
+				x2: area.x1 + relative,
+				y2: area.y1
+			};
+			const extra = className ? ` ${className}` : "";
+			const lineNode = node("line", ends, `${classNames.line}${extra}`, {
+				role: "targetLine",
+				ctx: {
+					axis,
+					value,
+					...label !== void 0 && { label },
+					...ends
+				}
+			});
+			if (label === void 0 || label === "") return [lineNode];
+			const labelClasses = `${classNames.label}${extra}`;
+			let position;
+			if (horizontal) position = {
+				x: atStart ? area.x1 + LABEL_INSET : area.x2 - LABEL_INSET,
+				y: ends.y1 - LABEL_INSET,
+				anchor: atStart ? "start" : "end"
+			};
+			else {
+				const fontSize = measureText(label, { classes: labelClasses.split(" ") }).fontSize ?? 12;
+				position = {
+					x: ends.x1 + LABEL_INSET,
+					y: atStart ? area.y1 - LABEL_INSET : area.y2 + LABEL_INSET + textAscent * fontSize,
+					anchor: "start"
+				};
+			}
+			return [lineNode, node("text", {
+				x: position.x,
+				y: position.y,
+				"text-anchor": position.anchor
+			}, labelClasses, {
+				role: "targetLabel",
+				ctx: {
+					axis,
+					value,
+					text: label,
+					x: position.x,
+					y: position.y
+				}
+			}).text(label)];
+		}
+	};
+}
+//#endregion
+//#region src/layers/trendLine.ts
+/**
+* Trend line layer: a least-squares straight line through each series'
+* values, drawn in the series' color.
+*/
+const CLASS_NAMES$1 = {
+	series: "ct-series",
+	line: "ct-trend-line"
+};
+/**
+* Fits a straight line through a series' values by least squares: X is
+* the value's index (`byIndex`, for step axes) or its `x`. Holes and
+* values without a number for X are skipped. Fewer than two values, or
+* values that all share one X, fit no line.
+*/
+function fit(values, byIndex) {
+	const xs = [];
+	const ys = [];
+	values.forEach((value, index) => {
+		const y = isDataHoleValue(value) ? void 0 : getMultiValue(value, "y");
+		const x = byIndex ? index : getMultiValue(value, "x");
+		if (typeof x === "number" && Number.isFinite(x) && Number.isFinite(y)) {
+			xs.push(x);
+			ys.push(y);
+		}
+	});
+	if (xs.length < 2) return;
+	const mean = (list) => list.reduce((sum, value) => sum + value, 0) / list.length;
+	const meanX = mean(xs);
+	const meanY = mean(ys);
+	let covariance = 0;
+	let variance = 0;
+	xs.forEach((x, i) => {
+		covariance += (x - meanX) * (ys[i] - meanY);
+		variance += (x - meanX) ** 2;
+	});
+	if (variance === 0) return;
+	const slope = covariance / variance;
+	return {
+		slope,
+		intercept: meanY - slope * meanX,
+		x1: Math.min(...xs),
+		x2: Math.max(...xs)
+	};
+}
+/** True when every value that isn't a hole has a number for X. */
+function hasX(values) {
+	const present = values.filter((value) => !isDataHoleValue(value));
+	return present.length > 0 && present.every((value) => typeof getMultiValue(value, "x") === "number");
+}
+/**
+* Creates a layer that draws a trend line for each series: the straight
+* line that fits its values best (least squares), from its smallest to its
+* largest X, as a `line.ct-trend-line` in a series group
+* (`g.ct-series.ct-series-a`), so it takes the series' color. On a step
+* axis X is the value's index, on a scale axis the value's `x`. Holes are
+* skipped, and a series with fewer than two values gets no line. The Y
+* axis widens to include the line's ends. Add it next to the {@link line}
+* or {@link bar} layer that draws the values.
+*
+* @example
+* ```ts
+* import {
+*   autoScaleAxis,
+*   axisGrid,
+*   axisLabels,
+*   cartesianAxes,
+*   chart,
+*   line,
+*   stepAxis,
+*   trendLine
+* } from 'chartist';
+*
+* const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+*
+* chart('#chart', {
+*   data: {
+*     labels: months,
+*     series: [{ name: 'sales', data: [620, 810, 740, 930, 880, 1020] }]
+*   },
+*   axes: cartesianAxes([
+*     { id: 'month', side: 'bottom', type: stepAxis(), ticks: months },
+*     { id: 'eur', side: 'left', type: autoScaleAxis() }
+*   ]),
+*   layers: [axisGrid(), line(), trendLine(), axisLabels()]
+* });
+* ```
+*/
+function trendLine(options = {}) {
+	const classNames = {
+		...CLASS_NAMES$1,
+		...options.classNames
+	};
+	return {
+		type: "trendLine",
+		coordinates: ["cartesian"],
+		axes: {
+			x: options.x,
+			y: options.y
+		},
+		series: options.series,
+		extent({ normalized, axes }) {
+			if (axes.y === void 0) return {};
+			const ends = normalized.series.flatMap((values) => {
+				const fitted = fit(values, !hasX(values));
+				return fitted ? [fitted.slope * fitted.x1 + fitted.intercept, fitted.slope * fitted.x2 + fitted.intercept] : [];
+			});
+			return ends.length > 0 ? { [axes.y]: {
+				low: Math.min(...ends),
+				high: Math.max(...ends)
+			} } : {};
+		},
+		compose({ data, area, axes, normalized, seriesIndexes }) {
+			const { x: axisX, y: axisY } = axes;
+			if (!axisX || !axisY || !normalized) throw new Error("Layer \"trendLine\" needs an x and a y axis");
+			const byIndex = axisX.kind === "step";
+			const shift = centerShift(axisX, options.align);
+			return data.series.flatMap((series, localIndex) => {
+				const fitted = fit(normalized.series[localIndex], byIndex);
+				if (!fitted) return [];
+				const seriesIndex = seriesIndexes?.[localIndex] ?? localIndex;
+				const { slope, intercept } = fitted;
+				const at = (x) => ({
+					x: area.x1 + shift + axisX.project(x, x),
+					y: area.y1 - axisY.project(slope * x + intercept)
+				});
+				const start = at(fitted.x1);
+				const end = at(fitted.x2);
+				const ends = {
+					x1: start.x,
+					y1: start.y,
+					x2: end.x,
+					y2: end.y
+				};
+				const seriesContext = {
+					series: {
+						name: series.name,
+						className: series.className,
+						meta: series.meta,
+						data: series.values
+					},
+					seriesIndex,
+					meta: series.meta
+				};
+				return [withFields(node("g", {}, `${classNames.series} ${series.className || `${classNames.series}-${alphaNumerate(seriesIndex)}`}`, {
+					role: "series",
+					ctx: seriesContext
+				}), { children: [node("line", ends, classNames.line, {
+					role: "trendLine",
+					ctx: {
+						seriesIndex,
+						slope,
+						intercept,
+						...ends
+					}
+				})] })];
+			});
+		}
+	};
+}
+//#endregion
 //#region src/layers/axes.ts
 const CLASS_NAMES = {
 	grid: "ct-grid",
@@ -5880,7 +6855,7 @@ function drawnOptions(axis) {
 		},
 		showLabel: options.showLabel ?? true,
 		showGrid: options.showGrid ?? true,
-		labelInterpolationFnc: options.labelInterpolationFnc ?? ((value) => value)
+		labelTransform: labelTransformOf(options)
 	};
 }
 function selectedAxes(context, ids) {
@@ -5955,7 +6930,6 @@ function nodesOf(axis, context, classNames, svgLabel) {
 * ```
 * @param options The axes to draw and their classes; `background` adds a
 *   `rect.ct-grid-background` over the chart area, behind the lines.
-* @experimental
 */
 function axisGrid(options = {}) {
 	const classNames = {
@@ -6010,7 +6984,6 @@ function axisGrid(options = {}) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function axisLabels(options = {}) {
 	const classNames = {
@@ -6022,12 +6995,15 @@ function axisLabels(options = {}) {
 		coordinates: ["cartesian"],
 		series: [],
 		compose(context) {
-			const svgLabel = (options.labels ?? context.labels) === "svg" ? svgLabels(context.measureText, "line", options.align) : void 0;
-			return [withFields(node("g", {}, classNames.labelGroup), { children: selectedAxes(context, options.axes).flatMap((axis) => nodesOf(axis, context, classNames, svgLabel).labels) })];
+			const svg = (options.labels ?? context.labels) === "svg";
+			return [withFields(node("g", {}, classNames.labelGroup), { children: selectedAxes(context, options.axes).flatMap((axis) => nodesOf(axis, context, classNames, svg ? svgLabels(context.measureText, "line", {
+				...options.align,
+				...axis.options.labelAlign
+			}) : void 0).labels) })];
 		}
 	};
 }
 //#endregion
-export { AutoScaleAxis, Axis, BarChart, BaseChart, EPSILON, EventEmitter, FixedScaleAxis, interpolation_exports as Interpolation, LineChart, PieChart, StepAxis, Svg, SvgList, SvgPath, alphaNumerate, autoScaleAxis, axisGrid, axisLabels, axisUnits, bar, barChart, barChartConfig, cartesianAxes, chart, container, createChartRect, createGrid, createGridBackground, createLabel, createSvg, deserialize, determineAnchorPosition, domRenderer, each, easings, ensureUnit, escapingMap, estimateText, extend, findAll, fixedScaleAxis, getBounds, getHighLow, getMetaData, getMultiValue, getNumberOrUndefined, getSeriesOption, isArrayOfArrays, isArrayOfSeries, isDataHoleValue, isFalseyButZero, isMultiValue, isNumeric, line, lineChart, lineChartConfig, mapNodes, namespaces, node, noop, normalizeData, normalizePadding, optionsProvider, orderOfMagnitude, pie, pieChart, pieChartConfig, polarToCartesian, precision, projectLength, quantity, renderToString, responsive, rho, roundWithPrecision, safeHasProperty, serialMap, serialize, seriesColors, splitIntoSegments, stepAxis, sum, textAscent, times, toScene, withOptions };
+export { AutoScaleAxis, Axis, BarChart, BaseChart, EPSILON, EventEmitter, FixedScaleAxis, interpolation_exports as Interpolation, LineChart, PieChart, StepAxis, Svg, SvgList, SvgPath, alphaNumerate, applyAttribute, autoScaleAxis, axisGrid, axisLabels, axisUnits, band, bar, barChart, barChartConfig, cartesianAxes, chart, container, createChartRect, createGrid, createGridBackground, createLabel, createSvg, deserialize, determineAnchorPosition, domRenderer, each, easings, ensureUnit, escapingMap, estimateText, extend, findAll, fixedScaleAxis, getBounds, getHighLow, getMetaData, getMultiValue, getNumberOrUndefined, getSeriesOption, isArrayOfArrays, isArrayOfSeries, isDataHoleValue, isFalseyButZero, isMultiValue, isNumeric, keySplinesOf, line, lineChart, lineChartConfig, mapNodes, namespaces, node, noop, normalizeData, normalizePadding, optionsProvider, orderOfMagnitude, pie, pieChart, pieChartConfig, polarToCartesian, precision, projectLength, quantity, renderElement, renderToString, responsive, rho, roundWithPrecision, safeHasProperty, sampleEasing, serialMap, serialize, seriesColors, splitIntoSegments, stepAxis, sum, targetLine, textAscent, times, toScene, trendLine, withOptions };
 
 //# sourceMappingURL=index.js.map