chartist 2.0.0-rc.3 → 2.0.0

package/dist/index.cjs

@@ -797,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
@@ -816,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";
@@ -2234,7 +2397,6 @@ function seriesOption(series, options, key) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function line(options = {}) {
 	const classNames = {
@@ -2263,10 +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 smoothing = interpolationOf(seriesOption(series, options, "lineSmooth"));
 				const path = seriesPath(values, {
 					x: axisX,
 					y: axisY
-				}, area, shift, interpolationOf(seriesOption(series, options, "lineSmooth")), (valueIndex) => getMetaData(series, valueIndex));
+				}, area, shift, smoothing, (valueIndex) => getMetaData(series, valueIndex));
 				const seriesContext = {
 					series,
 					seriesIndex,
@@ -2304,7 +2467,8 @@ function line(options = {}) {
 					ctx: {
 						...seriesContext,
 						values,
-						path: path.clone()
+						path: path.clone(),
+						smoothing
 					}
 				}), ...children];
 				if (seriesOption(series, options, "showArea") && axisY.range) {
@@ -2313,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];
 					});
@@ -2729,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) => ({
@@ -2796,7 +2960,6 @@ const valueOf = (value, dimension) => Number(getMultiValue(value, dimension));
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function stepAxis() {
 	return {
@@ -2855,7 +3018,6 @@ function stepAxis() {
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function autoScaleAxis() {
 	return {
@@ -2915,7 +3077,6 @@ function autoScaleAxis() {
 *   layers: [axisGrid(), line({ showLine: false }), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function fixedScaleAxis() {
 	return {
@@ -3049,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();
@@ -3117,7 +3279,6 @@ function findAll(scene, query = {}) {
 * });
 * const markup = mapped ? renderToString(mapped) : '';
 * ```
-* @experimental
 */
 function mapNodes(scene, mapper) {
 	let children = scene.children;
@@ -3262,7 +3423,7 @@ 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) {
+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]));
 	const layers = config.layers.map((layer, layerIndex) => {
 		const binding = bindings[layerIndex] ?? {};
@@ -3292,10 +3453,16 @@ function compose(emitter, config, data, area, measureText, axes = {}, normalized
 			labels,
 			measureStyle
 		};
+		const nodes = layer.compose(context).map((top) => assignKeys(top, layerIndex));
+		drawn.push({
+			nodes: [],
+			context
+		});
 		return {
 			layer,
 			context,
-			nodes: layer.compose(context).map((top) => assignKeys(top, layerIndex))
+			nodes,
+			layerIndex
 		};
 	});
 	const refiners = layers.flatMap(({ layer, context }) => layer.refine ? [{
@@ -3310,9 +3477,12 @@ function compose(emitter, config, data, area, measureText, axes = {}, normalized
 		}) : refined;
 	}, current);
 	const composed = [];
-	for (const { nodes } of layers) for (const top of nodes) {
+	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) composed.push(result);
+		if (result) {
+			drawn[layerIndex].nodes.push(result);
+			composed.push(result);
+		}
 	}
 	return composed;
 }
@@ -3341,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 {
@@ -3349,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
 	};
 }
 /**
@@ -3360,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;
 /**
@@ -3378,7 +3549,6 @@ const textAscent = .85;
 *   return { ...size, width: size.width * 1.1 };
 * };
 * ```
-* @experimental
 */
 const estimateText = (text, options = {}) => {
 	const fontSize = options.fontSize ?? 12;
@@ -3390,7 +3560,27 @@ 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 (name === "style") setStyle(element, String(value));
@@ -3398,17 +3588,34 @@ function setAttribute(element, name, 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. */
@@ -3456,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
@@ -3483,7 +3692,6 @@ function measureInDocument(document) {
 *   renderer
 * });
 * ```
-* @experimental
 */
 function domRenderer() {
 	return {
@@ -3491,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);
@@ -3513,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
@@ -3565,7 +3802,6 @@ function withChartTypeClass(config) {
 *   { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
 * );
 * ```
-* @experimental
 */
 function withOptions(plugin, options) {
 	return [plugin, options];
@@ -3631,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 = {}) {
@@ -3741,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);
@@ -3767,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;
@@ -3774,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;
@@ -3820,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,
@@ -3835,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", {
+		const event = {
 			scene,
-			output
-		});
-		const elementOf = output.elementOf ?? (() => void 0);
-		emitter.notify("mount", {
-			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;
@@ -3862,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() {
@@ -3881,7 +4184,7 @@ function chart(target, config) {
 			};
 			if ("responsive" in changes) watch();
 			else resolveResponsive();
-			render("resolve");
+			render("resolve", "update");
 			return handle;
 		},
 		detach() {
@@ -3900,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)
 	};
@@ -3917,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
@@ -4158,7 +4468,9 @@ function svgLabels(measureText, kind, override = {}) {
 *   ]
 * );
 * ```
-* @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({
@@ -4275,7 +4587,6 @@ function watchResponsive(entries, host, onChange, observeResize = false) {
 *   ])
 * });
 * ```
-* @experimental
 */
 function responsive(entries) {
 	return {
@@ -4383,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,
@@ -4391,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. */
@@ -4447,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;
@@ -4582,7 +4895,6 @@ const lineSpec = {
 *   toScene(config, { width: 600, height: 300 })
 * );
 * ```
-* @experimental
 */
 function lineChartConfig(data, options = {}) {
 	return presetConfig(lineSpec, data, options);
@@ -4595,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;
@@ -4667,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)));
 			}
 		};
@@ -4860,7 +5172,6 @@ function rawSeries(series) {
 *   className: 'ct-chart-bar'
 * });
 * ```
-* @experimental
 */
 function bar(options = {}) {
 	const classNames = {
@@ -5160,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);
@@ -5173,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;
@@ -5289,7 +5598,6 @@ function labelText(text, position, anchor, className, ctx) {
 *   className: 'ct-chart-donut'
 * });
 * ```
-* @experimental
 */
 function pie(options = {}) {
 	const classNames = {
@@ -5493,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);
@@ -5506,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;
@@ -5818,7 +6124,6 @@ var interpolation_exports = /* @__PURE__ */ __exportAll({
 * // The color of series `c`, the third.
 * export const third = seriesColors[2];
 * ```
-* @experimental
 */
 const seriesColors = [
 	"#d70206",
@@ -5901,7 +6206,6 @@ function serialize$1(current, position) {
 *   return renderToString(scene);
 * }
 * ```
-* @experimental
 */
 function renderToString(scene) {
 	return serialize$1(scene, "root");
@@ -5964,7 +6268,6 @@ function unavailable(method) {
 *
 * export const markup = renderToString(scene);
 * ```
-* @experimental
 */
 function toScene(config, size) {
 	const emitter = createPhaseEmitter();
@@ -6131,7 +6434,6 @@ function edgeContext(option, context) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function band(options) {
 	const hasEdges = options.low !== void 0 || options.high !== void 0;
@@ -6171,6 +6473,7 @@ function band(options) {
 			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);
@@ -6191,7 +6494,6 @@ function band(options) {
 					});
 				}
 				const shift = centerShift(axisX, options.align);
-				const interpolation = interpolationOf(options.lineSmooth ?? true);
 				const pathOf = (values) => seriesPath(values, {
 					x: axisX,
 					y: axisY
@@ -6214,7 +6516,8 @@ function band(options) {
 				role: "band",
 				ctx: {
 					...edgesContext,
-					path: path.clone()
+					path: path.clone(),
+					smoothing: interpolation
 				}
 			}));
 			return [withFields(node("g", {}, options.className ? `${classNames.band} ${options.className}` : classNames.band), { children })];
@@ -6285,7 +6588,6 @@ const LABEL_INSET = 4;
 *   ]
 * });
 * ```
-* @experimental
 */
 function targetLine(options) {
 	const { value, label, className } = options;
@@ -6455,7 +6757,6 @@ function hasX(values) {
 *   layers: [axisGrid(), line(), trendLine(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function trendLine(options = {}) {
 	const classNames = {
@@ -6630,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 = {
@@ -6685,7 +6985,6 @@ function axisGrid(options = {}) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function axisLabels(options = {}) {
 	const classNames = {
@@ -6726,6 +7025,7 @@ exports.Svg = Svg;
 exports.SvgList = SvgList;
 exports.SvgPath = SvgPath;
 exports.alphaNumerate = alphaNumerate;
+exports.applyAttribute = applyAttribute;
 exports.autoScaleAxis = autoScaleAxis;
 exports.axisGrid = axisGrid;
 exports.axisLabels = axisLabels;
@@ -6765,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;
@@ -6783,11 +7084,13 @@ 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;