chartist 2.0.0-rc.2 → 2.0.0-rc.3

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
@@ -921,7 +936,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 +1522,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 +2107,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 +2172,7 @@ const DEFAULTS = {
 	showArea: false,
 	areaBase: 0
 };
-const CLASS_NAMES$2 = {
+const CLASS_NAMES$5 = {
 	series: "ct-series",
 	line: "ct-line",
 	point: "ct-point",
@@ -2169,7 +2238,7 @@ function seriesOption(series, options, key) {
 */
 function line(options = {}) {
 	const classNames = {
-		...CLASS_NAMES$2,
+		...CLASS_NAMES$5,
 		...options.classNames
 	};
 	return {
@@ -2184,7 +2253,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 +2263,10 @@ 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 path = seriesPath(values, {
+					x: axisX,
+					y: axisY
+				}, area, shift, interpolationOf(seriesOption(series, options, "lineSmooth")), (valueIndex) => getMetaData(series, valueIndex));
 				const seriesContext = {
 					series,
 					seriesIndex,
@@ -3202,9 +3263,8 @@ function layout(emitter, config, width, height) {
 	return result;
 }
 function compose(emitter, config, data, area, measureText, axes = {}, normalized, padding = config.padding, bindings = [], labels = "html", measureStyle) {
-	const composed = [];
 	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 +3275,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 +3291,29 @@ function compose(emitter, config, data, area, measureText, axes = {}, normalized
 			seriesIndexes: selection,
 			labels,
 			measureStyle
-		});
-		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: layer.compose(context).map((top) => assignKeys(top, 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 } 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);
+	}
 	return composed;
 }
 function scene(emitter, config, children, size) {
@@ -3316,7 +3393,8 @@ const estimateText = (text, options = {}) => {
 function setAttribute(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));
 }
 /**
@@ -3344,7 +3422,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(" "));
@@ -3726,7 +3804,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,
@@ -3875,7 +3953,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 +4048,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,7 +4152,7 @@ function svgLabels(measureText, kind, override = {}) {
 *       container('(width < 400px)'),
 *       {
 *         showPoint: false,
-*         axisX: { labelInterpolationFnc: value => String(value)[0] }
+*         axisX: { labelTransform: value => String(value)[0] }
 *       }
 *     ]
 *   ]
@@ -4210,13 +4294,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 +4333,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;
 			}))];
 		}
 	};
@@ -4447,6 +4536,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 +4548,7 @@ const lineSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions),
+				...below,
 				seriesGroup(line({
 					lineSmooth: options.lineSmooth,
 					showPoint: options.showPoint,
@@ -4468,6 +4559,7 @@ const lineSpec = {
 					reverseData: options.reverseData,
 					classNames: options.classNames
 				})),
+				...above,
 				labelLayer(axisOptions)
 			]
 		};
@@ -4778,6 +4870,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 +4931,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 +5132,7 @@ const barSpec = {
 			...seriesGroup(layer),
 			extent: extentOf.extent
 		};
+		const { below = [], above = [] } = options.layers ?? {};
 		return {
 			data,
 			axes: presetAxes(axesConfig(options)),
@@ -5049,7 +5144,9 @@ const barSpec = {
 			labels: options.labels,
 			layers: [
 				gridLayer(axisOptions, order),
+				...below,
 				bars,
+				...above,
 				labelLayer({
 					...axisOptions,
 					labelKind: options.horizontalBars ? "horizontalBar" : "bar"
@@ -5137,12 +5234,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,
@@ -5168,10 +5293,10 @@ const CLASS_NAMES$1 = {
 */
 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 +5392,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 +5400,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 +5457,7 @@ const pieSpec = {
 	defaults: pieDefaults,
 	config(data, preset) {
 		const options = preset;
+		const { below = [], above = [] } = preset.layers ?? {};
 		return {
 			data,
 			coordinates: "polar",
@@ -5347,20 +5466,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
+			]
 		};
 	}
 };
@@ -5716,16 +5840,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}/>`;
@@ -5856,6 +5986,550 @@ 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()
+*   ]
+* });
+* ```
+* @experimental
+*/
+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;
+			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 interpolation = interpolationOf(options.lineSmooth ?? true);
+				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()
+				}
+			}));
+			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()
+*   ]
+* });
+* ```
+* @experimental
+*/
+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()]
+* });
+* ```
+* @experimental
+*/
+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 +6555,7 @@ function drawnOptions(axis) {
 		},
 		showLabel: options.showLabel ?? true,
 		showGrid: options.showGrid ?? true,
-		labelInterpolationFnc: options.labelInterpolationFnc ?? ((value) => value)
+		labelTransform: labelTransformOf(options)
 	};
 }
 function selectedAxes(context, ids) {
@@ -6023,8 +6697,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) })];
 		}
 	};
 }
@@ -6053,6 +6730,7 @@ exports.autoScaleAxis = autoScaleAxis;
 exports.axisGrid = axisGrid;
 exports.axisLabels = axisLabels;
 exports.axisUnits = axisUnits;
+exports.band = band;
 exports.bar = bar;
 exports.barChart = barChart;
 exports.barChartConfig = barChartConfig;
@@ -6116,9 +6794,11 @@ 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