@oliasoft-open-source/charts-library 5.8.0 → 5.9.0-beta-1

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$1(n) {
+function isNumber$2(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$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
+		const maxGapLength = isNumber$2(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$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
+		const maxGapLength = isNumber$2(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$1(this.x) && isNumber$1(this.y);
+		return isNumber$2(this.x) && isNumber$2(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$1(isoWeekday) || isoWeekday === true) ? adapter.startOf(value, "isoWeek", isoWeekday) : adapter.startOf(value, round);
+	if (round) value = round === "week" && (isNumber$2(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$1(weekday) || weekday === true;
+		const hasWeekday = isNumber$2(weekday) || weekday === true;
 		const ticks = {};
 		let first = min;
 		let time, count;
@@ -15499,8 +15499,8 @@ function applyLabelContent(ctx, { x, y }, labels, { fonts, colors }) {
 	});
 }
 function getOpacity(value, elementValue) {
-	const opacity = isNumber$1(value) ? value : elementValue;
-	return isNumber$1(opacity) ? clamp$1(opacity, 0, 1) : 1;
+	const opacity = isNumber$2(value) ? value : elementValue;
+	return isNumber$2(opacity) ? clamp$1(opacity, 0, 1) : 1;
 }
 var positions = [
 	"left",
@@ -17595,6 +17595,7 @@ 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,
@@ -19404,23 +19405,85 @@ var getYScale = (chart, axisId) => {
 	const key = Object.keys(chart?.scales ?? {})?.find((k) => k?.toLowerCase()?.includes("y"));
 	return key ? chart?.scales?.[key] : void 0;
 };
+var isNumber$1 = (value) => {
+	return typeof value === "number" && Number.isFinite(value);
+};
+var looksLikeXAxis = (axisId) => {
+	return !!axisId && axisId.toLowerCase().includes("x");
+};
+var looksLikeYAxis = (axisId) => {
+	return !!axisId && axisId.toLowerCase().includes("y");
+};
+var resolveXScale = (chart, refAnnotation) => {
+	return getXScale(chart, refAnnotation?.xScaleID) ?? getXScale(chart, looksLikeXAxis(refAnnotation?.annotationAxis) ? refAnnotation?.annotationAxis : void 0) ?? getXScale(chart, refAnnotation?.annotationAxis);
+};
+var resolveYScale = (chart, refAnnotation) => {
+	return getYScale(chart, refAnnotation?.yScaleID) ?? getYScale(chart, looksLikeYAxis(refAnnotation?.annotationAxis) ? refAnnotation?.annotationAxis : void 0) ?? getYScale(chart, refAnnotation?.annotationAxis);
+};
+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;
+};
+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 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 getCalloutLayoutState = (chart, index) => {
+	const c = chart;
+	if (!c.__calloutLayoutState || index === 0) c.__calloutLayoutState = {
+		byIndex: {},
+		leftLastPx: Number.NEGATIVE_INFINITY,
+		rightLastPx: Number.NEGATIVE_INFINITY
+	};
+	return c.__calloutLayoutState;
+};
 const resolveCalloutXValue = (ctx, refAnnotation, calloutCfg, index) => {
 	const chart = ctx?.chart;
-	const xVal = refAnnotation?.xValue;
-	if (typeof xVal !== "number") return 0;
+	const xVal = resolveAnchorX(chart, refAnnotation);
 	if (!chart) return xVal;
-	const scale = getXScale(chart, refAnnotation?.annotationAxis);
+	const scale = resolveXScale(chart, refAnnotation);
 	if (!scale) return xVal;
 	const hasCustomOffset = typeof calloutCfg?.xAdjust === "number";
-	const side = index % 2 === 0 ? 1 : -1;
+	const side = getDefaultXDirection(refAnnotation, index);
 	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * 60;
+	if (!isNumber$1(xVal)) return xVal;
 	const basePx = scale.getPixelForValue(xVal);
 	const cxBase = basePx + dx;
 	const area = chart.chartArea;
-	const el = ctx?.element;
-	if (!area || !el) return scale.getValueForPixel(cxBase);
+	if (!area) return scale.getValueForPixel(cxBase);
 	const margin = calloutCfg?.margin ?? 8;
-	const halfW = (el?.width ?? 0) / 2;
+	const halfW = 160 / 2;
 	let cx = cxBase;
 	let adjDx = dx;
 	if (cx - halfW < area.left + margin) {
@@ -19434,23 +19497,41 @@ const resolveCalloutXValue = (ctx, refAnnotation, calloutCfg, index) => {
 };
 const resolveCalloutYValue = (ctx, refAnnotation, calloutCfg, index) => {
 	const chart = ctx?.chart;
-	const yVal = refAnnotation.yValue;
-	if (typeof yVal !== "number") return 0;
+	const yVal = resolveAnchorY(chart, refAnnotation);
 	if (!chart) return yVal;
-	const scale = getYScale(chart, refAnnotation?.annotationAxis);
+	const scale = resolveYScale(chart, refAnnotation);
 	if (!scale) return yVal;
 	const hasCustomOffset = typeof calloutCfg?.yAdjust === "number";
-	const row = Math.floor(index / 2);
+	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 basePx = scale.getPixelForValue(yVal);
-	const cyBase = basePx + dy;
+	const laneBaseOffset = -24;
+	let cyBase = !hasCustomOffset ? basePx + laneBaseOffset : basePx + dy;
 	const area = chart.chartArea;
-	const el = ctx?.element;
-	if (!area || !el) return scale.getValueForPixel(cyBase);
+	if (!area) return scale.getValueForPixel(cyBase);
 	const margin = calloutCfg?.margin ?? 8;
-	const halfH = (el?.height ?? 0) / 2;
+	const halfH = 18 / 2;
+	const minGapPx = calloutCfg?.minGapPx ?? halfH * 2 + 4;
 	let cy = cyBase;
-	let adjDy = dy;
+	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;
@@ -19465,16 +19546,174 @@ const isCalloutAnchorInChartArea = (ctx, refAnnotation, margin = 0) => {
 	const chart = ctx?.chart;
 	const area = chart?.chartArea;
 	if (!chart || !area) return true;
-	const xScale = getXScale(chart, refAnnotation.annotationAxis);
-	const yScale = getYScale(chart, refAnnotation.annotationAxis);
-	const xVal = refAnnotation.xValue;
-	const yVal = refAnnotation.yValue;
+	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 (typeof xVal !== "number" || typeof yVal !== "number") return false;
+	if (!isNumber$1(xVal) || !isNumber$1(yVal)) return false;
 	const x = xScale.getPixelForValue(xVal);
 	const y = yScale.getPixelForValue(yVal);
 	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 && typeof p.x === "number" && typeof p.y === "number");
+	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;
+		if (Math.abs(a.y - b.y) <= yThreshold && Math.abs(a.x - b.x) <= xThreshold) {
+			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) || !isFiniteNumber$1(xVal)) return false;
+	const currentYPx = yScale.getPixelForValue(yVal);
+	const currentXPx = xScale.getPixelForValue(xVal);
+	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) || !isFiniteNumber$1(otherXVal)) continue;
+		const otherYPx = otherYScale.getPixelForValue(otherYVal);
+		const otherXPx = otherXScale.getPixelForValue(otherXVal);
+		const otherSide = getLabelSide(ann);
+		const otherFont = ann?.labelConfig?.font;
+		const yThreshold = (currentHeight + (parseFontSize(otherFont) + 6)) / 2;
+		if ((currentSide === "center" || otherSide === "center" || currentSide === otherSide) && Math.abs(currentYPx - otherYPx) < yThreshold && Math.abs(currentXPx - otherXPx) < 160) return true;
+	}
+	return false;
+};
 var STORAGE_PREFIX = "chart_annotations";
 var getStorageKey = (persistenceId) => {
 	return `${STORAGE_PREFIX}:${persistenceId}`;
@@ -19509,12 +19748,9 @@ const getAnnotationPosition = (persistenceId, annotationId) => {
 	if (!persistenceId) return void 0;
 	return readStorage(persistenceId)[annotationId];
 };
-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 isDragActive = (chart, annotation) => {
+	const pluginEnabled = Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled);
+	return Boolean(annotation?.enableDrag && pluginEnabled);
 };
 var mapToBoxLikeLabelPosition = (position) => {
 	switch (position) {
@@ -19554,7 +19790,8 @@ var mapToBoxLikeLabelPosition = (position) => {
 	}
 };
 var handleLineEnter = (element, chart, annotation) => {
-	chart.canvas.style.cursor = CursorStyle.Pointer;
+	const canDrag = isDragActive(chart, annotation);
+	chart.canvas.style.cursor = canDrag ? CursorStyle.Pointer : CursorStyle.Initial;
 	if (element.options.scaleID?.includes(AxisType.X)) {
 		if (element.options.label) element.options.label.xAdjust = chart.chartArea.left;
 	}
@@ -19563,7 +19800,7 @@ var handleLineEnter = (element, chart, annotation) => {
 		element.label.options.display = true;
 		element.options.label.enabled = true;
 	}
-	if (annotation?.enableDrag) {
+	if (canDrag) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 	}
@@ -19577,14 +19814,14 @@ var handleLineLeave = (element, chart, annotation) => {
 		element.label.options.display = false;
 		element.options.label.enabled = false;
 	}
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = null;
 		chart.update("none");
 	}
 	chart.draw();
 };
 var handleBoxEnter = (element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		element.options.borderWidth = BORDER_WIDTH.HOVERED;
@@ -19593,7 +19830,7 @@ var handleBoxEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleBoxLeave = (element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = null;
 		element.options.borderWidth = BORDER_WIDTH.INITIAL;
 		chart.canvas.style.cursor = CursorStyle.Initial;
@@ -19602,7 +19839,7 @@ var handleBoxLeave = (element, chart, annotation) => {
 	chart.draw();
 };
 var handlePointEnter = (element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		element.options.borderWidth = BORDER_WIDTH.POINT_HOVERED;
@@ -19611,7 +19848,7 @@ var handlePointEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handlePointLeave = (element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = null;
 		element.options.borderWidth = BORDER_WIDTH.INITIAL;
 		chart.canvas.style.cursor = CursorStyle.Initial;
@@ -19620,7 +19857,7 @@ var handlePointLeave = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleLabelEnter = (element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = element.options.id || null;
 		chart.update("none");
 		chart.canvas.style.cursor = CursorStyle.Pointer;
@@ -19628,7 +19865,7 @@ var handleLabelEnter = (element, chart, annotation) => {
 	chart.draw();
 };
 var handleLabelLeave = (_element, chart, annotation) => {
-	if (annotation?.enableDrag) {
+	if (isDragActive(chart, annotation)) {
 		chart.hoveredAnnotationId = null;
 		chart.canvas.style.cursor = CursorStyle.Initial;
 		chart.update("none");
@@ -19759,25 +19996,41 @@ const generateAnn = (ann, index) => {
 		displayDragCoordinates: ann?.displayDragCoordinates ?? true
 	};
 };
-var getCalloutAnnotation = (refAnnotation, index) => {
+var getCalloutAnnotation = (refAnnotation, index, annotationsData, likelyOverlapSet, overlapCalloutYMap, layoutIndex) => {
 	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,
-		label: { display: false }
+		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))
+		}
 	};
 	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 strokeStyle = calloutCfg.strokeStyle ?? baseAnnotation.borderColor;
+	const connectorStrokeStyle = calloutCfg.strokeStyle ?? (hideBoxGlyphInOverlapMode ? refAnnotation?.color ?? "hsl(60, 10.34482759%, 12.5%)" : baseAnnotation.borderColor);
 	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 calloutId = `callout-annotation-${index}`;
-	return [baseAnnotation, {
+	const isCalloutDraggable = refAnnotation?.enableDrag !== false;
+	const calloutAnnotation = {
 		id: calloutId,
 		type: "label",
 		backgroundColor: "transparent",
@@ -19785,6 +20038,8 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		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";
 			return color;
 		},
@@ -19792,27 +20047,38 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		borderColor,
 		borderWidth: BORDER_WIDTH.INITIAL,
 		padding: 5,
-		display: (ctx) => (refAnnotation.display ?? true) && isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0),
+		display: canDisplayCallout,
 		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;
-			return stored?.x ?? explicit ?? resolveCalloutXValue(ctx, refAnnotation, calloutCfg, index);
+			const overlapCalloutAdjust = onlyWhenOverlapping && !calloutCfg?.xAdjust ? getOverlapCalloutXAdjust(refAnnotation) : calloutCfg?.xAdjust;
+			return stored?.x ?? explicit ?? resolveCalloutXValue(ctx, refAnnotation, {
+				...calloutCfg,
+				xAdjust: overlapCalloutAdjust,
+				layoutIndex
+			}, 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;
-			return stored?.y ?? explicit ?? resolveCalloutYValue(ctx, refAnnotation, calloutCfg, index);
+			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);
 		},
 		resizable: false,
 		displayDragCoordinates: false,
-		enableDrag: true,
+		enableDrag: isCalloutDraggable,
 		enter: ({ element }, { chart }) => {
-			return handleLabelEnter(element, chart, { enableDrag: true });
+			return handleLabelEnter(element, chart, { enableDrag: isCalloutDraggable });
 		},
 		leave: ({ element }, { chart }) => {
-			return handleLabelLeave(element, chart, { enableDrag: true });
+			return handleLabelLeave(element, chart, { enableDrag: isCalloutDraggable });
 		},
 		onDragStart: calloutCfg?.onDragStart ? () => (coords) => {
 			return calloutCfg.onDragStart?.(coords, refAnnotation);
@@ -19826,16 +20092,58 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		calloutConnector: {
 			enabled: true,
 			fromId: baseId,
-			strokeStyle,
+			strokeStyle: connectorStrokeStyle,
 			lineWidth,
 			startOffset,
 			endOffset
 		}
-	}];
+	};
+	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) return getCalloutAnnotation(ann, idx);
+		if (ann?.labelConfig?.callout?.enabled ?? false) {
+			const annotation = getCalloutAnnotation(ann, idx, annotationsData, likelyOverlapSet, overlapCalloutYMap, calloutLayoutIndex);
+			calloutLayoutIndex += 1;
+			return annotation;
+		}
 		return generateAnn(ann, idx);
 	});
 };