@oliasoft-open-source/charts-library 5.9.1 → 5.10.0-beta-2

package/dist/index.d.ts

@@ -1171,15 +1171,15 @@ declare module 'chart.js' {
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
+        calloutConnectorPlugin?: {
+            enableCalloutAnnotation?: boolean;
+        };
     }
 }
 
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        calloutConnectorPlugin?: {
-            enableCalloutAnnotation?: boolean;
-        };
+        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
     }
 }

package/dist/index.js

@@ -14364,7 +14364,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];
@@ -14450,8 +14450,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 = {
@@ -15889,7 +15889,7 @@ var isOlderPart = (act, req) => req > act || act.length > req.length && act.slic
 * @typedef { import('../../types/element').AnnotationElement } AnnotationElement
 */
 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));
 /**
 * @param {{value: number, start: number, end: number}} limit
 * @param {number} hitSize
@@ -15903,7 +15903,7 @@ var inLimit = (limit, hitSize) => limit.value >= limit.start - hitSize && limit.
 * @returns {Object}
 */
 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;
 }
 /**
@@ -15977,7 +15977,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,
@@ -16472,7 +16472,7 @@ 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;
+	return isNumber$1(opacity) ? clamp$2(opacity, 0, 1) : 1;
 }
 var positions = [
 	"left",
@@ -17912,7 +17912,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;
@@ -20879,87 +20879,511 @@ function addTransparency(input, alpha, out = "rgb") {
 }
 //#endregion
 //#region src/components/common/helpers/callout-helpers/callout-helpers.ts
+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 getNumericValue = (value, fallback = 0) => {
+	return typeof value === "number" ? value : fallback;
+};
+var getCalloutCfg = (annotation) => {
+	return annotation?.labelConfig?.callout ?? {};
+};
+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 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 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 = getNumericValue(annotation?.labelOffsetPx, 14);
+	const xAdjust = getNumericValue(annotation?.labelConfig?.xAdjust, 0);
+	const yAdjust = getNumericValue(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 getOriginalLabelRect = (chart, area, annotation, index) => {
+	const size = estimateLabelSize(chart, annotation, getCalloutCfg(annotation));
+	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 isRectOverlapping = (left, right) => {
+	return !(left.right <= right.left || right.right <= left.left || left.bottom <= right.top || right.bottom <= left.top);
+};
+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 = getCalloutCfg(annotation);
+		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 = getCalloutCfg(annotation);
+		const id = `callout-annotation-${index}`;
+		if (!calloutCfg?.enabled || !calloutCfg?.onlyWhenOverlapping) return [];
+		if (overlappingIds.has(id)) return [];
+		return [getOriginalLabelRect(chart, area, annotation, index)];
+	});
+};
+var isCalloutOverlapping = (ctx, refAnnotation, index) => {
+	const chart = getChartFromCtx$1(ctx);
+	if (!getCalloutCfg(refAnnotation)?.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 = getNumericValue(calloutCfg?.margin, DEFAULT_MARGIN);
+	const halfWidth = width / 2;
+	const reference = getReferencePoint$1(chart, area, annotation);
+	const direction = reference.side === "right" ? 1 : -1;
+	const gap = getNumericValue(calloutCfg?.gapPx, DEFAULT_LABEL_GAP);
+	const minConnectorLength = getNumericValue(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) => {
+	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 dy = typeof calloutCfg?.yAdjust === "number" ? 0 : DEFAULT_VERTICAL_OFFSET;
+	return reference.y + dy;
+};
+var getCalloutItems = (chart, area) => {
+	const overlappingIds = getOverlappingCalloutIds(chart);
+	return ((chart?.options)?.annotations?.annotationsData ?? []).flatMap((annotation, index) => {
+		const calloutCfg = getCalloutCfg(annotation);
+		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);
+		const hasStoredX = typeof calloutCfg?.xValue === "number" || !xScale;
+		const hasStoredY = typeof calloutCfg?.yValue === "number" || !yScale;
+		const side = reference.side;
+		const margin = getNumericValue(calloutCfg?.margin, DEFAULT_MARGIN);
+		return [{
+			annotation,
+			calloutCfg,
+			id,
+			index,
+			anchorY: reference.y,
+			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 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 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 getLayoutOrderY = (item) => {
+	return item.isFixed ? item.preferredY : item.anchorY;
+};
+var layoutSide = (items, occupiedRects = []) => {
+	const sorted = [...items].sort((left, right) => getLayoutOrderY(left) - getLayoutOrderY(right));
+	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) => getLayoutOrderY(left) - getLayoutOrderY(right));
+		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 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)
+	};
+};
 var resolveCalloutXValue = (ctx, refAnnotation, calloutCfg, index) => {
-	const chart = ctx?.chart;
+	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 = getXScale(chart, refAnnotation?.annotationAxis);
+	const scale = getXScale(chart, getAxisId(refAnnotation, "x"));
 	if (!scale) return xVal;
 	const hasCustomOffset = typeof calloutCfg?.xAdjust === "number";
 	const side = index % 2 === 0 ? 1 : -1;
-	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * 60;
+	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * DEFAULT_HORIZONTAL_OFFSET;
 	const basePx = scale.getPixelForValue(xVal);
-	const cxBase = basePx + dx;
 	const area = chart.chartArea;
-	const el = ctx?.element;
-	if (!area || !el) return scale.getValueForPixel(cxBase);
-	const margin = calloutCfg?.margin ?? 8;
-	const halfW = (el?.width ?? 0) / 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 = getNumericValue(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);
 };
 var resolveCalloutYValue = (ctx, refAnnotation, calloutCfg, index) => {
-	const chart = ctx?.chart;
-	const yVal = refAnnotation.yValue;
+	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 = getYScale(chart, refAnnotation?.annotationAxis);
+	const scale = getYScale(chart, getAxisId(refAnnotation, "y"));
 	if (!scale) return yVal;
 	const hasCustomOffset = typeof calloutCfg?.yAdjust === "number";
 	const row = Math.floor(index / 2);
-	const dy = hasCustomOffset ? calloutCfg?.yAdjust : -40 - row * 22;
+	const dy = hasCustomOffset ? calloutCfg?.yAdjust : DEFAULT_VERTICAL_OFFSET - row * DEFAULT_ROW_GAP;
 	const basePx = scale.getPixelForValue(yVal);
-	const cyBase = basePx + dy;
 	const area = chart.chartArea;
-	const el = ctx?.element;
-	if (!area || !el) return scale.getValueForPixel(cyBase);
-	const margin = calloutCfg?.margin ?? 8;
-	const halfH = (el?.height ?? 0) / 2;
-	let cy = cyBase;
-	let adjDy = dy;
-	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 = getNumericValue(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;
 var 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 = getXScale(chart, refAnnotation.annotationAxis);
-	const yScale = getYScale(chart, refAnnotation.annotationAxis);
-	const xVal = refAnnotation.xValue;
-	const yVal = refAnnotation.yValue;
-	if (!xScale || !yScale) return false;
-	if (typeof xVal !== "number" || typeof yVal !== "number") 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);
 };
 //#endregion
@@ -21260,7 +21684,14 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 	const calloutCfg = refAnnotation?.labelConfig?.callout ?? {};
 	const baseAnnotation = {
 		...baseRest,
-		label: { display: false }
+		label: {
+			...label,
+			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`;
@@ -21268,10 +21699,10 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 	const onCalloutDragStart = typeof calloutCfg?.onDragStart === "function" ? calloutCfg.onDragStart : void 0;
 	const onCalloutDrag = typeof calloutCfg?.onDrag === "function" ? calloutCfg.onDrag : void 0;
 	const onCalloutDragEnd = typeof calloutCfg?.onDragEnd === "function" ? calloutCfg.onDragEnd : void 0;
-	const strokeStyle = calloutCfg.strokeStyle ?? 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}`;
 	return [baseAnnotation, {
 		id: calloutId,
@@ -21281,14 +21712,18 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		color: (ctx) => {
 			const chart = getChartFromCtx(ctx);
 			if (!chart) 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: (ctx) => (refAnnotation.display ?? true) && isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0),
+		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}`);
@@ -21305,10 +21740,10 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		displayDragCoordinates: false,
 		enableDrag: true,
 		enter: ({ element }, { chart }) => {
-			return handleLabelEnter(element, chart, { enableDrag: true });
+			return handleLabelEnter(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
 		},
 		leave: ({ element }, { chart }) => {
-			return handleLabelLeave(element, chart, { enableDrag: true });
+			return handleLabelLeave(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
 		},
 		onDragStart: onCalloutDragStart ? () => (coords) => {
 			return onCalloutDragStart(coords, refAnnotation);
@@ -21325,7 +21760,13 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 			strokeStyle,
 			lineWidth,
 			startOffset,
-			endOffset
+			endOffset,
+			anchor: {
+				position: refAnnotation?.labelConfig?.position,
+				xAdjust: refAnnotation?.labelConfig?.xAdjust,
+				yAdjust: refAnnotation?.labelConfig?.yAdjust,
+				labelOffsetPx: refAnnotation?.labelOffsetPx
+			}
 		}
 	}];
 };
@@ -22146,52 +22587,126 @@ var annotationDraggerPlugin = {
 };
 //#endregion
 //#region src/components/line-chart/plugins/callout-plugin/helpers.ts
-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
+	};
 };
 var 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
 	};
 };
 //#endregion
@@ -22214,17 +22729,24 @@ var 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?.();
 		});
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "5.9.1",
+  "version": "5.10.0-beta-2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {