chartist 2.0.0-rc.2 → 2.0.0

package/dist/index.cjs

@@ -534,6 +534,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
@@ -782,6 +797,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
@@ -801,13 +970,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";
@@ -921,7 +1099,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]));
@@ -1506,6 +1685,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
@@ -2032,63 +2270,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
@@ -2103,7 +2335,7 @@ const DEFAULTS = {
 	showArea: false,
 	areaBase: 0
 };
-const CLASS_NAMES$2 = {
+const CLASS_NAMES$5 = {
 	series: "ct-series",
 	line: "ct-line",
 	point: "ct-point",
@@ -2165,11 +2397,10 @@ function seriesOption(series, options, key) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function line(options = {}) {
 	const classNames = {
-		...CLASS_NAMES$2,
+		...CLASS_NAMES$5,
 		...options.classNames
 	};
 	return {
@@ -2184,7 +2415,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) => {
@@ -2194,18 +2425,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,
@@ -2243,7 +2467,8 @@ function line(options = {}) {
 					ctx: {
 						...seriesContext,
 						values,
-						path: path.clone()
+						path: path.clone(),
+						smoothing
 					}
 				}), ...children];
 				if (seriesOption(series, options, "showArea") && axisY.range) {
@@ -2252,14 +2477,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];
 					});
@@ -2668,7 +2894,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) => ({
@@ -2735,7 +2960,6 @@ const valueOf = (value, dimension) => Number(getMultiValue(value, dimension));
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function stepAxis() {
 	return {
@@ -2794,7 +3018,6 @@ function stepAxis() {
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function autoScaleAxis() {
 	return {
@@ -2854,7 +3077,6 @@ function autoScaleAxis() {
 *   layers: [axisGrid(), line({ showLine: false }), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function fixedScaleAxis() {
 	return {
@@ -2988,8 +3210,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();
@@ -3056,7 +3279,6 @@ function findAll(scene, query = {}) {
 * });
 * const markup = mapped ? renderToString(mapped) : '';
 * ```
-* @experimental
 */
 function mapNodes(scene, mapper) {
 	let children = scene.children;
@@ -3201,10 +3423,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 ? {
@@ -3215,7 +3436,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,
@@ -3231,12 +3452,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) {
@@ -3264,6 +3511,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 {
@@ -3272,10 +3520,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
 	};
 }
 /**
@@ -3283,7 +3532,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;
 /**
@@ -3301,7 +3549,6 @@ const textAscent = .85;
 *   return { ...size, width: size.width * 1.1 };
 * };
 * ```
-* @experimental
 */
 const estimateText = (text, options = {}) => {
 	const fontSize = options.fontSize ?? 12;
@@ -3313,24 +3560,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. */
@@ -3344,7 +3629,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(" "));
@@ -3378,8 +3663,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
@@ -3405,7 +3692,6 @@ function measureInDocument(document) {
 *   renderer
 * });
 * ```
-* @experimental
 */
 function domRenderer() {
 	return {
@@ -3413,7 +3699,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);
@@ -3435,6 +3721,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
@@ -3487,7 +3802,6 @@ function withChartTypeClass(config) {
 *   { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
 * );
 * ```
-* @experimental
 */
 function withOptions(plugin, options) {
 	return [plugin, options];
@@ -3553,16 +3867,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 = {}) {
@@ -3663,7 +3998,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);
@@ -3689,6 +4023,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;
@@ -3696,7 +4036,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;
@@ -3726,7 +4066,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,
@@ -3742,9 +4082,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,
@@ -3757,18 +4121,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;
@@ -3784,7 +4165,7 @@ function chart(target, config) {
 			previousConfig,
 			currentConfig: effective
 		});
-		render("resolve");
+		render("resolve", "responsive");
 	}
 	/** (Re)creates the watcher of the responsive entries. */
 	function watch() {
@@ -3803,7 +4184,7 @@ function chart(target, config) {
 			};
 			if ("responsive" in changes) watch();
 			else resolveResponsive();
-			render("resolve");
+			render("resolve", "update");
 			return handle;
 		},
 		detach() {
@@ -3822,8 +4203,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)
 	};
@@ -3839,15 +4227,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
@@ -3875,7 +4263,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 = [];
@@ -3970,6 +4358,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
@@ -4068,13 +4462,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({
@@ -4191,7 +4587,6 @@ function watchResponsive(entries, host, onChange, observeResize = false) {
 *   ])
 * });
 * ```
-* @experimental
 */
 function responsive(entries) {
 	return {
@@ -4210,13 +4605,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
 	};
 }
@@ -4244,10 +4644,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;
 			}))];
 		}
 	};
@@ -4294,7 +4694,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,
@@ -4302,7 +4702,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. */
@@ -4358,7 +4759,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;
@@ -4447,6 +4849,7 @@ const lineSpec = {
 	config(data, preset) {
 		const options = preset;
 		const axisOptions = options;
+		const { below = [], above = [] } = options.layers ?? {};
 		return {
 			data,
 			axes: presetAxes(axesConfig$1(options)),
@@ -4458,6 +4861,7 @@ const lineSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions),
+				...below,
 				seriesGroup(line({
 					lineSmooth: options.lineSmooth,
 					showPoint: options.showPoint,
@@ -4468,6 +4872,7 @@ const lineSpec = {
 					reverseData: options.reverseData,
 					classNames: options.classNames
 				})),
+				...above,
 				labelLayer(axisOptions)
 			]
 		};
@@ -4490,7 +4895,6 @@ const lineSpec = {
 *   toScene(config, { width: 600, height: 300 })
 * );
 * ```
-* @experimental
 */
 function lineChartConfig(data, options = {}) {
 	return presetConfig(lineSpec, data, options);
@@ -4503,7 +4907,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;
@@ -4575,6 +4978,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)));
 			}
 		};
@@ -4768,7 +5172,6 @@ function rawSeries(series) {
 *   className: 'ct-chart-bar'
 * });
 * ```
-* @experimental
 */
 function bar(options = {}) {
 	const classNames = {
@@ -4778,6 +5181,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 {
@@ -4838,6 +5242,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]);
@@ -5038,6 +5443,7 @@ const barSpec = {
 			...seriesGroup(layer),
 			extent: extentOf.extent
 		};
+		const { below = [], above = [] } = options.layers ?? {};
 		return {
 			data,
 			axes: presetAxes(axesConfig(options)),
@@ -5049,7 +5455,9 @@ const barSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions, order),
+				...below,
 				bars,
+				...above,
 				labelLayer({
 					...axisOptions,
 					labelKind: options.horizontalBars ? "horizontalBar" : "bar"
@@ -5063,7 +5471,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);
@@ -5076,7 +5483,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;
@@ -5137,12 +5543,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,
@@ -5164,14 +5598,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",
@@ -5267,7 +5700,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) {
@@ -5275,24 +5708,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;
@@ -5339,6 +5765,7 @@ const pieSpec = {
 	defaults: pieDefaults,
 	config(data, preset) {
 		const options = preset;
+		const { below = [], above = [] } = preset.layers ?? {};
 		return {
 			data,
 			coordinates: "polar",
@@ -5347,20 +5774,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
+			]
 		};
 	}
 };
@@ -5369,7 +5801,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);
@@ -5382,7 +5813,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;
@@ -5694,7 +6124,6 @@ var interpolation_exports = /* @__PURE__ */ __exportAll({
 * // The color of series `c`, the third.
 * export const third = seriesColors[2];
 * ```
