@oliasoft-open-source/charts-library 5.9.0-beta-2 → 5.9.0-beta-4

package/dist/index.js

@@ -802,7 +802,7 @@ function _factorize(value) {
 function isNonPrimitive(n) {
 	return typeof n === "symbol" || typeof n === "object" && n !== null && !(Symbol.toPrimitive in n || "toString" in n || "valueOf" in n);
 }
-function isNumber$2(n) {
+function isNumber$1(n) {
 	return !isNonPrimitive(n) && !isNaN(parseFloat(n)) && isFinite(n);
 }
 function almostWhole(x, epsilon) {
@@ -4352,7 +4352,7 @@ var LineController = class extends DatasetController {
 		const iAxis = iScale.axis;
 		const vAxis = vScale.axis;
 		const { spanGaps, segment } = this.options;
-		const maxGapLength = isNumber$2(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
+		const maxGapLength = isNumber$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
 		const directUpdate = this.chart._animationsDisabled || reset || mode === "none";
 		const end = start + count;
 		const pointsCount = points.length;
@@ -4475,7 +4475,7 @@ var ScatterController = class extends DatasetController {
 		const iAxis = iScale.axis;
 		const vAxis = vScale.axis;
 		const { spanGaps, segment } = this.options;
-		const maxGapLength = isNumber$2(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
+		const maxGapLength = isNumber$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
 		const directUpdate = this.chart._animationsDisabled || reset || mode === "none";
 		let prevParsed = start > 0 && this.getParsed(start - 1);
 		for (let i = start; i < start + count; ++i) {
@@ -5281,7 +5281,7 @@ var Element = class {
 		};
 	}
 	hasValue() {
-		return isNumber$2(this.x) && isNumber$2(this.y);
+		return isNumber$1(this.x) && isNumber$1(this.y);
 	}
 	getProps(props, final) {
 		const anims = this.$animations;
@@ -11390,7 +11390,7 @@ function parse(scale, input) {
 	if (typeof parser === "function") value = parser(value);
 	if (!isNumberFinite(value)) value = typeof parser === "string" ? adapter.parse(value, parser) : adapter.parse(value);
 	if (value === null) return null;
-	if (round) value = round === "week" && (isNumber$2(isoWeekday) || isoWeekday === true) ? adapter.startOf(value, "isoWeek", isoWeekday) : adapter.startOf(value, round);
+	if (round) value = round === "week" && (isNumber$1(isoWeekday) || isoWeekday === true) ? adapter.startOf(value, "isoWeek", isoWeekday) : adapter.startOf(value, round);
 	return +value;
 }
 function determineUnitForAutoTicks(minUnit, min, max, capacity) {
@@ -11585,7 +11585,7 @@ var TimeScale = class extends Scale {
 		const minor = timeOpts.unit || determineUnitForAutoTicks(timeOpts.minUnit, min, max, this._getLabelCapacity(min));
 		const stepSize = valueOrDefault(options.ticks.stepSize, 1);
 		const weekday = minor === "week" ? timeOpts.isoWeekday : false;
-		const hasWeekday = isNumber$2(weekday) || weekday === true;
+		const hasWeekday = isNumber$1(weekday) || weekday === true;
 		const ticks = {};
 		let first = min;
 		let time, count;
@@ -13597,7 +13597,7 @@ function isZoomingOrPanning(chart) {
 	const state = getState(chart);
 	return state.panning || state.dragging;
 }
-var clamp$2 = (x, from, to) => Math.min(to, Math.max(from, x));
+var clamp$3 = (x, from, to) => Math.min(to, Math.max(from, x));
 function removeHandler(chart, type) {
 	const { handlers } = getState(chart);
 	const handler = handlers[type];
@@ -13683,8 +13683,8 @@ function applyAspectRatio({ begin, end }, aspectRatio) {
 	end.y = begin.y + height;
 }
 function applyMinMaxProps(rect, chartArea, points, { min, max, prop }) {
-	rect[min] = clamp$2(Math.min(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
-	rect[max] = clamp$2(Math.max(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
+	rect[min] = clamp$3(Math.min(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
+	rect[max] = clamp$3(Math.max(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
 }
 function getRelativePoints(chart, pointEvents, maintainAspectRatio) {
 	const points = {
@@ -15073,10 +15073,10 @@ function rotated(point, center, angle) {
 }
 var isOlderPart = (act, req) => req > act || act.length > req.length && act.slice(0, req.length) === req;
 var EPSILON = .001;
-var clamp$1 = (x, from, to) => Math.min(to, Math.max(from, x));
+var clamp$2 = (x, from, to) => Math.min(to, Math.max(from, x));
 var inLimit = (limit, hitSize) => limit.value >= limit.start - hitSize && limit.value <= limit.end + hitSize;
 function clampAll(obj, from, to) {
-	for (const key of Object.keys(obj)) obj[key] = clamp$1(obj[key], from, to);
+	for (const key of Object.keys(obj)) obj[key] = clamp$2(obj[key], from, to);
 	return obj;
 }
 function inPointRange(point, center, radius, hitSize) {
@@ -15117,7 +15117,7 @@ function requireVersion(pkg, min, ver, strict = true) {
 }
 var isPercentString = (s) => typeof s === "string" && s.endsWith("%");
 var toPercent = (s) => parseFloat(s) / 100;
-var toPositivePercent = (s) => clamp$1(toPercent(s), 0, 1);
+var toPositivePercent = (s) => clamp$2(toPercent(s), 0, 1);
 var boxAppering = (x, y) => ({
 	x,
 	y,
@@ -15499,8 +15499,8 @@ function applyLabelContent(ctx, { x, y }, labels, { fonts, colors }) {
 	});
 }
 function getOpacity(value, elementValue) {
-	const opacity = isNumber$2(value) ? value : elementValue;
-	return isNumber$2(opacity) ? clamp$1(opacity, 0, 1) : 1;
+	const opacity = isNumber$1(value) ? value : elementValue;
+	return isNumber$1(opacity) ? clamp$2(opacity, 0, 1) : 1;
 }
 var positions = [
 	"left",
@@ -16834,7 +16834,7 @@ function calculateTAdjust(lineSize, sizes, label, space) {
 	const lineH = lineSize.h * space.dy;
 	const x = lineW > 0 && (labelSize.w / 2 + padding.left - space.x) / lineW;
 	const y = lineH > 0 && (labelSize.h / 2 + padding.top - space.y) / lineH;
-	return clamp$1(Math.max(x, y), 0, .25);
+	return clamp$2(Math.max(x, y), 0, .25);
 }
 function spaceAround(properties, chartArea) {
 	const { x, x2, y, y2 } = properties;
@@ -17595,7 +17595,6 @@ const BORDER_COLOR = "rgba(0,0,0,0.1)";
 const ANNOTATION_DASH = [10, 2];
 const DEFAULT_FONT_FAMILY = "\"Roobert\", \"Noto Sans\", sans-serif";
 const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
-const TRANSPARENT = "transparent";
 const LOGARITHMIC_STEPS = [
 	1,
 	10,
@@ -19393,329 +19392,505 @@ function addTransparency(input, alpha, out = "rgb") {
 	const c = color.alpha(a);
 	return out === "hex" ? c.toHex() : c.toRgbString();
 }
+var DEFAULT_FONT_SIZE = 12;
+var DEFAULT_PADDING = 5;
+var DEFAULT_MARGIN = 8;
+var DEFAULT_LABEL_GAP = 8;
+var DEFAULT_MIN_CONNECTOR_LENGTH = 14;
+var DEFAULT_HORIZONTAL_OFFSET = 18;
+var DEFAULT_VERTICAL_OFFSET = -18;
+var DEFAULT_ROW_GAP = 22;
+var DEFAULT_ITEM_GAP = 8;
+var DEFAULT_OVERLAP_ONLY_ITEM_GAP = 14;
+var DEFAULT_SIDE_SPREAD_STEP = 12;
+var DEFAULT_SIDE_SPREAD_MAX = 48;
+var clamp$1 = (value, min, max) => {
+	if (Number.isNaN(value)) return min;
+	if (min > max) return min;
+	return Math.min(Math.max(value, min), max);
+};
+var getChartFromCtx$1 = (ctx) => {
+	return ctx?.chart?.chart ?? ctx?.chart;
+};
 var getXScale = (chart, axisId) => {
 	if (axisId && chart?.scales?.[axisId]) return chart.scales[axisId];
 	if (chart?.scales?.x) return chart.scales.x;
-	const key = Object.keys(chart?.scales ?? {})?.find((k) => k?.toLowerCase()?.includes("x"));
+	const key = Object.keys(chart?.scales ?? {})?.find((item) => {
+		return item?.toLowerCase()?.includes("x");
+	});
 	return key ? chart?.scales?.[key] : void 0;
 };
 var getYScale = (chart, axisId) => {
 	if (axisId && chart?.scales?.[axisId]) return chart.scales[axisId];
 	if (chart?.scales?.y) return chart.scales.y;
-	const key = Object.keys(chart?.scales ?? {})?.find((k) => k?.toLowerCase()?.includes("y"));
+	const key = Object.keys(chart?.scales ?? {})?.find((item) => {
+		return item?.toLowerCase()?.includes("y");
+	});
 	return key ? chart?.scales?.[key] : void 0;
 };
-var isNumber$1 = (value) => {
-	return typeof value === "number" && Number.isFinite(value);
+var resolveFontSize = (font) => {
+	if (typeof font === "string") {
+		const match = font.match(/(\d+(?:\.\d+)?)px/);
+		return match ? Number(match[1]) : DEFAULT_FONT_SIZE;
+	}
+	if (font && typeof font === "object" && "size" in font) {
+		const size = Number(font.size);
+		return Number.isFinite(size) ? size : DEFAULT_FONT_SIZE;
+	}
+	return DEFAULT_FONT_SIZE;
 };
-var looksLikeXAxis = (axisId) => {
-	return !!axisId && axisId.toLowerCase().includes("x");
+var resolvePadding = (padding) => {
+	if (typeof padding === "number") return {
+		top: padding,
+		right: padding,
+		bottom: padding,
+		left: padding
+	};
+	if (padding && typeof padding === "object") {
+		const typedPadding = padding;
+		return {
+			top: Number(typedPadding.top ?? DEFAULT_PADDING),
+			right: Number(typedPadding.right ?? DEFAULT_PADDING),
+			bottom: Number(typedPadding.bottom ?? DEFAULT_PADDING),
+			left: Number(typedPadding.left ?? DEFAULT_PADDING)
+		};
+	}
+	return {
+		top: DEFAULT_PADDING,
+		right: DEFAULT_PADDING,
+		bottom: DEFAULT_PADDING,
+		left: DEFAULT_PADDING
+	};
+};
+var estimateLabelSize = (chart, annotation, calloutCfg) => {
+	const content = `${annotation?.label ?? ""}`;
+	const fontSize = resolveFontSize(calloutCfg?.font);
+	const padding = resolvePadding(calloutCfg?.padding);
+	const lines = content.split("\n");
+	const fallbackWidth = Math.max(...lines.map((line) => line.length), 0) * fontSize * .62;
+	let measuredWidth = fallbackWidth;
+	if (chart?.ctx) {
+		chart.ctx.save();
+		chart.ctx.font = typeof calloutCfg?.font === "string" ? calloutCfg.font : `${fontSize}px sans-serif`;
+		measuredWidth = Math.max(...lines.map((line) => chart.ctx.measureText(line).width), fallbackWidth);
+		chart.ctx.restore();
+	}
+	return {
+		width: measuredWidth + padding.left + padding.right,
+		height: lines.length * fontSize + padding.top + padding.bottom
+	};
+};
+var getAxisId = (annotation, axis) => {
+	const axisScaleId = axis === "x" ? annotation?.xScaleID : annotation?.yScaleID;
+	if (axisScaleId) return axisScaleId;
+	if (annotation?.annotationAxis?.startsWith(axis)) return annotation.annotationAxis;
+};
+var getAnchorPixel = (chart, annotation, axis, area) => {
+	const scale = axis === "x" ? getXScale(chart, getAxisId(annotation, "x")) : getYScale(chart, getAxisId(annotation, "y"));
+	const directValue = axis === "x" ? annotation?.xValue : annotation?.yValue;
+	if (typeof directValue === "number" && scale) return scale.getPixelForValue(directValue);
+	const minKey = axis === "x" ? "xMin" : "yMin";
+	const maxKey = axis === "x" ? "xMax" : "yMax";
+	const minValue = annotation?.[minKey];
+	const maxValue = annotation?.[maxKey];
+	if (typeof minValue === "number" && typeof maxValue === "number" && scale) return (scale.getPixelForValue(minValue) + scale.getPixelForValue(maxValue)) / 2;
+	if (typeof minValue === "number" && scale) return scale.getPixelForValue(minValue);
+	if (typeof maxValue === "number" && scale) return scale.getPixelForValue(maxValue);
+	return axis === "x" ? (area.left + area.right) / 2 : (area.top + area.bottom) / 2;
+};
+var hasAxisAnchor = (annotation, axis) => {
+	if (axis === "x") return typeof annotation?.xValue === "number" || typeof annotation?.xMin === "number" || typeof annotation?.xMax === "number" || annotation?.type === "box" || annotation?.type === "label" || annotation?.type === "ellipse";
+	return typeof annotation?.yValue === "number" || typeof annotation?.yMin === "number" || typeof annotation?.yMax === "number" || annotation?.type === "box" || annotation?.type === "label" || annotation?.type === "ellipse";
+};
+var getBoxHalfWidth = (chart, area, annotation) => {
+	const xScale = getXScale(chart, getAxisId(annotation, "x"));
+	if (xScale && typeof annotation?.xMin === "number" && typeof annotation?.xMax === "number") return Math.abs(xScale.getPixelForValue(annotation.xMax) - xScale.getPixelForValue(annotation.xMin)) / 2;
+	if (annotation?.type === "box") return (area.right - area.left) / 2;
+	return annotation?.radius ?? 0;
+};
+var getBoxHalfHeight = (chart, annotation) => {
+	const yScale = getYScale(chart, getAxisId(annotation, "y"));
+	if (yScale && typeof annotation?.yMin === "number" && typeof annotation?.yMax === "number") return Math.abs(yScale.getPixelForValue(annotation.yMax) - yScale.getPixelForValue(annotation.yMin)) / 2;
+	return annotation?.radius ?? 0;
+};
+var getReferencePoint$1 = (chart, area, annotation) => {
+	const anchorX = getAnchorPixel(chart, annotation, "x", area);
+	const anchorY = getAnchorPixel(chart, annotation, "y", area);
+	const halfWidth = getBoxHalfWidth(chart, area, annotation);
+	const halfHeight = getBoxHalfHeight(chart, annotation);
+	const labelOffsetPx = annotation?.labelOffsetPx ?? 14;
+	const xAdjust = annotation?.labelConfig?.xAdjust ?? 0;
+	const yAdjust = annotation?.labelConfig?.yAdjust ?? 0;
+	const position = annotation?.labelConfig?.position;
+	let x = anchorX;
+	let y = anchorY;
+	let side = anchorX >= (area.left + area.right) / 2 ? "right" : "left";
+	switch (position) {
+		case Position.Left:
+			x -= Math.max(halfWidth, annotation?.radius ?? 0) + labelOffsetPx;
+			side = "left";
+			break;
+		case Position.Right:
+			x += Math.max(halfWidth, annotation?.radius ?? 0) + labelOffsetPx;
+			side = "right";
+			break;
+		case Position.TopLeft:
+			x -= halfWidth;
+			y -= halfHeight;
+			side = "left";
+			break;
+		case Position.TopRight:
+			x += halfWidth;
+			y -= halfHeight;
+			side = "right";
+			break;
+		case Position.BottomLeft:
+			x -= halfWidth;
+			y += halfHeight;
+			side = "left";
+			break;
+		case Position.BottomRight:
+			x += halfWidth;
+			y += halfHeight;
+			side = "right";
+			break;
+		case Position.Bottom:
+			y += Math.max(halfHeight, annotation?.radius ?? 0) + labelOffsetPx;
+			break;
+		case Position.Top:
+		default:
+			y -= Math.max(halfHeight, annotation?.radius ?? 0) + labelOffsetPx;
+			break;
+	}
+	return {
+		x: x + xAdjust,
+		y: y + yAdjust,
+		side
+	};
 };
-var looksLikeYAxis = (axisId) => {
-	return !!axisId && axisId.toLowerCase().includes("y");
+var getOriginalLabelRect = (chart, area, annotation, index) => {
+	const size = estimateLabelSize(chart, annotation, annotation?.labelConfig?.callout ?? {});
+	const reference = getReferencePoint$1(chart, area, annotation);
+	const direction = reference.side === "right" ? 1 : -1;
+	const centerX = reference.x + direction * (size.width / 2);
+	const centerY = reference.y;
+	return {
+		id: `callout-annotation-${index}`,
+		side: reference.side,
+		left: centerX - size.width / 2,
+		right: centerX + size.width / 2,
+		top: centerY - size.height / 2,
+		bottom: centerY + size.height / 2
+	};
 };
-var resolveXScale = (chart, refAnnotation) => {
-	return getXScale(chart, refAnnotation?.xScaleID) ?? getXScale(chart, looksLikeXAxis(refAnnotation?.annotationAxis) ? refAnnotation?.annotationAxis : void 0) ?? getXScale(chart, refAnnotation?.annotationAxis);
+var isRectOverlapping = (left, right) => {
+	return !(left.right <= right.left || right.right <= left.left || left.bottom <= right.top || right.bottom <= left.top);
 };
-var resolveYScale = (chart, refAnnotation) => {
-	return getYScale(chart, refAnnotation?.yScaleID) ?? getYScale(chart, looksLikeYAxis(refAnnotation?.annotationAxis) ? refAnnotation?.annotationAxis : void 0) ?? getYScale(chart, refAnnotation?.annotationAxis);
+var getOverlappingCalloutIds = (chart) => {
+	const area = chart?.chartArea;
+	const annotationsData = (chart?.options)?.annotations?.annotationsData ?? [];
+	if (!chart || !area) return /* @__PURE__ */ new Set();
+	const rects = annotationsData.flatMap((annotation, index) => {
+		const calloutCfg = annotation?.labelConfig?.callout ?? {};
+		if (!calloutCfg?.enabled || !calloutCfg?.onlyWhenOverlapping) return [];
+		return [getOriginalLabelRect(chart, area, annotation, index)];
+	});
+	const overlappingIds = /* @__PURE__ */ new Set();
+	rects.forEach((rect, index) => {
+		rects.slice(index + 1).forEach((otherRect) => {
+			if (rect.side !== otherRect.side) return;
+			if (!isRectOverlapping(rect, otherRect)) return;
+			overlappingIds.add(rect.id);
+			overlappingIds.add(otherRect.id);
+		});
+	});
+	return overlappingIds;
+};
+var getOccupiedOriginalLabelRects = (chart, area, overlappingIds) => {
+	return ((chart?.options)?.annotations?.annotationsData ?? []).flatMap((annotation, index) => {
+		const calloutCfg = annotation?.labelConfig?.callout ?? {};
+		const id = `callout-annotation-${index}`;
+		if (!calloutCfg?.enabled || !calloutCfg?.onlyWhenOverlapping) return [];
+		if (overlappingIds.has(id)) return [];
+		return [getOriginalLabelRect(chart, area, annotation, index)];
+	});
 };
-var getAxisAlignedValue = (refAnnotation, axis) => {
-	if (!isNumber$1(refAnnotation?.value)) return;
-	const annAxis = refAnnotation?.annotationAxis;
-	if (axis === "x" && looksLikeXAxis(annAxis)) return refAnnotation.value;
-	if (axis === "y" && looksLikeYAxis(annAxis)) return refAnnotation.value;
+const isCalloutOverlapping = (ctx, refAnnotation, index) => {
+	const chart = getChartFromCtx$1(ctx);
+	if (!(refAnnotation?.labelConfig?.callout ?? {})?.onlyWhenOverlapping) return true;
+	if (!chart?.chartArea) return false;
+	return getOverlappingCalloutIds(chart).has(`callout-annotation-${index}`);
+};
+var getPreferredX = (chart, area, annotation, calloutCfg, width) => {
+	const xScale = getXScale(chart, getAxisId(annotation, "x"));
+	const explicitXValue = typeof calloutCfg?.xValue === "number" ? calloutCfg.xValue : void 0;
+	if (typeof explicitXValue === "number" && xScale) return xScale.getPixelForValue(explicitXValue);
+	const margin = calloutCfg?.margin ?? DEFAULT_MARGIN;
+	const halfWidth = width / 2;
+	const reference = getReferencePoint$1(chart, area, annotation);
+	const direction = reference.side === "right" ? 1 : -1;
+	const gap = calloutCfg?.gapPx ?? DEFAULT_LABEL_GAP;
+	const minConnectorLength = calloutCfg?.minConnectorLengthPx ?? DEFAULT_MIN_CONNECTOR_LENGTH;
+	return clamp$1(reference.x + direction * (halfWidth + gap + minConnectorLength), area.left + margin + halfWidth, area.right - margin - halfWidth);
+};
+var getPreferredY = (chart, area, annotation, calloutCfg, index) => {
+	const yScale = getYScale(chart, getAxisId(annotation, "y"));
+	const explicitYValue = typeof calloutCfg?.yValue === "number" ? calloutCfg.yValue : void 0;
+	if (typeof explicitYValue === "number" && yScale) return yScale.getPixelForValue(explicitYValue);
+	const reference = getReferencePoint$1(chart, area, annotation);
+	const hasCustomOffset = typeof calloutCfg?.yAdjust === "number";
+	const row = Math.floor(index / 3);
+	const dy = hasCustomOffset ? 0 : DEFAULT_VERTICAL_OFFSET - row * DEFAULT_ROW_GAP;
+	return reference.y + dy;
+};
+var getCalloutItems = (chart, area) => {
+	const overlappingIds = getOverlappingCalloutIds(chart);
+	return ((chart?.options)?.annotations?.annotationsData ?? []).flatMap((annotation, index) => {
+		const calloutCfg = annotation?.labelConfig?.callout ?? {};
+		const id = `callout-annotation-${index}`;
+		if (!calloutCfg?.enabled) return [];
+		if (calloutCfg?.onlyWhenOverlapping && !overlappingIds.has(id)) return [];
+		const size = estimateLabelSize(chart, annotation, calloutCfg);
+		const xScale = getXScale(chart, getAxisId(annotation, "x"));
+		const yScale = getYScale(chart, getAxisId(annotation, "y"));
+		const reference = getReferencePoint$1(chart, area, annotation);
+		const preferredX = getPreferredX(chart, area, annotation, calloutCfg, size.width);
+		const preferredY = getPreferredY(chart, area, annotation, calloutCfg, index);
+		const hasStoredX = typeof calloutCfg?.xValue === "number" || !xScale;
+		const hasStoredY = typeof calloutCfg?.yValue === "number" || !yScale;
+		const side = reference.side;
+		const margin = calloutCfg?.margin ?? DEFAULT_MARGIN;
+		return [{
+			annotation,
+			calloutCfg,
+			id,
+			index,
+			preferredX,
+			preferredY,
+			width: size.width,
+			height: size.height,
+			isFixed: hasStoredX && hasStoredY,
+			overlapOnly: Boolean(calloutCfg?.onlyWhenOverlapping),
+			minX: area.left + margin + size.width / 2,
+			maxX: area.right - margin - size.width / 2,
+			minY: area.top + margin + size.height / 2,
+			maxY: area.bottom - margin - size.height / 2,
+			side
+		}];
+	});
 };
-var resolveAnchorX = (chart, refAnnotation) => {
-	if (isNumber$1(refAnnotation?.xValue)) return refAnnotation.xValue;
-	if (isNumber$1(refAnnotation?.xMin) && isNumber$1(refAnnotation?.xMax)) return (refAnnotation.xMin + refAnnotation.xMax) / 2;
-	const axisValue = getAxisAlignedValue(refAnnotation, "x");
-	if (isNumber$1(axisValue)) return axisValue;
-	if (!chart) return 0;
-	const xScale = resolveXScale(chart, refAnnotation);
-	const area = chart.chartArea;
-	if (!xScale || !area) return 0;
-	return xScale.getValueForPixel((area.left + area.right) / 2);
-};
-var resolveAnchorY = (chart, refAnnotation) => {
-	if (isNumber$1(refAnnotation?.yValue)) return refAnnotation.yValue;
-	if (isNumber$1(refAnnotation?.yMin) && isNumber$1(refAnnotation?.yMax)) return (refAnnotation.yMin + refAnnotation.yMax) / 2;
-	const axisValue = getAxisAlignedValue(refAnnotation, "y");
-	if (isNumber$1(axisValue)) return axisValue;
-	if (!chart) return 0;
-	const yScale = resolveYScale(chart, refAnnotation);
-	const area = chart.chartArea;
-	if (!yScale || !area) return 0;
-	return yScale.getValueForPixel((area.top + area.bottom) / 2);
+var hasVerticalOverlap = (items) => {
+	const sorted = [...items].sort((left, right) => left.preferredY - right.preferredY);
+	for (let index = 1; index < sorted.length; index += 1) {
+		const previous = sorted[index - 1];
+		const current = sorted[index];
+		const gap = previous.height / 2 + current.height / 2 + DEFAULT_ITEM_GAP;
+		if (current.preferredY - previous.preferredY < gap) return true;
+	}
+	return false;
 };
-var getDefaultXDirection = (refAnnotation, index) => {
-	switch (refAnnotation?.labelConfig?.position) {
-		case "left":
-		case "top-left":
-		case "bottom-left": return -1;
-		case "right":
-		case "top-right":
-		case "bottom-right": return 1;
-		default: return index % 2 === 0 ? 1 : -1;
+var overlapsOccupiedRect = (centerY, height, occupiedRects) => {
+	const top = centerY - height / 2;
+	const bottom = centerY + height / 2;
+	return occupiedRects.find((rect) => !(bottom <= rect.top || top >= rect.bottom));
+};
+var getLayoutGap = (item) => {
+	return item.overlapOnly ? DEFAULT_OVERLAP_ONLY_ITEM_GAP : DEFAULT_ITEM_GAP;
+};
+var layoutSide = (items, occupiedRects = []) => {
+	const sorted = [...items].sort((left, right) => left.preferredY - right.preferredY);
+	const result = /* @__PURE__ */ new Map();
+	if (!sorted.filter((item) => !item.isFixed).length) {
+		sorted.forEach((item) => {
+			result.set(item.id, {
+				xValue: item.preferredX,
+				yValue: item.preferredY
+			});
+		});
+		return result;
 	}
+	const shouldReflow = sorted.some((item) => !item.overlapOnly) || hasVerticalOverlap(sorted);
+	sorted.forEach((item) => {
+		result.set(item.id, {
+			xValue: item.preferredX,
+			yValue: clamp$1(item.preferredY, item.minY, item.maxY)
+		});
+	});
+	if (!shouldReflow) return result;
+	let previousBottom = Number.NEGATIVE_INFINITY;
+	sorted.forEach((item) => {
+		if (item.isFixed) {
+			const yValue = clamp$1(item.preferredY, item.minY, item.maxY);
+			result.set(item.id, {
+				xValue: item.preferredX,
+				yValue
+			});
+			previousBottom = yValue + item.height / 2;
+			return;
+		}
+		const minCenter = Math.max(item.minY, previousBottom + item.height / 2 + getLayoutGap(item));
+		let yValue = clamp$1(item.preferredY, minCenter, item.maxY);
+		let overlappingRect = overlapsOccupiedRect(yValue, item.height, occupiedRects);
+		while (overlappingRect) {
+			yValue = clamp$1(overlappingRect.bottom + getLayoutGap(item) + item.height / 2, item.minY, item.maxY);
+			overlappingRect = overlapsOccupiedRect(yValue, item.height, occupiedRects);
+		}
+		result.set(item.id, {
+			xValue: item.preferredX,
+			yValue
+		});
+		previousBottom = yValue + item.height / 2;
+	});
+	let nextTop = Number.POSITIVE_INFINITY;
+	[...sorted].reverse().forEach((item) => {
+		const current = result.get(item.id);
+		if (!current) return;
+		if (item.isFixed) {
+			nextTop = current.yValue - item.height / 2;
+			return;
+		}
+		const maxCenter = Math.min(item.maxY, nextTop - item.height / 2 - getLayoutGap(item));
+		const yValue = clamp$1(current.yValue, item.minY, maxCenter);
+		result.set(item.id, {
+			...current,
+			yValue
+		});
+		nextTop = yValue - item.height / 2;
+	});
+	const overlapOnlyMovable = sorted.filter((item) => {
+		return item.overlapOnly && !item.isFixed;
+	});
+	if (overlapOnlyMovable.length > 1) {
+		const sortedOverlapOnlyMovable = [...overlapOnlyMovable].sort((left, right) => left.preferredY - right.preferredY);
+		const sharedOuterEdge = sortedOverlapOnlyMovable[0]?.side === "right" ? Math.max(...sortedOverlapOnlyMovable.map((item) => {
+			return (result.get(item.id)?.xValue ?? item.preferredX) + item.width / 2;
+		})) : Math.min(...sortedOverlapOnlyMovable.map((item) => {
+			return (result.get(item.id)?.xValue ?? item.preferredX) - item.width / 2;
+		}));
+		sortedOverlapOnlyMovable.forEach((item, index) => {
+			const current = result.get(item.id);
+			if (!current) return;
+			const spreadOffset = Math.min(index * DEFAULT_SIDE_SPREAD_STEP, DEFAULT_SIDE_SPREAD_MAX);
+			const direction = item.side === "right" ? -1 : 1;
+			const alignedXValue = item.side === "right" ? sharedOuterEdge - item.width / 2 : sharedOuterEdge + item.width / 2;
+			result.set(item.id, {
+				...current,
+				xValue: clamp$1(alignedXValue + direction * spreadOffset, item.minX, item.maxX)
+			});
+		});
+		return result;
+	}
+	sorted.forEach((item, index) => {
+		const current = result.get(item.id);
+		if (!current || item.isFixed) return;
+		const spreadOffset = Math.min(index * DEFAULT_SIDE_SPREAD_STEP, DEFAULT_SIDE_SPREAD_MAX);
+		const direction = item.side === "right" ? -1 : 1;
+		const xValue = clamp$1(current.xValue + direction * spreadOffset, item.minX, item.maxX);
+		result.set(item.id, {
+			...current,
+			xValue
+		});
+	});
+	return result;
 };
-var getCalloutLayoutState = (chart, index) => {
-	const c = chart;
-	if (!c.__calloutLayoutState || index === 0) c.__calloutLayoutState = {
-		byIndex: {},
-		leftLastPx: Number.NEGATIVE_INFINITY,
-		rightLastPx: Number.NEGATIVE_INFINITY
+var getCalloutLayoutPixels = (chart) => {
+	const area = chart?.chartArea;
+	if (!chart || !area) return /* @__PURE__ */ new Map();
+	const occupiedRects = getOccupiedOriginalLabelRects(chart, area, getOverlappingCalloutIds(chart));
+	const grouped = getCalloutItems(chart, area).map((item) => {
+		const xValue = clamp$1(item.preferredX, item.minX, item.maxX);
+		return {
+			...item,
+			preferredX: xValue
+		};
+	}).reduce((accumulator, item) => {
+		accumulator[item.side].push(item);
+		return accumulator;
+	}, {
+		left: [],
+		right: []
+	});
+	const leftLayout = layoutSide(grouped.left, occupiedRects.filter((rect) => rect.side === "left").map((rect) => ({
+		top: rect.top,
+		bottom: rect.bottom
+	})));
+	const rightLayout = layoutSide(grouped.right, occupiedRects.filter((rect) => rect.side === "right").map((rect) => ({
+		top: rect.top,
+		bottom: rect.bottom
+	})));
+	return new Map([...leftLayout.entries(), ...rightLayout.entries()]);
+};
+var getCalloutLayout = (ctx, refAnnotation, index) => {
+	const chart = getChartFromCtx$1(ctx);
+	const xScale = chart ? getXScale(chart, getAxisId(refAnnotation, "x")) : void 0;
+	const yScale = chart ? getYScale(chart, getAxisId(refAnnotation, "y")) : void 0;
+	if (!chart || !yScale || !chart.chartArea) return null;
+	if (!xScale && hasAxisAnchor(refAnnotation, "x")) return null;
+	if (!xScale) return null;
+	const layout = getCalloutLayoutPixels(chart).get(`callout-annotation-${index}`);
+	if (!layout) return null;
+	return {
+		xValue: xScale.getValueForPixel(layout.xValue),
+		yValue: yScale.getValueForPixel(layout.yValue)
 	};
-	return c.__calloutLayoutState;
 };
 const resolveCalloutXValue = (ctx, refAnnotation, calloutCfg, index) => {
-	const chart = ctx?.chart;
-	const xVal = resolveAnchorX(chart, refAnnotation);
+	const layout = getCalloutLayout(ctx, refAnnotation, index);
+	if (layout) return layout.xValue;
+	const chart = getChartFromCtx$1(ctx);
+	const xVal = refAnnotation?.xValue;
+	if (typeof xVal !== "number") return 0;
 	if (!chart) return xVal;
-	const scale = resolveXScale(chart, refAnnotation);
+	const scale = getXScale(chart, getAxisId(refAnnotation, "x"));
 	if (!scale) return xVal;
 	const hasCustomOffset = typeof calloutCfg?.xAdjust === "number";
-	const side = getDefaultXDirection(refAnnotation, index);
-	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * 60;
-	if (!isNumber$1(xVal)) return xVal;
+	const side = index % 2 === 0 ? 1 : -1;
+	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * DEFAULT_HORIZONTAL_OFFSET;
 	const basePx = scale.getPixelForValue(xVal);
-	const cxBase = basePx + dx;
 	const area = chart.chartArea;
-	if (!area) return scale.getValueForPixel(cxBase);
-	const margin = calloutCfg?.margin ?? 8;
-	const halfW = 160 / 2;
-	let cx = cxBase;
-	let adjDx = dx;
-	if (cx - halfW < area.left + margin) {
-		adjDx += area.left + margin + halfW - cx;
-		cx = basePx + adjDx;
-	} else if (cx + halfW > area.right - margin) {
-		adjDx += area.right - margin - halfW - cx;
-		cx = basePx + adjDx;
-	}
-	return scale.getValueForPixel(cx);
+	const element = ctx?.element;
+	if (!area || !element) return scale.getValueForPixel(basePx + dx);
+	const margin = calloutCfg?.margin ?? DEFAULT_MARGIN;
+	const halfWidth = (element?.width ?? 0) / 2;
+	const clampedPx = clamp$1(basePx + dx, area.left + margin + halfWidth, area.right - margin - halfWidth);
+	return scale.getValueForPixel(clampedPx);
 };
 const resolveCalloutYValue = (ctx, refAnnotation, calloutCfg, index) => {
-	const chart = ctx?.chart;
-	const yVal = resolveAnchorY(chart, refAnnotation);
+	const layout = getCalloutLayout(ctx, refAnnotation, index);
+	if (layout) return layout.yValue;
+	const chart = getChartFromCtx$1(ctx);
+	const yVal = refAnnotation?.yValue;
+	if (typeof yVal !== "number") return 0;
 	if (!chart) return yVal;
-	const scale = resolveYScale(chart, refAnnotation);
+	const scale = getYScale(chart, getAxisId(refAnnotation, "y"));
 	if (!scale) return yVal;
 	const hasCustomOffset = typeof calloutCfg?.yAdjust === "number";
-	const layoutIndex = typeof calloutCfg?.layoutIndex === "number" ? calloutCfg.layoutIndex : index;
-	const row = Math.floor(layoutIndex / 2);
-	const dy = hasCustomOffset ? calloutCfg?.yAdjust : -40 - row * 22;
-	if (!isNumber$1(yVal)) return yVal;
+	const row = Math.floor(index / 2);
+	const dy = hasCustomOffset ? calloutCfg?.yAdjust : DEFAULT_VERTICAL_OFFSET - row * DEFAULT_ROW_GAP;
 	const basePx = scale.getPixelForValue(yVal);
-	const laneBaseOffset = -24;
-	let cyBase = !hasCustomOffset ? basePx + laneBaseOffset : basePx + dy;
 	const area = chart.chartArea;
-	if (!area) return scale.getValueForPixel(cyBase);
-	const margin = calloutCfg?.margin ?? 8;
-	const halfH = 18 / 2;
-	const minGapPx = calloutCfg?.minGapPx ?? halfH * 2 + 4;
-	let cy = cyBase;
-	let adjDy = !hasCustomOffset ? laneBaseOffset : dy;
-	if (!hasCustomOffset) {
-		const side = getDefaultXDirection(refAnnotation, layoutIndex);
-		const state = getCalloutLayoutState(chart, layoutIndex);
-		const cachedCy = state.byIndex[layoutIndex];
-		if (isNumber$1(cachedCy)) cy = cachedCy;
-		else {
-			if (side < 0) {
-				cy = Math.max(cy, state.leftLastPx + minGapPx);
-				state.leftLastPx = cy;
-			} else {
-				cy = Math.max(cy, state.rightLastPx + minGapPx);
-				state.rightLastPx = cy;
-			}
-			state.byIndex[layoutIndex] = cy;
-		}
-	}
-	if (cy - halfH < area.top + margin) {
-		adjDy += area.top + margin + halfH - cy;
-		cy = basePx + adjDy;
-	} else if (cy + halfH > area.bottom - margin) {
-		adjDy += area.bottom - margin - halfH - cy;
-		cy = basePx + adjDy;
-	}
-	return scale.getValueForPixel(cy);
-};
-var isInRange = (v, min, max) => v >= min && v <= max;
+	const element = ctx?.element;
+	if (!area || !element) return scale.getValueForPixel(basePx + dy);
+	const margin = calloutCfg?.margin ?? DEFAULT_MARGIN;
+	const halfHeight = (element?.height ?? 0) / 2;
+	const clampedPx = clamp$1(basePx + dy, area.top + margin + halfHeight, area.bottom - margin - halfHeight);
+	return scale.getValueForPixel(clampedPx);
+};
+var isInRange = (value, min, max) => value >= min && value <= max;
 const isCalloutAnchorInChartArea = (ctx, refAnnotation, margin = 0) => {
-	const chart = ctx?.chart;
+	const chart = getChartFromCtx$1(ctx);
 	const area = chart?.chartArea;
 	if (!chart || !area) return true;
-	const xScale = resolveXScale(chart, refAnnotation);
-	const yScale = resolveYScale(chart, refAnnotation);
-	const xVal = resolveAnchorX(chart, refAnnotation);
-	const yVal = resolveAnchorY(chart, refAnnotation);
-	if (!xScale || !yScale) return false;
-	if (!isNumber$1(xVal) || !isNumber$1(yVal)) return false;
-	const x = xScale.getPixelForValue(xVal);
-	const y = yScale.getPixelForValue(yVal);
+	const xScale = getXScale(chart, getAxisId(refAnnotation, "x"));
+	const yScale = getYScale(chart, getAxisId(refAnnotation, "y"));
+	const hasXValues = hasAxisAnchor(refAnnotation, "x");
+	const hasYValues = hasAxisAnchor(refAnnotation, "y");
+	if (hasXValues && !xScale || hasYValues && !yScale) return false;
+	if (!hasXValues || !hasYValues) return false;
+	const x = getAnchorPixel(chart, refAnnotation, "x", area);
+	const y = getAnchorPixel(chart, refAnnotation, "y", area);
 	return isInRange(x, area.left + margin, area.right - margin) && isInRange(y, area.top + margin, area.bottom - margin);
 };
-const getChartFromCtx = (ctx) => {
-	if (!ctx) return;
-	if (ctx.chart?.persistenceId !== void 0) return ctx.chart;
-	if (ctx.chart?.chart?.persistenceId !== void 0) return ctx.chart.chart;
-	if (ctx.$context?.chart?.persistenceId !== void 0) return ctx.$context.chart;
-	return ctx.chart?.chart ?? ctx.chart ?? ctx.$context?.chart;
-};
-var isFiniteNumber$1 = (value) => {
-	return typeof value === "number" && Number.isFinite(value);
-};
-var parseFontSize = (font) => {
-	if (!font) return 12;
-	const match = font.match(/(\d+(?:\.\d+)?)px/);
-	return match ? Number(match[1]) : 12;
-};
-const getScaleByAxis = (chart, axis, ann) => {
-	const preferred = axis === "x" ? [ann?.xScaleID, ann?.annotationAxis] : [ann?.yScaleID, ann?.annotationAxis];
-	for (const key of preferred) if (key && chart?.scales?.[key]) return chart.scales[key];
-	if (axis === "x" && chart?.scales?.x) return chart.scales.x;
-	if (axis === "y" && chart?.scales?.y) return chart.scales.y;
-	const contains = axis === "x" ? "x" : "y";
-	const key = Object.keys(chart?.scales ?? {}).find((k) => k.toLowerCase().includes(contains));
-	return key ? chart.scales[key] : void 0;
-};
-const getAnchorValueFromData = (ann, axis) => {
-	const value = axis === "x" ? ann?.xValue : ann?.yValue;
-	if (isFiniteNumber$1(value)) return value;
-	const min = axis === "x" ? ann?.xMin : ann?.yMin;
-	const max = axis === "x" ? ann?.xMax : ann?.yMax;
-	if (isFiniteNumber$1(min) && isFiniteNumber$1(max)) return (min + max) / 2;
-	const annAxis = `${ann?.annotationAxis ?? ""}`.toLowerCase();
-	if (axis === "x" && annAxis.includes("x") && isFiniteNumber$1(ann?.value)) return ann.value;
-	if (axis === "y" && annAxis.includes("y") && isFiniteNumber$1(ann?.value)) return ann.value;
-};
-const getLabelSide = (ann) => {
-	const p = `${ann?.labelConfig?.position ?? ""}`.toLowerCase();
-	if (p.includes("left")) return "left";
-	if (p.includes("right")) return "right";
-	return "center";
-};
-const buildLikelyOverlapSet = (annotationsData) => {
-	const points = annotationsData.map((ann, idx) => ({
-		idx,
-		side: getLabelSide(ann),
-		x: getAnchorValueFromData(ann, "x"),
-		y: getAnchorValueFromData(ann, "y"),
-		label: ann?.label,
-		visible: ann?.display !== false
-	})).filter((p) => p.visible && !!p.label && isFiniteNumber$1(p.y));
-	if (!points.length) return /* @__PURE__ */ new Set();
-	const ys = points.map((p) => p.y);
-	const rangeY = Math.max(...ys) - Math.min(...ys);
-	const yThreshold = Math.max(120, rangeY * .06);
-	const xThreshold = .35;
-	const overlapSet = /* @__PURE__ */ new Set();
-	for (let i = 0; i < points.length; i += 1) for (let j = i + 1; j < points.length; j += 1) {
-		const a = points[i];
-		const b = points[j];
-		if (!(a.side === "center" || b.side === "center" || a.side === b.side)) continue;
-		const xClose = !isFiniteNumber$1(a.x) || !isFiniteNumber$1(b.x) ? true : Math.abs(a.x - b.x) <= xThreshold;
-		if (Math.abs(a.y - b.y) <= yThreshold && xClose) {
-			overlapSet.add(a.idx);
-			overlapSet.add(b.idx);
-		}
-	}
-	return overlapSet;
-};
-const buildOverlapCalloutYMap = (annotationsData, overlapSet) => {
-	const points = annotationsData.map((ann, idx) => ({
-		idx,
-		side: getLabelSide(ann),
-		y: getAnchorValueFromData(ann, "y")
-	})).filter((p) => overlapSet.has(p.idx) && typeof p.y === "number");
-	const yMap = /* @__PURE__ */ new Map();
-	if (!points.length) return yMap;
-	const ys = points.map((p) => p.y);
-	const minY = Math.min(...ys);
-	const maxY = Math.max(...ys);
-	const yRange = Math.max(maxY - minY, 1);
-	const minGap = Math.max(130, yRange * .03);
-	const minBound = minY - minGap * .5;
-	const maxBound = maxY + minGap * .5;
-	const groups = {
-		left: [],
-		right: []
-	};
-	points.forEach((p) => {
-		if (p.side === "right") {
-			groups.right.push({
-				idx: p.idx,
-				y: p.y
-			});
-			return;
-		}
-		groups.left.push({
-			idx: p.idx,
-			y: p.y
-		});
-	});
-	Object.keys(groups).forEach((side) => {
-		const group = groups[side].sort((a, b) => a.y - b.y);
-		if (!group.length) return;
-		const packed = group.map((item, i) => {
-			return i === 0 ? item.y : Math.max(item.y, group[i - 1].y + minGap);
-		});
-		const overflowBottom = packed[packed.length - 1] - maxBound;
-		if (overflowBottom > 0) for (let i = 0; i < packed.length; i += 1) packed[i] -= overflowBottom;
-		const overflowTop = minBound - packed[0];
-		if (overflowTop > 0) for (let i = 0; i < packed.length; i += 1) packed[i] += overflowTop;
-		group.forEach((item, i) => {
-			yMap.set(item.idx, packed[i]);
-		});
-	});
-	return yMap;
-};
-const getOverlapCalloutXAdjust = (ann) => {
-	const side = getLabelSide(ann);
-	if (side === "right") return -56;
-	if (side === "left") return 56;
-	return 0;
-};
-const hasOverlappingLabel = (ctx, refAnnotation, index, annotationsData) => {
-	const chart = getChartFromCtx(ctx);
-	if (!chart) return false;
-	const yScale = getScaleByAxis(chart, "y", refAnnotation);
-	const xScale = getScaleByAxis(chart, "x", refAnnotation);
-	if (!yScale || !xScale) return false;
-	const area = chart.chartArea;
-	if (!area) return false;
-	const yVal = getAnchorValueFromData(refAnnotation, "y");
-	const xVal = getAnchorValueFromData(refAnnotation, "x");
-	if (!isFiniteNumber$1(yVal)) return false;
-	const currentYPx = yScale.getPixelForValue(yVal);
-	const currentXPx = isFiniteNumber$1(xVal) ? xScale.getPixelForValue(xVal) : void 0;
-	const currentSide = getLabelSide(refAnnotation);
-	const currentFont = refAnnotation?.labelConfig?.font;
-	const currentHeight = parseFontSize(currentFont) + 6;
-	const nearTop = currentYPx - currentHeight <= area.top + 2;
-	const nearBottom = currentYPx + currentHeight >= area.bottom - 2;
-	if (nearTop || nearBottom) return true;
-	for (let i = 0; i < annotationsData.length; i += 1) {
-		if (i === index) continue;
-		const ann = annotationsData[i];
-		if (!ann?.label || ann?.display === false) continue;
-		const otherYScale = getScaleByAxis(chart, "y", ann);
-		const otherXScale = getScaleByAxis(chart, "x", ann);
-		if (!otherYScale || !otherXScale) continue;
-		const otherYVal = getAnchorValueFromData(ann, "y");
-		const otherXVal = getAnchorValueFromData(ann, "x");
-		if (!isFiniteNumber$1(otherYVal)) continue;
-		const otherYPx = otherYScale.getPixelForValue(otherYVal);
-		const otherXPx = isFiniteNumber$1(otherXVal) ? otherXScale.getPixelForValue(otherXVal) : void 0;
-		const otherSide = getLabelSide(ann);
-		const otherFont = ann?.labelConfig?.font;
-		const yThreshold = (currentHeight + (parseFontSize(otherFont) + 6)) / 2;
-		const xClose = !isFiniteNumber$1(currentXPx) || !isFiniteNumber$1(otherXPx) ? true : Math.abs(currentXPx - otherXPx) < 160;
-		if ((currentSide === "center" || otherSide === "center" || currentSide === otherSide) && Math.abs(currentYPx - otherYPx) < yThreshold && xClose) return true;
-	}
-	return false;
-};
 var STORAGE_PREFIX = "chart_annotations";
 var getStorageKey = (persistenceId) => {
 	return `${STORAGE_PREFIX}:${persistenceId}`;
@@ -19750,9 +19925,12 @@ const getAnnotationPosition = (persistenceId, annotationId) => {
 	if (!persistenceId) return void 0;
 	return readStorage(persistenceId)[annotationId];
 };
-var isDragActive = (chart, annotation) => {
-	const pluginEnabled = Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled);
-	return Boolean(annotation?.enableDrag && pluginEnabled);
+const getChartFromCtx = (ctx) => {
+	if (!ctx) return;
+	if (ctx.chart?.persistenceId !== void 0) return ctx.chart;
+	if (ctx.chart?.chart?.persistenceId !== void 0) return ctx.chart.chart;
+	if (ctx.$context?.chart?.persistenceId !== void 0) return ctx.$context.chart;
+	return ctx.chart?.chart ?? ctx.chart ?? ctx.$context?.chart;
 };
 var mapToBoxLikeLabelPosition = (position) => {
 	switch (position) {
@@ -19792,8 +19970,7 @@ var mapToBoxLikeLabelPosition = (position) => {
 	}
 };
 var handleLineEnter = (element, chart, annotation) => {
-	const canDrag = isDragActive(chart, annotation);
-	chart.canvas.style.cursor = canDrag ? CursorStyle.Pointer : CursorStyle.Initial;
+	chart.canvas.style.cursor = CursorStyle.Pointer;
 	if (element.options.scaleID?.includes(AxisType.X)) {
 		if (element.options.label) element.options.label.xAdjust = chart.chartArea.left;
 	}
@@ -19802,7 +19979,7 @@ var handleLineEnter = (element, chart, annotation) => {
 		element.label.options.display = true;
 		element.options.label.enabled = true;
 	}
-	if (canDrag) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 	}
@@ -19816,14 +19993,14 @@ var handleLineLeave = (element, chart, annotation) => {
 		element.label.options.display = false;
 		element.options.label.enabled = false;
 	}
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = null;
 		chart.update("none");
 	}
 	chart.draw();
 };
 var handleBoxEnter = (element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		element.options.borderWidth = BORDER_WIDTH.HOVERED;
@@ -19832,7 +20009,7 @@ var handleBoxEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleBoxLeave = (element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = null;
 		element.options.borderWidth = BORDER_WIDTH.INITIAL;
 		chart.canvas.style.cursor = CursorStyle.Initial;
@@ -19841,7 +20018,7 @@ var handleBoxLeave = (element, chart, annotation) => {
 	chart.draw();
 };
 var handlePointEnter = (element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		element.options.borderWidth = BORDER_WIDTH.POINT_HOVERED;
@@ -19850,7 +20027,7 @@ var handlePointEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handlePointLeave = (element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = null;
 		element.options.borderWidth = BORDER_WIDTH.INITIAL;
 		chart.canvas.style.cursor = CursorStyle.Initial;
@@ -19859,7 +20036,7 @@ var handlePointLeave = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleLabelEnter = (element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		chart.canvas.style.cursor = CursorStyle.Pointer;
@@ -19867,7 +20044,7 @@ var handleLabelEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleLabelLeave = (_element, chart, annotation) => {
-	if (isDragActive(chart, annotation)) {
+	if (annotation?.enableDrag) {
 		chart.hoveredAnnotationId = null;
 		chart.canvas.style.cursor = CursorStyle.Initial;
 		chart.update("none");
@@ -19998,41 +20175,32 @@ const generateAnn = (ann, index) => {
 		displayDragCoordinates: ann?.displayDragCoordinates ?? true
 	};
 };
-var getCalloutAnnotation = (refAnnotation, index, annotationsData, likelyOverlapSet, overlapCalloutYMap, layoutIndex) => {
+var getCalloutAnnotation = (refAnnotation, index) => {
 	const generated = generateAnn(refAnnotation, index);
 	if (!generated) return [];
 	const { label, ...baseRest } = generated;
 	const baseId = baseRest.id;
 	const calloutCfg = refAnnotation?.labelConfig?.callout ?? {};
-	const onlyWhenOverlapping = calloutCfg?.onlyWhenOverlapping ?? false;
-	const hideBoxGlyphInOverlapMode = onlyWhenOverlapping && refAnnotation?.type === AnnotationType$1.BOX;
-	const staticShouldShowCallout = likelyOverlapSet.has(index);
-	const shouldShowCallout = (ctx) => {
-		return !onlyWhenOverlapping || staticShouldShowCallout || calloutCfg?.useRuntimeOverlap === true && hasOverlappingLabel(ctx, refAnnotation, index, annotationsData);
-	};
-	const canDisplayCallout = (ctx) => {
-		return (refAnnotation.display ?? true) && shouldShowCallout(ctx) && isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0);
-	};
 	const baseAnnotation = {
 		...baseRest,
-		backgroundColor: hideBoxGlyphInOverlapMode ? TRANSPARENT : baseRest?.backgroundColor,
-		borderWidth: hideBoxGlyphInOverlapMode ? BORDER_WIDTH.ZERO : baseRest?.borderWidth,
-		borderColor: hideBoxGlyphInOverlapMode ? TRANSPARENT : baseRest?.borderColor,
 		label: {
 			...label,
-			display: (ctx) => (refAnnotation?.display ?? true) && (!calloutCfg?.enabled || !canDisplayCallout(ctx))
+			display: (ctx) => {
+				if (!(refAnnotation.display ?? true)) return false;
+				if (!calloutCfg?.onlyWhenOverlapping) return false;
+				return !isCalloutOverlapping(ctx, refAnnotation, index);
+			}
 		}
 	};
 	const color = calloutCfg?.color ?? "hsl(60, 10.34482759%, 12.5%)";
 	const font = calloutCfg?.font ?? `12px "Roobert", "Noto Sans", sans-serif`;
 	const borderColor = calloutCfg?.borderColor ?? "transparent";
-	const connectorStrokeStyle = calloutCfg.strokeStyle ?? (hideBoxGlyphInOverlapMode ? refAnnotation?.color ?? "hsl(60, 10.34482759%, 12.5%)" : baseAnnotation.borderColor);
+	const strokeStyle = calloutCfg.strokeStyle ?? "rgba(120, 126, 138, 0.9)";
 	const lineWidth = typeof calloutCfg.lineWidth === "number" ? calloutCfg.lineWidth : 1;
-	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 6;
-	const endOffset = typeof calloutCfg.endOffset === "number" ? calloutCfg.endOffset : 1;
+	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 2;
+	const endOffset = typeof calloutCfg.endOffset === "number" ? calloutCfg.endOffset : .5;
 	const calloutId = `callout-annotation-${index}`;
-	const isCalloutDraggable = refAnnotation?.enableDrag !== false;
-	const calloutAnnotation = {
+	return [baseAnnotation, {
 		id: calloutId,
 		type: "label",
 		backgroundColor: "transparent",
@@ -20040,47 +20208,38 @@ var getCalloutAnnotation = (refAnnotation, index, annotationsData, likelyOverlap
 		color: (ctx) => {
 			const chart = getChartFromCtx(ctx);
 			if (!chart) return color;
-			const isDragModeEnabled = Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled);
-			if (!isCalloutDraggable || !isDragModeEnabled) return color;
-			if (chart.hoveredAnnotationId === calloutId) return "#DB5B00";
+			if (Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) && chart.hoveredAnnotationId === calloutId) return "#DB5B00";
 			return color;
 		},
 		font,
 		borderColor,
 		borderWidth: BORDER_WIDTH.INITIAL,
 		padding: 5,
-		display: canDisplayCallout,
+		display: (ctx) => {
+			if (!(refAnnotation.display ?? true)) return false;
+			if (!isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0)) return false;
+			return isCalloutOverlapping(ctx, refAnnotation, index);
+		},
 		xValue: (ctx) => {
 			const persistenceId = getChartFromCtx(ctx)?.options?.persistenceId;
 			const stored = getAnnotationPosition(persistenceId, `callout-annotation-${index}`);
 			const explicit = typeof calloutCfg.xValue === "number" ? calloutCfg.xValue : void 0;
-			const overlapCalloutAdjust = onlyWhenOverlapping && !calloutCfg?.xAdjust ? getOverlapCalloutXAdjust(refAnnotation) : calloutCfg?.xAdjust;
-			return stored?.x ?? explicit ?? resolveCalloutXValue(ctx, refAnnotation, {
-				...calloutCfg,
-				xAdjust: overlapCalloutAdjust,
-				layoutIndex
-			}, index);
+			return stored?.x ?? explicit ?? resolveCalloutXValue(ctx, refAnnotation, calloutCfg, index);
 		},
 		yValue: (ctx) => {
 			const persistenceId = getChartFromCtx(ctx)?.options?.persistenceId;
 			const stored = getAnnotationPosition(persistenceId, `callout-annotation-${index}`);
 			const explicit = typeof calloutCfg.yValue === "number" ? calloutCfg.yValue : void 0;
-			const overlapPackedY = onlyWhenOverlapping ? overlapCalloutYMap.get(index) : void 0;
-			const overlapCalloutYAdjust = onlyWhenOverlapping && !calloutCfg?.yAdjust ? 0 : calloutCfg?.yAdjust;
-			return stored?.y ?? explicit ?? overlapPackedY ?? resolveCalloutYValue(ctx, refAnnotation, {
-				...calloutCfg,
-				yAdjust: overlapCalloutYAdjust,
-				layoutIndex
-			}, index);
+			return stored?.y ?? explicit ?? resolveCalloutYValue(ctx, refAnnotation, calloutCfg, index);
 		},
 		resizable: false,
 		displayDragCoordinates: false,
-		enableDrag: isCalloutDraggable,
+		enableDrag: true,
 		enter: ({ element }, { chart }) => {
-			return handleLabelEnter(element, chart, { enableDrag: isCalloutDraggable });
+			return handleLabelEnter(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
 		},
 		leave: ({ element }, { chart }) => {
-			return handleLabelLeave(element, chart, { enableDrag: isCalloutDraggable });
+			return handleLabelLeave(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
 		},
 		onDragStart: calloutCfg?.onDragStart ? () => (coords) => {
 			return calloutCfg.onDragStart?.(coords, refAnnotation);
@@ -20094,58 +20253,22 @@ var getCalloutAnnotation = (refAnnotation, index, annotationsData, likelyOverlap
 		calloutConnector: {
 			enabled: true,
 			fromId: baseId,
-			strokeStyle: connectorStrokeStyle,
+			strokeStyle,
 			lineWidth,
 			startOffset,
-			endOffset
+			endOffset,
+			anchor: {
+				position: refAnnotation?.labelConfig?.position,
+				xAdjust: refAnnotation?.labelConfig?.xAdjust,
+				yAdjust: refAnnotation?.labelConfig?.yAdjust,
+				labelOffsetPx: refAnnotation?.labelOffsetPx
+			}
 		}
-	};
-	const anchorX = getAnchorValueFromData(refAnnotation, "x");
-	const anchorY = getAnchorValueFromData(refAnnotation, "y");
-	const originTickAnnotation = typeof anchorX === "number" && typeof anchorY === "number" ? {
-		id: `callout-origin-tick-${index}`,
-		type: "line",
-		xMin: anchorX,
-		xMax: (ctx) => {
-			const chart = getChartFromCtx(ctx);
-			const xScale = chart ? getScaleByAxis(chart, "x", refAnnotation) : null;
-			if (!xScale) return anchorX;
-			const px = xScale.getPixelForValue(anchorX);
-			const tickLength = calloutCfg?.originTickLengthPx ?? 8;
-			return xScale.getValueForPixel(px + tickLength);
-		},
-		yMin: anchorY,
-		yMax: anchorY,
-		borderColor: calloutCfg?.originTickColor ?? connectorStrokeStyle,
-		borderWidth: calloutCfg?.originTickWidth ?? 1,
-		borderDash: [],
-		adjustScaleRange: false,
-		label: {
-			display: false,
-			content: ""
-		},
-		display: (ctx) => onlyWhenOverlapping && (refAnnotation.display ?? true) && shouldShowCallout(ctx),
-		resizable: false,
-		displayDragCoordinates: false,
-		enableDrag: false
-	} : null;
-	if (!onlyWhenOverlapping) return [baseAnnotation, calloutAnnotation];
-	return originTickAnnotation ? [
-		baseAnnotation,
-		originTickAnnotation,
-		calloutAnnotation
-	] : [baseAnnotation, calloutAnnotation];
+	}];
 };
 var generateAnnotations = (annotationsData) => {
-	const likelyOverlapSet = buildLikelyOverlapSet(annotationsData);
-	const overlapCalloutYMap = buildOverlapCalloutYMap(annotationsData, likelyOverlapSet);
-	let calloutLayoutIndex = 0;
 	return annotationsData?.flatMap((ann, idx) => {
-		if (ann?.labelConfig?.callout?.enabled ?? false) {
-			const annotation = getCalloutAnnotation(ann, idx, annotationsData, likelyOverlapSet, overlapCalloutYMap, calloutLayoutIndex);
-			calloutLayoutIndex += 1;
-			return annotation;
-		}
+		if (ann?.labelConfig?.callout?.enabled ?? false) return getCalloutAnnotation(ann, idx);
 		return generateAnn(ann, idx);
 	});
 };
@@ -20844,52 +20967,126 @@ const annotationDraggerPlugin = {
 		}
 	}
 };
-var getRadius = (el) => {
-	if (typeof el.options?.radius === "number") return el.options.radius;
-	if (typeof el.width === "number" && typeof el.height === "number") return Math.min(el.width, el.height) / 2;
-	return 0;
+var getRectangleEdgePoint = (el, targetX, targetY, offset) => {
+	const width = el?.width ?? 0;
+	const height = el?.height ?? 0;
+	if (width <= 0 || height <= 0) return {
+		x: el.centerX,
+		y: el.centerY
+	};
+	const halfWidth = width / 2;
+	const halfHeight = height / 2;
+	const dx = targetX - el.centerX;
+	const dy = targetY - el.centerY;
+	const length = Math.sqrt(dx * dx + dy * dy) || 1;
+	const ux = dx / length;
+	const uy = dy / length;
+	const tx = Math.abs(ux) > 1e-6 ? halfWidth / Math.abs(ux) : Number.POSITIVE_INFINITY;
+	const ty = Math.abs(uy) > 1e-6 ? halfHeight / Math.abs(uy) : Number.POSITIVE_INFINITY;
+	const distance = Math.min(tx, ty) + offset;
+	return {
+		x: el.centerX + ux * distance,
+		y: el.centerY + uy * distance
+	};
+};
+var getLabelEdgePoint = (labelEl, startX, endOffset) => {
+	const width = labelEl?.width ?? 0;
+	const height = labelEl?.height ?? 0;
+	if (width <= 0 || height <= 0) return {
+		x: labelEl.centerX,
+		y: labelEl.centerY
+	};
+	const halfWidth = width / 2;
+	const direction = startX <= labelEl.centerX ? -1 : 1;
+	return {
+		x: labelEl.centerX + direction * (halfWidth + endOffset),
+		y: labelEl.centerY
+	};
+};
+var getReferencePoint = (fromEl, connector) => {
+	const { anchor } = connector;
+	if (!anchor) return {
+		x: fromEl.centerX,
+		y: fromEl.centerY
+	};
+	const width = fromEl?.width ?? 0;
+	const height = fromEl?.height ?? 0;
+	const radius = fromEl?.options?.radius ?? 0;
+	const halfWidth = width / 2;
+	const halfHeight = height / 2;
+	const labelOffset = anchor?.labelOffsetPx ?? 14;
+	const xAdjust = anchor?.xAdjust ?? 0;
+	const yAdjust = anchor?.yAdjust ?? 0;
+	const position = anchor?.position ?? "top";
+	let x = fromEl.centerX;
+	let y = fromEl.centerY;
+	switch (position) {
+		case "left":
+			x -= Math.max(halfWidth, radius) + labelOffset;
+			break;
+		case "right":
+			x += Math.max(halfWidth, radius) + labelOffset;
+			break;
+		case "bottom":
+			y += Math.max(halfHeight, radius) + labelOffset;
+			break;
+		case "top-left":
+			x -= halfWidth;
+			y -= halfHeight;
+			break;
+		case "top-right":
+			x += halfWidth;
+			y -= halfHeight;
+			break;
+		case "bottom-left":
+			x -= halfWidth;
+			y += halfHeight;
+			break;
+		case "bottom-right":
+			x += halfWidth;
+			y += halfHeight;
+			break;
+		default:
+			y -= Math.max(halfHeight, radius) + labelOffset;
+			break;
+	}
+	return {
+		x: x + xAdjust,
+		y: y + yAdjust
+	};
 };
 const computeConnectorPoints = (fromEl, labelEl, connector) => {
 	const x1c = fromEl?.centerX;
 	const y1c = fromEl?.centerY;
 	const cx = labelEl?.centerX;
 	const cy = labelEl?.centerY;
-	const labelWidth = labelEl?.width ?? 0;
-	const labelHeight = labelEl?.height ?? 0;
 	const ux = cx - x1c;
 	const uy = cy - y1c;
 	const len = Math.sqrt(ux * ux + uy * uy) || 1;
 	const dx = ux / len;
 	const dy = uy / len;
-	const fromRadius = getRadius(fromEl);
-	const startOffset = (connector?.startOffset ?? 6) + fromRadius;
-	const startX = x1c + dx * startOffset;
-	const startY = y1c + dy * startOffset;
-	let endX = cx;
-	let endY = cy;
-	if (labelWidth > 0 && labelHeight > 0) {
-		const hw = labelWidth / 2;
-		const hh = labelHeight / 2;
-		const vx = x1c - cx;
-		const vy = y1c - cy;
-		const vlen = Math.sqrt(vx * vx + vy * vy) || 1;
-		const vxn = vx / vlen;
-		const vyn = vy / vlen;
-		const tx = Math.abs(vxn) > 1e-6 ? hw / Math.abs(vxn) : Number.POSITIVE_INFINITY;
-		const ty = Math.abs(vyn) > 1e-6 ? hh / Math.abs(vyn) : Number.POSITIVE_INFINITY;
-		const total = Math.min(tx, ty) + (connector.endOffset ?? 1);
-		endX = cx + vxn * total;
-		endY = cy + vyn * total;
-	} else {
-		const endOffset = connector.endOffset ?? 1;
-		endX = cx - dx * endOffset;
-		endY = cy - dy * endOffset;
-	}
+	const startOffset = connector?.startOffset ?? 6;
+	const isPointAnchor = typeof fromEl?.options?.radius === "number";
+	const referencePoint = connector?.anchor && !isPointAnchor ? getReferencePoint(fromEl, connector) : isPointAnchor ? {
+		x: x1c,
+		y: y1c
+	} : getRectangleEdgePoint(fromEl, cx, cy, startOffset);
+	const endOffset = connector?.endOffset ?? 1;
+	const end = typeof labelEl?.width === "number" && typeof labelEl?.height === "number" ? getLabelEdgePoint(labelEl, referencePoint.x, endOffset) : {
+		x: cx - dx * endOffset,
+		y: cy - dy * endOffset
+	};
+	const tickHalf = isPointAnchor ? 0 : (connector?.anchor?.tickSize ?? 8) / 2;
+	const lineDirection = end.x >= referencePoint.x ? 1 : -1;
 	return {
-		startX,
-		startY,
-		endX,
-		endY
+		startX: referencePoint.x + lineDirection * tickHalf,
+		startY: referencePoint.y,
+		endX: end.x,
+		endY: end.y,
+		tickStartX: referencePoint.x - tickHalf,
+		tickStartY: referencePoint.y,
+		tickEndX: referencePoint.x + tickHalf,
+		tickEndY: referencePoint.y
 	};
 };
 const calloutConnectorPlugin = {
@@ -20910,17 +21107,24 @@ const calloutConnectorPlugin = {
 			const fromEl = elements.find((el) => el.options && el.options.id === connector.fromId);
 			if (!labelEl || !fromEl) return;
 			if (labelEl.options?.display === false) return;
-			const { startX, startY, endX, endY } = computeConnectorPoints(fromEl, labelEl, connector) ?? {};
+			const { startX, startY, endX, endY, tickStartX, tickStartY, tickEndX, tickEndY } = computeConnectorPoints(fromEl, labelEl, connector) ?? {};
 			const ctx = chart?.ctx;
+			const strokeStyle = connector?.strokeStyle ?? "rgba(120, 126, 138, 0.9)";
 			ctx?.save?.();
 			ctx?.beginPath?.();
 			ctx?.moveTo?.(startX, startY);
 			ctx?.lineTo?.(endX, endY);
 			ctx.lineWidth = connector?.lineWidth ?? 1;
-			ctx.strokeStyle = connector?.strokeStyle ?? "rgba(120,120,120,0.9)";
+			ctx.strokeStyle = strokeStyle;
 			if (connector?.lineDash && connector?.lineDash?.length) ctx?.setLineDash?.(connector.lineDash);
 			ctx.lineCap = "round";
 			ctx?.stroke?.();
+			ctx?.beginPath?.();
+			ctx?.moveTo?.(tickStartX, tickStartY);
+			ctx?.lineTo?.(tickEndX, tickEndY);
+			ctx.lineWidth = Math.max(connector?.lineWidth ?? 1, 1);
+			ctx.strokeStyle = strokeStyle;
+			ctx?.stroke?.();
 			ctx?.restore?.();
 		});
 	}