chartist 2.0.0-rc.3 → 2.0.0

package/dist/index.js

@@ -796,6 +796,160 @@ const easings = {
 		1.55
 	]
 };
+/** The CSS easing keywords as cubic Bézier curves. */
+const CSS_EASINGS = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	],
+	"ease-in": [
+		.42,
+		0,
+		1,
+		1
+	],
+	"ease-out": [
+		0,
+		0,
+		.58,
+		1
+	],
+	"ease-in-out": [
+		.42,
+		0,
+		.58,
+		1
+	]
+};
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+/** The four numbers of a cubic Bézier easing, or nothing for other easings. */
+function curveOf(easing) {
+	const css = easing.trim();
+	if (CSS_EASINGS[css]) return CSS_EASINGS[css];
+	if (easings[css]) return easings[css];
+	const numbers = css.startsWith("cubic-bezier(") ? css.match(NUMBER) : null;
+	return numbers?.length === 4 ? numbers.map(Number) : void 0;
+}
+/** A cubic Bézier easing as a function of time, solved for x by bisection. */
+function bezier([x1, y1, x2, y2]) {
+	const at = (a, b, t) => 3 * a * t * (1 - t) ** 2 + 3 * b * t ** 2 * (1 - t) + t ** 3;
+	return (time) => {
+		let low = 0;
+		let high = 1;
+		let t = time;
+		for (let i = 0; i < 30; i++) {
+			const x = at(x1, x2, t);
+			if (Math.abs(x - time) < 1e-6) break;
+			if (x < time) low = t;
+			else high = t;
+			t = (low + high) / 2;
+		}
+		return at(y1, y2, t);
+	};
+}
+/** `steps(n, position)` as a function of time. */
+function steps(css) {
+	const count = Math.max(1, Math.round(Number(css.match(NUMBER)?.[0] ?? 1)));
+	const position = css.match(/(jump-)?(start|end|none|both)\s*\)/)?.[2] ?? "end";
+	const jumps = position === "none" ? count - 1 : position === "both" ? count + 1 : count;
+	const offset = position === "start" || position === "both" ? 1 : 0;
+	return (time) => Math.min(1, (Math.min(Math.floor(time * count), count - 1) + offset) / Math.max(1, jumps));
+}
+/** `linear(…)` as a function of time: its stops, evenly spread where not given. */
+function linearStops(css) {
+	const stops = css.slice(css.indexOf("(") + 1, css.lastIndexOf(")")).split(",").map((stop) => stop.trim().split(/\s+/).map(parseFloat));
+	const ys = stops.map(([value]) => value);
+	const xs = stops.map(([, at], index) => at === void 0 || Number.isNaN(at) ? index / Math.max(1, stops.length - 1) : at / 100);
+	return (time) => {
+		let i = 1;
+		while (i < xs.length - 1 && time > xs[i]) i++;
+		const span = xs[i] - xs[i - 1] || 1;
+		return ys[i - 1] + (ys[i] - ys[i - 1]) * (time - xs[i - 1]) / span;
+	};
+}
+/** An easing as a function of time, `ease` for easings it doesn't know. */
+function easingFunction(easing) {
+	if (typeof easing !== "string") return bezier(easing);
+	const css = easing.trim();
+	if (css.startsWith("steps(")) return steps(css);
+	if (css.startsWith("linear(")) return linearStops(css);
+	return bezier(curveOf(css) ?? CSS_EASINGS.ease);
+}
+/**
+* The SMIL `keySplines` of an easing SMIL can express: a cubic Bézier
+* curve whose four numbers lie within 0 and 1 (the CSS keywords, many
+* `cubic-bezier()` curves, most names of {@link easings}). Browsers ignore
+* an animation whose `keySplines` leave that range, so for other easings
+* it returns nothing: sample them with {@link sampleEasing} instead.
+*
+* @example
+* ```ts
+* import { keySplinesOf } from 'chartist';
+*
+* keySplinesOf('ease-out'); // '0 0 0.58 1'
+* keySplinesOf('easeOutBack'); // undefined: it overshoots
+* ```
+* @param easing A CSS easing, a name of {@link easings}, or four numbers
+* @returns The `keySplines` value, or nothing
+*/
+function keySplinesOf(easing) {
+	const curve = typeof easing === "string" ? curveOf(easing) : easing;
+	return curve?.length === 4 && curve.every((value) => value >= 0 && value <= 1) ? curve.join(" ") : void 0;
+}
+/**
+* The eased progress of an animation at evenly spaced times, for SMIL
+* `values` with even `keyTimes`: 12 points, and one per 50 ms for
+* animations longer than 600 ms, at most 40. It takes the CSS easings
+* (the keywords, `cubic-bezier()` curves, also ones that overshoot,
+* `linear()` and `steps()`), the names of {@link easings} and four
+* numbers of a cubic Bézier curve; anything else is sampled as `ease`.
+* Points lie below 0 or above 1 where the easing overshoots.
+*
+* @example
+* ```ts
+* import { sampleEasing } from 'chartist';
+*
+* // A value that grows from 10 to 20 and overshoots a little on the way.
+* const progress = sampleEasing('cubic-bezier(0.34, 1.56, 0.64, 1)', 400);
+* const values = progress.map(p => 10 + (20 - 10) * p).join(';');
+* ```
+* @param easing The easing
+* @param duration The animation's duration in ms
+* @returns The progress at each point, from 0 to 1
+*/
+function sampleEasing(easing, duration) {
+	const count = duration > 600 ? Math.min(40, Math.max(12, Math.round(duration / 50))) : 12;
+	const at = easingFunction(easing);
+	return Array.from({ length: count }, (_, index) => {
+		const time = index / (count - 1);
+		return index === 0 ? 0 : index === count - 1 ? 1 : at(time);
+	});
+}
+/**
+* The value between `from` and `to` at `progress`: the numbers in `to`
+* moved from their counterparts in `from`, when both have the same shape
+* (`10px` and `40px`, two paths with the same commands), else `from`
+* until halfway and `to` after.
+*/
+function between(from, to, progress) {
+	const fromNumbers = from.match(NUMBER) ?? [];
+	const toNumbers = to.match(NUMBER) ?? [];
+	if (fromNumbers.length !== toNumbers.length || from.replace(NUMBER, "#") !== to.replace(NUMBER, "#")) return progress < .5 ? from : to;
+	let index = 0;
+	return to.replace(NUMBER, () => {
+		const start = Number(fromNumbers[index]);
+		const end = Number(toNumbers[index++]);
+		return String(+(start + (end - start) * progress).toFixed(4));
+	});
+}
 /**
 * The property of an element that holds the emitter its descendants'
 * animations report to when `animate()` gets none. The compat plugin
@@ -815,13 +969,22 @@ function createAnimation(element, attribute, animationDefinition, createGuided =
 	const attributeProperties = {};
 	let animationEasing;
 	let timeout;
-	if (easing) animationEasing = Array.isArray(easing) ? easing : easings[easing];
+	if (easing) animationEasing = Array.isArray(easing) ? easing : easings[easing] ?? easing;
 	def.begin = ensureUnit(def.begin, "ms");
 	def.dur = ensureUnit(def.dur, "ms");
 	if (animationEasing) {
-		def.calcMode = "spline";
-		def.keySplines = animationEasing.join(" ");
-		def.keyTimes = "0;1";
+		const keySplines = keySplinesOf(animationEasing);
+		if (keySplines) {
+			def.calcMode = "spline";
+			def.keySplines = keySplines;
+			def.keyTimes = "0;1";
+		} else if (def.from !== void 0 && def.to !== void 0) {
+			const duration = quantity(def.dur);
+			const progress = sampleEasing(animationEasing, duration.unit === "s" ? duration.value * 1e3 : duration.value);
+			def.calcMode = String(animationEasing).trim().startsWith("steps(") ? "discrete" : "linear";
+			def.values = progress.map((at) => between(String(def.from), String(def.to), at)).join(";");
+			def.keyTimes = progress.map((_, index) => +(index / (progress.length - 1)).toFixed(4)).join(";");
+		}
 	}
 	if (createGuided) {
 		def.fill = "freeze";
@@ -2233,7 +2396,6 @@ function seriesOption(series, options, key) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function line(options = {}) {
 	const classNames = {
@@ -2262,10 +2424,11 @@ function line(options = {}) {
 				const seriesName = safeHasProperty(series, "name") && series.name;
 				const seriesClassName = safeHasProperty(series, "className") && series.className;
 				const seriesMeta = safeHasProperty(series, "meta") ? series.meta : void 0;
+				const 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,
@@ -2303,7 +2466,8 @@ function line(options = {}) {
 					ctx: {
 						...seriesContext,
 						values,
-						path: path.clone()
+						path: path.clone(),
+						smoothing
 					}
 				}), ...children];
 				if (seriesOption(series, options, "showArea") && axisY.range) {
@@ -2312,14 +2476,15 @@ function line(options = {}) {
 					path.splitByCommand("M").filter((segment) => segment.pathElements.length > 1).map((segment) => {
 						const first = segment.pathElements[0];
 						const last = segment.pathElements[segment.pathElements.length - 1];
-						return segment.clone(true).position(0).remove(1).move(first.x, areaBaseProjected).line(first.x, first.y).position(segment.pathElements.length + 1).line(last.x, areaBaseProjected);
+						return segment.clone(true).position(0).remove(1).move(first.x, areaBaseProjected).line(first.x, first.y, false, first.data).position(segment.pathElements.length + 1).line(last.x, areaBaseProjected);
 					}).forEach((areaPath) => {
 						children = [node("path", { d: areaPath.stringify() }, classNames.area, {
 							role: "area",
 							ctx: {
 								...seriesContext,
 								values,
-								path: areaPath.clone()
+								path: areaPath.clone(),
+								smoothing
 							}
 						}), ...children];
 					});
@@ -2728,7 +2893,6 @@ function presetAxes(config, boundOf) {
 *   `{ x, y }` form.
 * @param extra `reverseData` and `normalize`, for the list form (the
 *   `{ x, y }` form takes them inline).
-* @experimental
 */
 function cartesianAxes(input, extra = {}) {
 	const withOffset = (setup, dimension) => ({
@@ -2795,7 +2959,6 @@ const valueOf = (value, dimension) => Number(getMultiValue(value, dimension));
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function stepAxis() {
 	return {
@@ -2854,7 +3017,6 @@ function stepAxis() {
 *   layers: [axisGrid(), line(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function autoScaleAxis() {
 	return {
@@ -2914,7 +3076,6 @@ function autoScaleAxis() {
 *   layers: [axisGrid(), line({ showLine: false }), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function fixedScaleAxis() {
 	return {
@@ -3048,8 +3209,9 @@ function createPhaseEmitter() {
 			return current;
 		},
 		notify(name, value) {
-			(listeners.get(name) ?? []).forEach(({ listener }) => listener(value));
+			const results = (listeners.get(name) ?? []).map(({ listener }) => listener(value));
 			observe(name, value);
+			return results;
 		},
 		clear() {
 			listeners.clear();
@@ -3116,7 +3278,6 @@ function findAll(scene, query = {}) {
 * });
 * const markup = mapped ? renderToString(mapped) : '';
 * ```
-* @experimental
 */
 function mapNodes(scene, mapper) {
 	let children = scene.children;
@@ -3261,7 +3422,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] ?? {};
@@ -3291,10 +3452,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 ? [{
@@ -3309,9 +3476,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;
 }
@@ -3340,6 +3510,7 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 		rootClass: className,
 		...measureOptions
 	}) : measure;
+	const drawn = [];
 	const measureText = withRootClass(environment.measureText);
 	const measureStyle = withRootClass(environment.measureStyle);
 	return {
@@ -3348,10 +3519,11 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 		layout: laidOut,
 		axes,
 		normalized,
-		scene: scene(emitter, config, compose(emitter, config, data, laidOut.area, measureText, axes, normalized, laidOut.padding, bindings, config.labels ?? environment.labels ?? "html", measureStyle), environment.rootSize ?? {
+		scene: scene(emitter, config, compose(emitter, config, data, laidOut.area, measureText, axes, normalized, laidOut.padding, bindings, config.labels ?? environment.labels ?? "html", measureStyle, drawn), environment.rootSize ?? {
 			width: config.width ?? laidOut.width,
 			height: config.height ?? laidOut.height
-		})
+		}),
+		drawn
 	};
 }
 /**
@@ -3359,7 +3531,6 @@ function runPipeline(emitter, options, environment, previous, from = "resolve")
 * below the top of the line (a typical font's ascent). Lines are one font
 * size apart, so a renderer finds a line's vertical center at
 * `y - (textAscent - 0.5) * fontSize` from its `y`.
-* @experimental
 */
 const textAscent = .85;
 /**
@@ -3377,7 +3548,6 @@ const textAscent = .85;
 *   return { ...size, width: size.width * 1.1 };
 * };
 * ```
-* @experimental
 */
 const estimateText = (text, options = {}) => {
 	const fontSize = options.fontSize ?? 12;
@@ -3389,7 +3559,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));
@@ -3397,17 +3587,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. */
@@ -3455,8 +3662,10 @@ function measureInDocument(document) {
 /**
 * Creates the renderer `chart()` uses by default: it renders scenes as
 * inline SVG into the container, replacing an earlier Chartist SVG there
-* (as 1.x does), and measures text and reads styles for layout in the
-* container, so its CSS applies.
+* (as 1.x does) on every render, and measures text and reads styles for
+* layout in the container, so its CSS applies. It ignores the previous
+* render it gets from a chart's second render on; `liveDomRenderer()`
+* from `chartist/live` keeps its SVG and changes it instead.
 * Wrap it to change what every render puts on the page.
 *
 * @example
@@ -3482,7 +3691,6 @@ function measureInDocument(document) {
 *   renderer
 * });
 * ```
-* @experimental
 */
 function domRenderer() {
 	return {
@@ -3490,7 +3698,7 @@ function domRenderer() {
 		render(scene, container) {
 			const document = container.ownerDocument;
 			const elements = /* @__PURE__ */ new WeakMap();
-			const svg = build(document, scene, elements);
+			const svg = renderElement(scene, document, { created: (node, element) => elements.set(node, element) });
 			svg.setAttributeNS(namespaces.xmlns, "xmlns:ct", namespaces.ct);
 			removePrevious(container);
 			container.appendChild(svg);
@@ -3512,6 +3720,35 @@ function domRenderer() {
 	};
 }
 //#endregion
+//#region src/chart/changes.ts
+/** Adds an entry for `current` and each of its descendants, in document order. */
+function each$1(current, op, into) {
+	into.push({
+		op,
+		node: current
+	});
+	current.children.forEach((child) => each$1(child, op, into));
+}
+/**
+* The changes of a render that replaced its output: every node of the
+* previous scene removed, every node of the new one added.
+*/
+function replacementChanges(previous, next) {
+	const changes = [];
+	if (previous) each$1(previous, "remove", changes);
+	each$1(next, "add", changes);
+	return changes;
+}
+/**
+* Set on a chart handle by the 1.x classes and the compat plugin: the
+* chart never hands its renderer the previous render, so every render
+* draws new elements, as 1.x code expects. A global symbol, so the compat
+* build sets the same one as the core.
+*/
+const REPLACES_OUTPUT = Symbol.for("chartist.replacesOutput");
+/** Whether the chart must replace its output on every render. */
+const replacesOutput = (handle) => handle[REPLACES_OUTPUT] === true;
+//#endregion
 //#region src/chart/className.ts
 /**
 * The chart type class for a chart's layers, so the stylesheet's chart
@@ -3564,7 +3801,6 @@ function withChartTypeClass(config) {
 *   { plugins: [withOptions(lastPoint, { className: 'ct-last' })] }
 * );
 * ```
-* @experimental
 */
 function withOptions(plugin, options) {
 	return [plugin, options];
@@ -3630,16 +3866,37 @@ function asUserListeners(chart, add) {
 	else add();
 }
 /**
-* Installs v2 plugins in order and returns the event names they provide.
-* Provided names are known before any plugin installs, so a plugin may
-* listen to events another plugin provides. Listeners added while a
-* plugin installs belong to plugins.
+* Installs v2 plugins in order and adds the event names they provide to
+* `provided`. Provided names are known before any plugin installs, so a
+* plugin may listen to events another plugin provides. Listeners added
+* while a plugin installs belong to plugins.
 */
 function installPlugins(chart, plugins = [], provided, scope) {
 	scopes.set(chart, scope);
 	const entries = normalize(plugins);
 	for (const [plugin] of entries) plugin.provides?.forEach((name) => provided.add(name));
-	for (const [plugin, options] of entries) addingAs(scope, "plugin", () => plugin.install(chart, options));
+	const cleanups = [];
+	for (const [plugin, options] of entries) addingAs(scope, "plugin", () => {
+		const cleanup = plugin.install(chart, options);
+		if (typeof cleanup === "function") cleanups.push(cleanup);
+	});
+	return {
+		plugins: entries.map(([plugin]) => plugin),
+		cleanups
+	};
+}
+/**
+* Calls every function, also when one throws, and throws the first error
+* afterwards.
+*/
+function runAll(functions) {
+	const errors = [];
+	for (const run of functions) try {
+		run();
+	} catch (error) {
+		errors.push(error);
+	}
+	if (errors.length) throw errors[0];
 }
 /** Registers `config.on` listeners. */
 function registerListeners(chart, listeners = {}) {
@@ -3740,7 +3997,6 @@ function resolveTarget(target) {
 * @param target The container element, or a CSS selector for it.
 * @param config The data, axes, layers and the rest of the chart.
 * @returns A handle to update the chart, listen to it or remove it.
-* @experimental
 */
 function chart(target, config) {
 	const container = resolveTarget(target);
@@ -3766,6 +4022,12 @@ function chart(target, config) {
 	let watcher;
 	let state;
 	let output;
+	let cleanups = [];
+	let installed = {
+		plugins: [],
+		cleanups: []
+	};
+	let layerOf;
 	let observer;
 	let destroyed = false;
 	let attached = true;
@@ -3773,7 +4035,7 @@ function chart(target, config) {
 	const view = container.ownerDocument.defaultView;
 	const fonts = container.ownerDocument.fonts;
 	const onFontsLoaded = () => {
-		if (!destroyed && state && measuredText) render("layout");
+		if (!destroyed && state && measuredText) render("layout", "fonts");
 	};
 	let printed;
 	let printing = false;
@@ -3819,9 +4081,33 @@ function chart(target, config) {
 			height: effective.viewBox?.height || svg.height || (fixedSize(effective.height) ?? container.clientHeight)
 		};
 	}
-	function render(from) {
+	/**
+	* Asks the plugins with `keyframes`, in order, then the layer that drew
+	* the node, for the keyframes of a node's update animation.
+	*/
+	function keyframes(previous, next, progress) {
+		for (const plugin of installed.plugins) {
+			const frames = plugin.keyframes?.(previous, next, progress);
+			if (frames) return frames;
+		}
+		if (!state) return;
+		if (!layerOf) {
+			const map = /* @__PURE__ */ new WeakMap();
+			const mark = (drawnNode, index) => {
+				map.set(drawnNode, index);
+				drawnNode.children.forEach((child) => mark(child, index));
+			};
+			state.drawn.forEach(({ nodes }, index) => nodes.forEach((top) => mark(top, index)));
+			layerOf = map;
+		}
+		const index = layerOf.get(next);
+		return index === void 0 ? void 0 : state.config.layers[index].keyframes?.(previous, next, state.drawn[index].context, progress);
+	}
+	function render(from, cause) {
 		const { width, height } = size();
 		measuredText = false;
+		const previous = state;
+		const previousOutput = output;
 		state = runPipeline(emitter, withChartTypeClass(effective), {
 			width,
 			height,
@@ -3834,18 +4120,35 @@ function chart(target, config) {
 			}
 		}, state, from);
 		const { scene } = state;
-		output = renderer.render(scene, container);
+		layerOf = void 0;
+		const pending = cleanups;
+		cleanups = [];
+		runAll(pending);
+		const update = previous && previousOutput && !replacesOutput(handle) ? {
+			previous: previousOutput,
+			previousScene: previous.scene,
+			cause,
+			labels: state.data.labels,
+			previousLabels: previous.data.labels,
+			keyframes
+		} : void 0;
+		const rendered = renderer.render(scene, container, update);
+		output = rendered;
 		if (printing) applyPrintViewBox();
-		emitter.notify("render", {
+		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;
@@ -3861,7 +4164,7 @@ function chart(target, config) {
 			previousConfig,
 			currentConfig: effective
 		});
-		render("resolve");
+		render("resolve", "responsive");
 	}
 	/** (Re)creates the watcher of the responsive entries. */
 	function watch() {
@@ -3880,7 +4183,7 @@ function chart(target, config) {
 			};
 			if ("responsive" in changes) watch();
 			else resolveResponsive();
-			render("resolve");
+			render("resolve", "update");
 			return handle;
 		},
 		detach() {
@@ -3899,8 +4202,15 @@ function chart(target, config) {
 			if (destroyed) return;
 			destroyed = true;
 			handle.detach();
-			output?.remove?.();
-			emitter.clear();
+			const pending = cleanups;
+			cleanups = [];
+			try {
+				runAll(pending);
+			} finally {
+				output?.remove?.();
+				emitter.clear();
+				runAll([...installed.cleanups].reverse());
+			}
 		},
 		...eventMethods(emitter, () => handle, provided, scope)
 	};
@@ -3916,15 +4226,15 @@ function chart(target, config) {
 				return;
 			}
 			const { width, height } = size();
-			if (width !== state.layout.width || height !== state.layout.height) render("layout");
+			if (width !== state.layout.width || height !== state.layout.height) render("layout", "resize");
 		});
 		observer.observe(container);
 	}
-	installPlugins(handle, config.plugins, provided, scope);
+	installed = installPlugins(handle, config.plugins, provided, scope);
 	registerListeners(handle, config.on);
 	if (attached) watch();
 	else resolveResponsive();
-	render("resolve");
+	render("resolve", "create");
 	return handle;
 }
 //#endregion
@@ -4157,7 +4467,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({
@@ -4274,7 +4586,6 @@ function watchResponsive(entries, host, onChange, observeResize = false) {
 *   ])
 * });
 * ```
-* @experimental
 */
 function responsive(entries) {
 	return {
@@ -4382,7 +4693,7 @@ function rootStyle(getOptions, state) {
 */
 function presetConfig(spec, data, options) {
 	const resolved = extend({}, spec.defaults, options);
-	const { plugins, on } = options ?? {};
+	const { plugins, on, renderer } = options ?? {};
 	return {
 		...spec.config({
 			...data,
@@ -4390,7 +4701,8 @@ function presetConfig(spec, data, options) {
 			series: data.series || []
 		}, resolved),
 		plugins,
-		on
+		on,
+		...renderer && { renderer }
 	};
 }
 /** Internal: creates a preset chart; used by the preset functions and classes. */
@@ -4446,7 +4758,8 @@ function createPreset(spec, target, initialData, options = {}, responsiveOptions
 	const inner = chart(target, {
 		...withState(spec.config(data, current)),
 		plugins: [rootStyle(() => current, state), ...plugins ?? []],
-		on: options.on
+		on: options.on,
+		renderer: options.renderer
 	});
 	function onResponsiveChange() {
 		const previousOptions = current;
@@ -4581,7 +4894,6 @@ const lineSpec = {
 *   toScene(config, { width: 600, height: 300 })
 * );
 * ```
-* @experimental
 */
 function lineChartConfig(data, options = {}) {
 	return presetConfig(lineSpec, data, options);
@@ -4594,7 +4906,6 @@ function createLineChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a line chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function lineChart(target, data, options = {}, responsiveOptions) {
 	return createLineChart(target, data, options, responsiveOptions).handle;
@@ -4666,6 +4977,7 @@ var PresetChart = class extends BaseChart {
 			name: "chart-listeners",
 			install: (handle) => {
 				this.installing = handle;
+				handle[REPLACES_OUTPUT] = true;
 				asUserListeners(handle, () => queued.forEach(([event, listener]) => this.on(event, listener)));
 			}
 		};
@@ -4859,7 +5171,6 @@ function rawSeries(series) {
 *   className: 'ct-chart-bar'
 * });
 * ```
-* @experimental
 */
 function bar(options = {}) {
 	const classNames = {
@@ -5159,7 +5470,6 @@ const barSpec = {
 * options, without a container: the bar layer with its axes, grid and labels, horizontal or stacked as the options say. Pass it to `toScene()` to render
 * the preset chart with another renderer. Responsive options and the
 * inline size style of the root svg are left out; both need a container.
-* @experimental
 */
 function barChartConfig(data, options = {}) {
 	return presetConfig(barSpec, data, options);
@@ -5172,7 +5482,6 @@ function createBarChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a bar chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function barChart(target, data, options = {}, responsiveOptions) {
 	return createBarChart(target, data, options, responsiveOptions).handle;
@@ -5288,7 +5597,6 @@ function labelText(text, position, anchor, className, ctx) {
 *   className: 'ct-chart-donut'
 * });
 * ```
-* @experimental
 */
 function pie(options = {}) {
 	const classNames = {
@@ -5492,7 +5800,6 @@ const pieSpec = {
 * options, without a container: the pie layer with its labels. Pass it to `toScene()` to render
 * the preset chart with another renderer. Responsive options and the
 * inline size style of the root svg are left out; both need a container.
-* @experimental
 */
 function pieChartConfig(data, options = {}) {
 	return presetConfig(pieSpec, data, options);
@@ -5505,7 +5812,6 @@ function createPieChart(target, data, options = {}, responsiveOptions, plugins)
 * Creates a pie or donut chart with the 1.x options and output, rendered
 * synchronously. Plugins must be v2 plugins; convert 1.x plugins with
 * `fromLegacyPlugin` from `chartist/compat`.
-* @experimental
 */
 function pieChart(target, data, options = {}, responsiveOptions) {
 	return createPieChart(target, data, options, responsiveOptions).handle;
@@ -5817,7 +6123,6 @@ var interpolation_exports = /* @__PURE__ */ __exportAll({
 * // The color of series `c`, the third.
 * export const third = seriesColors[2];
 * ```
-* @experimental
 */
 const seriesColors = [
 	"#d70206",
@@ -5900,7 +6205,6 @@ function serialize$1(current, position) {
 *   return renderToString(scene);
 * }
 * ```
-* @experimental
 */
 function renderToString(scene) {
 	return serialize$1(scene, "root");
@@ -5963,7 +6267,6 @@ function unavailable(method) {
 *
 * export const markup = renderToString(scene);
 * ```
-* @experimental
 */
 function toScene(config, size) {
 	const emitter = createPhaseEmitter();
@@ -6130,7 +6433,6 @@ function edgeContext(option, context) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function band(options) {
 	const hasEdges = options.low !== void 0 || options.high !== void 0;
@@ -6170,6 +6472,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);
@@ -6190,7 +6493,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
@@ -6213,7 +6515,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 })];
@@ -6284,7 +6587,6 @@ const LABEL_INSET = 4;
 *   ]
 * });
 * ```
-* @experimental
 */
 function targetLine(options) {
 	const { value, label, className } = options;
@@ -6454,7 +6756,6 @@ function hasX(values) {
 *   layers: [axisGrid(), line(), trendLine(), axisLabels()]
 * });
 * ```
-* @experimental
 */
 function trendLine(options = {}) {
 	const classNames = {
@@ -6629,7 +6930,6 @@ function nodesOf(axis, context, classNames, svgLabel) {
 * ```
 * @param options The axes to draw and their classes; `background` adds a
 *   `rect.ct-grid-background` over the chart area, behind the lines.
-* @experimental
 */
 function axisGrid(options = {}) {
 	const classNames = {
@@ -6684,7 +6984,6 @@ function axisGrid(options = {}) {
 *   ]
 * });
 * ```
-* @experimental
 */
 function axisLabels(options = {}) {
 	const classNames = {
@@ -6705,6 +7004,6 @@ function axisLabels(options = {}) {
 	};
 }
 //#endregion
-export { AutoScaleAxis, Axis, BarChart, BaseChart, EPSILON, EventEmitter, FixedScaleAxis, interpolation_exports as Interpolation, LineChart, PieChart, StepAxis, Svg, SvgList, SvgPath, alphaNumerate, autoScaleAxis, axisGrid, axisLabels, axisUnits, band, bar, barChart, barChartConfig, cartesianAxes, chart, container, createChartRect, createGrid, createGridBackground, createLabel, createSvg, deserialize, determineAnchorPosition, domRenderer, each, easings, ensureUnit, escapingMap, estimateText, extend, findAll, fixedScaleAxis, getBounds, getHighLow, getMetaData, getMultiValue, getNumberOrUndefined, getSeriesOption, isArrayOfArrays, isArrayOfSeries, isDataHoleValue, isFalseyButZero, isMultiValue, isNumeric, line, lineChart, lineChartConfig, mapNodes, namespaces, node, noop, normalizeData, normalizePadding, optionsProvider, orderOfMagnitude, pie, pieChart, pieChartConfig, polarToCartesian, precision, projectLength, quantity, renderToString, responsive, rho, roundWithPrecision, safeHasProperty, serialMap, serialize, seriesColors, splitIntoSegments, stepAxis, sum, targetLine, textAscent, times, toScene, trendLine, withOptions };
+export { AutoScaleAxis, Axis, BarChart, BaseChart, EPSILON, EventEmitter, FixedScaleAxis, interpolation_exports as Interpolation, LineChart, PieChart, StepAxis, Svg, SvgList, SvgPath, alphaNumerate, applyAttribute, autoScaleAxis, axisGrid, axisLabels, axisUnits, band, bar, barChart, barChartConfig, cartesianAxes, chart, container, createChartRect, createGrid, createGridBackground, createLabel, createSvg, deserialize, determineAnchorPosition, domRenderer, each, easings, ensureUnit, escapingMap, estimateText, extend, findAll, fixedScaleAxis, getBounds, getHighLow, getMetaData, getMultiValue, getNumberOrUndefined, getSeriesOption, isArrayOfArrays, isArrayOfSeries, isDataHoleValue, isFalseyButZero, isMultiValue, isNumeric, keySplinesOf, line, lineChart, lineChartConfig, mapNodes, namespaces, node, noop, normalizeData, normalizePadding, optionsProvider, orderOfMagnitude, pie, pieChart, pieChartConfig, polarToCartesian, precision, projectLength, quantity, renderElement, renderToString, responsive, rho, roundWithPrecision, safeHasProperty, sampleEasing, serialMap, serialize, seriesColors, splitIntoSegments, stepAxis, sum, targetLine, textAscent, times, toScene, trendLine, withOptions };
 
 //# sourceMappingURL=index.js.map