-* @experimental
 */
 const seriesColors = [
 	"#d70206",
@@ -5716,16 +6145,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}/>`;
@@ -5771,7 +6206,6 @@ function serialize$1(current, position) {
 *   return renderToString(scene);
 * }
 * ```
-* @experimental
 */
 function renderToString(scene) {
 	return serialize$1(scene, "root");
@@ -5834,7 +6268,6 @@ function unavailable(method) {
 *
 * export const markup = renderToString(scene);
 * ```
-* @experimental
 */
 function toScene(config, size) {
 	const emitter = createPhaseEmitter();
@@ -5856,6 +6289,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",
@@ -5881,7 +6856,7 @@ function drawnOptions(axis) {
 		},
 		showLabel: options.showLabel ?? true,
 		showGrid: options.showGrid ?? true,
-		labelInterpolationFnc: options.labelInterpolationFnc ?? ((value) => value)
+		labelTransform: labelTransformOf(options)
 	};
 }
 function selectedAxes(context, ids) {
@@ -5956,7 +6931,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 = {
@@ -6011,7 +6985,6 @@ function axisGrid(options = {}) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function axisLabels(options = {}) {
 	const classNames = {
@@ -6023,8 +6996,11 @@ 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) })];
 		}
 	};
 }
@@ -6049,10 +7025,12 @@ exports.Svg = Svg;
 exports.SvgList = SvgList;
 exports.SvgPath = SvgPath;
 exports.alphaNumerate = alphaNumerate;
+exports.applyAttribute = applyAttribute;
 exports.autoScaleAxis = autoScaleAxis;
 exports.axisGrid = axisGrid;
 exports.axisLabels = axisLabels;
 exports.axisUnits = axisUnits;
+exports.band = band;
 exports.bar = bar;
 exports.barChart = barChart;
 exports.barChartConfig = barChartConfig;
@@ -6087,6 +7065,7 @@ exports.isDataHoleValue = isDataHoleValue;
 exports.isFalseyButZero = isFalseyButZero;
 exports.isMultiValue = isMultiValue;
 exports.isNumeric = isNumeric;
+exports.keySplinesOf = keySplinesOf;
 exports.line = line;
 exports.lineChart = lineChart;
 exports.lineChartConfig = lineChartConfig;
@@ -6105,20 +7084,24 @@ exports.polarToCartesian = polarToCartesian;
 exports.precision = precision;
 exports.projectLength = projectLength;
 exports.quantity = quantity;
+exports.renderElement = renderElement;
 exports.renderToString = renderToString;
 exports.responsive = responsive;
 exports.rho = rho;
 exports.roundWithPrecision = roundWithPrecision;
 exports.safeHasProperty = safeHasProperty;
+exports.sampleEasing = sampleEasing;
 exports.serialMap = serialMap;
 exports.serialize = serialize;
 exports.seriesColors = seriesColors;
 exports.splitIntoSegments = splitIntoSegments;
 exports.stepAxis = stepAxis;
 exports.sum = sum;
+exports.targetLine = targetLine;
 exports.textAscent = textAscent;
 exports.times = times;
 exports.toScene = toScene;
+exports.trendLine = trendLine;
 exports.withOptions = withOptions;
 
 //# sourceMappingURL=index.cjs.map