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

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;
@@ -18839,7 +18839,7 @@ var BORDER_WIDTH = {
 var BORDER_COLOR = "rgba(0,0,0,0.1)";
 var ANNOTATION_DASH = [10, 2];
 var DEFAULT_FONT_FAMILY = "\"Roobert\", \"Noto Sans\", sans-serif";
-var DEFAULT_COLOR$1 = "hsl(60, 10.34482759%, 12.5%)";
+var DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
 var LOGARITHMIC_STEPS = [
 	1,
 	10,
@@ -19024,7 +19024,7 @@ var getChartFileName = (axes) => {
 var setDefaultTheme = () => {
 	defaults$1.font.size = 12;
 	defaults$1.font.family = DEFAULT_FONT_FAMILY;
-	defaults$1.color = DEFAULT_COLOR$1;
+	defaults$1.color = DEFAULT_COLOR;
 	defaults$1.borderColor = BORDER_COLOR;
 };
 var isEmptyString = (value) => value === "";
@@ -20190,33 +20190,20 @@ var defaultAnnotations$2 = (annotations) => ({
 			controlAnnotation: annotationConfig?.controlAnnotation ?? false,
 			enableDragAnnotation: annotationConfig?.enableDragAnnotation ?? false,
 			enableCalloutAnnotation: annotationConfig?.enableCalloutAnnotation ?? false,
-			lineMarkersAnnotation: {
-				enabled: annotationConfig?.lineMarkersAnnotation?.enabled ?? false,
-				itemGapPx: annotationConfig?.lineMarkersAnnotation?.itemGapPx ?? 4,
-				edgePaddingPx: annotationConfig?.lineMarkersAnnotation?.edgePaddingPx ?? 8,
-				horizontalLineLengthPx: annotationConfig?.lineMarkersAnnotation?.horizontalLineLengthPx,
-				lineDirection: annotationConfig?.lineMarkersAnnotation?.lineDirection,
-				labelCollisionPx: annotationConfig?.lineMarkersAnnotation?.labelCollisionPx ?? 4,
-				labelCollisionClusterXPx: annotationConfig?.lineMarkersAnnotation?.labelCollisionClusterXPx ?? 36,
-				enableLabelCollisionResolver: annotationConfig?.lineMarkersAnnotation?.enableLabelCollisionResolver ?? true,
-				stickToEdge: annotationConfig?.lineMarkersAnnotation?.stickToEdge ?? true,
-				stickToGroup: annotationConfig?.lineMarkersAnnotation?.stickToGroup ?? false,
-				stickSide: annotationConfig?.lineMarkersAnnotation?.stickSide ?? "right",
-				reverse: annotationConfig?.lineMarkersAnnotation?.reverse ?? false,
-				xValue: annotationConfig?.lineMarkersAnnotation?.xValue,
-				yValue: annotationConfig?.lineMarkersAnnotation?.yValue,
-				yStartValue: annotationConfig?.lineMarkersAnnotation?.yStartValue,
-				yEndValue: annotationConfig?.lineMarkersAnnotation?.yEndValue,
-				xStartValue: annotationConfig?.lineMarkersAnnotation?.xStartValue,
-				xEndValue: annotationConfig?.lineMarkersAnnotation?.xEndValue,
-				lengthPx: annotationConfig?.lineMarkersAnnotation?.lengthPx,
-				color: annotationConfig?.lineMarkersAnnotation?.color ?? "rgba(20,20,20,0.9)",
-				opacity: annotationConfig?.lineMarkersAnnotation?.opacity ?? 1,
-				lineWidth: annotationConfig?.lineMarkersAnnotation?.lineWidth ?? 1,
-				lineDash: annotationConfig?.lineMarkersAnnotation?.lineDash ?? [],
-				startTick: annotationConfig?.lineMarkersAnnotation?.startTick,
-				endTick: annotationConfig?.lineMarkersAnnotation?.endTick,
-				items: annotationConfig?.lineMarkersAnnotation?.items ?? []
+			verticalMarkersAnnotation: {
+				enabled: annotationConfig?.verticalMarkersAnnotation?.enabled ?? false,
+				itemGapPx: annotationConfig?.verticalMarkersAnnotation?.itemGapPx ?? 4,
+				edgePaddingPx: annotationConfig?.verticalMarkersAnnotation?.edgePaddingPx ?? 8,
+				stickToEdge: annotationConfig?.verticalMarkersAnnotation?.stickToEdge ?? true,
+				stickSide: annotationConfig?.verticalMarkersAnnotation?.stickSide ?? "right",
+				reverse: annotationConfig?.verticalMarkersAnnotation?.reverse ?? false,
+				xValue: annotationConfig?.verticalMarkersAnnotation?.xValue,
+				yStartValue: annotationConfig?.verticalMarkersAnnotation?.yStartValue,
+				color: annotationConfig?.verticalMarkersAnnotation?.color ?? "rgba(20,20,20,0.9)",
+				opacity: annotationConfig?.verticalMarkersAnnotation?.opacity ?? 1,
+				lineWidth: annotationConfig?.verticalMarkersAnnotation?.lineWidth ?? 1,
+				lineDash: annotationConfig?.verticalMarkersAnnotation?.lineDash ?? [],
+				items: annotationConfig?.verticalMarkersAnnotation?.items ?? []
 			},
 			annotationsData: defaultAnnotationsData$2(Array.isArray(annotations) ? annotations : annotations?.annotationsData)
 		};
@@ -20892,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
@@ -21273,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`;
@@ -21281,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,
@@ -21294,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}`);
@@ -21318,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);
@@ -21338,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
+			}
 		}
 	}];
 };
@@ -21519,11 +21947,6 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		state
 	]);
 	const dragData = useMemo(() => enableDragPoints && getDraggableData(options), [enableDragPoints, options]);
-	const onChartHover = useMemo(() => onHover(hoveredPoint, setHoveredPoint, generatedDatasets), [
-		generatedDatasets,
-		hoveredPoint,
-		onHover
-	]);
 	const panOptions = useMemo(() => ({
 		enabled: panEnabled,
 		mode: PanZoomMode.XY,
@@ -21554,13 +21977,13 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		updateAxesRangesFromChart,
 		zoomEnabled
 	]);
-	const lineMarkersAnnotation = options?.annotations?.lineMarkersAnnotation ?? {};
-	const lineMarkersPluginEnabled = Boolean(options?.plugins?.lineMarkersPlugin?.enabled ?? lineMarkersAnnotation?.enabled);
-	const plugins = {
+	const verticalMarkersAnnotation = options?.annotations?.verticalMarkersAnnotation ?? {};
+	const verticalMarkersPluginEnabled = Boolean(options?.plugins?.verticalMarkersPlugin?.enabled ?? verticalMarkersAnnotation?.enabled);
+	const plugins = useMemo(() => ({
 		datalabels,
 		annotationDraggerPlugin: { enabled: state?.enableDragAnnotation },
 		calloutConnectorPlugin: { enableCalloutAnnotation: options?.annotations.enableCalloutAnnotation },
-		lineMarkersPlugin: { enabled: lineMarkersPluginEnabled },
+		verticalMarkersPlugin: { enabled: verticalMarkersPluginEnabled },
 		annotation: toAnnotationObject(annotation),
 		zoom: {
 			pan: panOptions,
@@ -21585,7 +22008,32 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 			lineHeight
 		},
 		...dragData
-	};
+	}), [
+		annotation,
+		customLegendPlugin,
+		datalabels,
+		dragData,
+		fontSize,
+		legend,
+		lineHeight,
+		maxWidth,
+		options?.annotations.enableCalloutAnnotation,
+		panOptions,
+		position,
+		showLabel,
+		state?.enableDragAnnotation,
+		text,
+		tooltip,
+		verticalMarkersPluginEnabled,
+		xOffset,
+		yOffset,
+		zoomOptions
+	]);
+	const onChartHover = useMemo(() => onHover(hoveredPoint, setHoveredPoint, generatedDatasets), [
+		generatedDatasets,
+		hoveredPoint,
+		onHover
+	]);
 	return useMemo(() => ({
 		persistenceId,
 		layout: { padding: layoutPadding },
@@ -21613,6 +22061,7 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		layoutPadding,
 		lineEnabled,
 		onAnimationComplete,
+		onChartHover,
 		options?.annotations,
 		options?.chartStyling?.maintainAspectRatio,
 		options?.chartStyling?.performanceMode,
@@ -22138,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
@@ -22206,49 +22729,30 @@ 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?.();
 		});
 	}
 };
 //#endregion
-//#region src/components/line-chart/plugins/line-markers-plugin/types.ts
-var LineMarkerSide = /* @__PURE__ */ function(LineMarkerSide) {
-	LineMarkerSide["Left"] = "left";
-	LineMarkerSide["Right"] = "right";
-	return LineMarkerSide;
-}({});
-var LineMarkerDirection = /* @__PURE__ */ function(LineMarkerDirection) {
-	LineMarkerDirection["Vertical"] = "vertical";
-	LineMarkerDirection["Horizontal"] = "horizontal";
-	return LineMarkerDirection;
-}({});
-var LineMarkerLabelPosition = /* @__PURE__ */ function(LineMarkerLabelPosition) {
-	LineMarkerLabelPosition["Left"] = "left";
-	LineMarkerLabelPosition["Right"] = "right";
-	LineMarkerLabelPosition["Top"] = "top";
-	LineMarkerLabelPosition["Bottom"] = "bottom";
-	LineMarkerLabelPosition["OnLine"] = "onLine";
-	return LineMarkerLabelPosition;
-}({});
-var LineMarkerTextAlign = /* @__PURE__ */ function(LineMarkerTextAlign) {
-	LineMarkerTextAlign["Left"] = "left";
-	LineMarkerTextAlign["Right"] = "right";
-	LineMarkerTextAlign["Center"] = "center";
-	return LineMarkerTextAlign;
-}({});
-//#endregion
-//#region src/components/line-chart/plugins/line-markers-plugin/utils.ts
+//#region src/components/line-chart/plugins/vertical-markers-plugin/utils.ts
 var isFiniteNumber = (v) => {
 	return isNumber(v) && Number.isFinite(v);
 };
@@ -22274,335 +22778,68 @@ var clamp = (v, min, max) => {
 var crispLinePx = (v) => {
 	return Math.round(v) + .5;
 };
-var toLines = (label) => {
-	if (!label) return [];
-	return isArray(label) ? label : [label];
-};
-var lineHeightPx = (font) => {
-	const match = /(\d+)\s*px/i.exec(font);
-	const size = match ? Number(match[1]) : 12;
-	return Math.max(10, Math.round(size * 1.2));
-};
-var clusterByXDistance = (labels, clusterXPx) => {
-	if (!labels.length) return [];
-	const sorted = [...labels].sort((a, b) => a.x - b.x);
-	const clusters = [];
-	let current = [sorted[0]];
-	for (let i = 1; i < sorted.length; i += 1) {
-		const prev = sorted[i - 1];
-		const currentItem = sorted[i];
-		if (Math.abs(currentItem.x - prev.x) <= clusterXPx) {
-			current.push(currentItem);
-			continue;
-		}
-		clusters.push(current);
-		current = [currentItem];
-	}
-	clusters.push(current);
-	return clusters;
-};
-var resolveCluster = ({ labels, chartTop, chartBottom, gapPx }) => {
-	const sorted = [...labels].sort((a, b) => a.y - b.y);
-	if (!sorted.length) return {};
-	const placed = sorted.map((item) => ({
-		...item,
-		placedY: item.y
-	}));
-	for (let i = 1; i < placed.length; i += 1) {
-		const prev = placed[i - 1];
-		const curr = placed[i];
-		const prevBottom = prev.placedY + prev.height / 2;
-		const currTop = curr.placedY - curr.height / 2;
-		const overlap = prevBottom + gapPx - currTop;
-		if (overlap > 0) curr.placedY += overlap;
-	}
-	const last = placed[placed.length - 1];
-	const overflowBottom = last.placedY + last.height / 2 - chartBottom;
-	if (overflowBottom > 0) placed.forEach((item) => {
-		item.placedY -= overflowBottom;
-	});
-	const first = placed[0];
-	const overflowTop = chartTop - (first.placedY - first.height / 2);
-	if (overflowTop > 0) placed.forEach((item) => {
-		item.placedY += overflowTop;
-	});
-	return placed.reduce((acc, item) => {
-		acc[item.id] = clamp(item.placedY, chartTop, chartBottom);
-		return acc;
-	}, {});
-};
-var resolveLabelCollisions = ({ labels, chartTop, chartBottom, clusterXPx, gapPx }) => {
-	const result = {};
-	[LineMarkerSide.Left, LineMarkerSide.Right].forEach((side) => {
-		clusterByXDistance(labels.filter((label) => label.side === side), clusterXPx).forEach((cluster) => {
-			Object.assign(result, resolveCluster({
-				labels: cluster,
-				chartTop,
-				chartBottom,
-				gapPx
-			}));
-		});
-	});
-	return result;
-};
 //#endregion
-//#region src/components/line-chart/plugins/line-markers-plugin/draw.ts
-var drawLineSegment = ({ chart, x1, y1, x2, y2, color, opacity, lineWidth, lineDash }) => {
+//#region src/components/line-chart/plugins/vertical-markers-plugin/draw.ts
+var drawVerticalLine = ({ chart, xPx, y1, y2, color, opacity, lineWidth, lineDash }) => {
 	const { ctx } = chart ?? {};
-	const startX = crispLinePx(x1);
-	const endX = crispLinePx(x2);
-	const startY = crispLinePx(y1);
-	const endY = crispLinePx(y2);
+	const x = crispLinePx(xPx);
 	ctx?.save?.();
 	ctx.globalAlpha = opacity;
 	ctx?.beginPath?.();
 	ctx.lineWidth = lineWidth;
 	ctx.strokeStyle = color;
 	ctx?.setLineDash?.(lineDash);
-	ctx.lineCap = "butt";
-	ctx?.moveTo?.(startX, startY);
-	ctx?.lineTo?.(endX, endY);
+	ctx.lineCap = "round";
+	ctx?.moveTo?.(x, y1);
+	ctx?.lineTo?.(x, y2);
 	ctx?.stroke?.();
 	ctx?.restore?.();
-	return {
-		x1: startX,
-		y1: startY,
-		x2: endX,
-		y2: endY
-	};
-};
-var isWithin = (value, min, max) => {
-	return value >= min && value <= max;
-};
-var isTickElementInsideByDirection = (args) => {
-	const { direction, chartArea, box } = args;
-	if (direction === LineMarkerDirection.Vertical) return box.top >= chartArea.top && box.bottom <= chartArea.bottom;
-	return box.left >= chartArea.left && box.right <= chartArea.right;
-};
-var resolveDefaultLabelPosition = (args) => {
-	const { direction, side } = args;
-	if (direction === LineMarkerDirection.Vertical) return side === LineMarkerSide.Left ? LineMarkerLabelPosition.Right : LineMarkerLabelPosition.Left;
-	return side === LineMarkerSide.Left ? LineMarkerLabelPosition.Right : LineMarkerLabelPosition.Left;
-};
-var getLabelAnchor = (args) => {
-	const { x, y, direction, labelOffset, bootSize, labelPosition } = args;
-	const distance = bootSize + labelOffset;
-	if (direction === LineMarkerDirection.Horizontal) switch (labelPosition) {
-		case LineMarkerLabelPosition.Left: return {
-			x: x - distance,
-			y,
-			textAlign: LineMarkerTextAlign.Right
-		};
-		case LineMarkerLabelPosition.Right: return {
-			x: x + distance,
-			y,
-			textAlign: LineMarkerTextAlign.Left
-		};
-		case LineMarkerLabelPosition.Top: return {
-			x,
-			y: y - distance,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		case LineMarkerLabelPosition.Bottom: return {
-			x,
-			y: y + distance,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		case LineMarkerLabelPosition.OnLine: return {
-			x,
-			y,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		default: return {
-			x,
-			y,
-			textAlign: LineMarkerTextAlign.Center
-		};
-	}
-	switch (labelPosition) {
-		case LineMarkerLabelPosition.Left: return {
-			x: x - distance,
-			y,
-			textAlign: LineMarkerTextAlign.Right
-		};
-		case LineMarkerLabelPosition.Right: return {
-			x: x + distance,
-			y,
-			textAlign: LineMarkerTextAlign.Left
-		};
-		case LineMarkerLabelPosition.Top: return {
-			x,
-			y: y - distance,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		case LineMarkerLabelPosition.Bottom: return {
-			x,
-			y: y + distance,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		case LineMarkerLabelPosition.OnLine: return {
-			x,
-			y,
-			textAlign: LineMarkerTextAlign.Center
-		};
-		default: return {
-			x,
-			y,
-			textAlign: LineMarkerTextAlign.Center
-		};
-	}
-};
-var getLineTextBox = (args) => {
-	const { textAlign, x, y, width, lineHeight } = args;
-	return {
-		left: textAlign === LineMarkerTextAlign.Right ? x - width : textAlign === LineMarkerTextAlign.Center ? x - width / 2 : x,
-		right: textAlign === LineMarkerTextAlign.Right ? x : textAlign === LineMarkerTextAlign.Center ? x + width / 2 : x + width,
-		top: y - lineHeight / 2,
-		bottom: y + lineHeight / 2
-	};
-};
-var getOppositeLabelPosition = (position) => {
-	switch (position) {
-		case LineMarkerLabelPosition.Left: return LineMarkerLabelPosition.Right;
-		case LineMarkerLabelPosition.Right: return LineMarkerLabelPosition.Left;
-		case LineMarkerLabelPosition.Top: return LineMarkerLabelPosition.Bottom;
-		case LineMarkerLabelPosition.Bottom: return LineMarkerLabelPosition.Top;
-		default: return LineMarkerLabelPosition.OnLine;
-	}
+	return x;
 };
 var drawTick = (args) => {
-	const { ctx, x, y, side, tick, defaultColor, defaultFont, chartArea } = args ?? {};
-	const direction = args?.direction ?? LineMarkerDirection.Vertical;
+	const { ctx, x, y, side, tick, defaultColor, defaultFont } = args ?? {};
 	const reverse = Boolean(args?.reverse);
-	const labelY = args?.labelY ?? y;
-	const bootEnabled = tick?.enabled ?? true;
-	const hasLabel = Array.isArray(tick?.label) ? tick.label.length > 0 : Boolean(tick?.label);
-	if (!bootEnabled && !hasLabel) return;
 	const color = tick?.color ?? defaultColor;
 	const font = tick?.font ?? defaultFont;
 	const labelOffset = tick?.labelOffsetPx ?? 6;
-	const bootSize = tick?.sizePx ?? 6;
-	const dir = side === LineMarkerSide.Left ? 1 : -1;
+	const bootSize = 6;
+	const dir = side === "left" ? 1 : -1;
 	const xTickEnd = x;
 	ctx?.save?.();
 	ctx.strokeStyle = color;
 	ctx.fillStyle = color;
 	ctx.lineWidth = 1;
-	const xOuter = direction === LineMarkerDirection.Vertical ? xTickEnd + dir * bootSize : xTickEnd;
-	const yOuter = direction === LineMarkerDirection.Horizontal ? y + (reverse ? bootSize : -bootSize) : y;
-	const xThird = direction === LineMarkerDirection.Vertical ? xTickEnd : xTickEnd + dir * bootSize;
-	const yThird = reverse ? y + bootSize : y - bootSize;
-	const bootBounds = {
-		left: Math.min(xTickEnd, xOuter, xThird),
-		right: Math.max(xTickEnd, xOuter, xThird),
-		top: Math.min(y, yOuter, yThird),
-		bottom: Math.max(y, yOuter, yThird)
-	};
-	const canDrawBoot = (direction === LineMarkerDirection.Vertical ? isWithin(y, chartArea.top, chartArea.bottom) : isWithin(xTickEnd, chartArea.left, chartArea.right)) && isTickElementInsideByDirection({
-		direction,
-		chartArea,
-		box: bootBounds
-	});
-	if (bootEnabled && canDrawBoot) {
-		ctx?.beginPath?.();
-		ctx?.moveTo?.(xTickEnd, y);
-		ctx?.lineTo?.(xOuter, yOuter);
-		ctx?.lineTo?.(xThird, yThird);
-		ctx?.closePath?.();
-		ctx?.fill?.();
-	}
+	const xOuter = xTickEnd + dir * bootSize;
+	ctx?.beginPath?.();
+	ctx?.moveTo?.(xTickEnd, y);
+	ctx?.lineTo?.(xOuter, y);
+	ctx?.lineTo?.(xTickEnd, reverse ? y + bootSize : y - bootSize);
+	ctx?.closePath?.();
+	ctx?.fill?.();
 	const label = tick.label;
 	if (label) {
 		ctx.font = font;
 		ctx.textBaseline = "middle";
-		const preferredPosition = tick?.labelPosition ?? resolveDefaultLabelPosition({
-			direction,
-			side
-		});
-		const fallbackPositions = [
-			preferredPosition,
-			getOppositeLabelPosition(preferredPosition),
-			LineMarkerLabelPosition.Top,
-			LineMarkerLabelPosition.Bottom,
-			LineMarkerLabelPosition.OnLine
-		].filter((value, index, arr) => arr.indexOf(value) === index);
-		for (const labelPosition of fallbackPositions) {
-			const anchor = getLabelAnchor({
-				x: xTickEnd,
-				y: labelY,
-				direction,
-				labelOffset,
-				bootSize,
-				labelPosition
-			});
-			const labelTextAlign = anchor.textAlign;
-			ctx.textAlign = labelTextAlign;
-			if (Array.isArray(label)) {
-				const lineH = lineHeightPx(font);
-				const startY = anchor.y - (label.length - 1) * lineH / 2;
-				const metrics = label.map((line, i) => {
-					const text = String(line);
-					const width = ctx.measureText(text).width;
-					const yLine = startY + i * lineH;
-					return {
-						text,
-						yLine,
-						box: getLineTextBox({
-							textAlign: labelTextAlign,
-							x: anchor.x,
-							y: yLine,
-							width,
-							lineHeight: lineH
-						})
-					};
-				});
-				if (!metrics.every((lineData) => isTickElementInsideByDirection({
-					direction,
-					chartArea,
-					box: lineData.box
-				}))) continue;
-				metrics.forEach((lineData) => ctx?.fillText?.(lineData.text, anchor.x, lineData.yLine));
-				break;
-			} else {
-				const text = String(label);
-				const width = ctx.measureText(text).width;
-				const lineH = lineHeightPx(font);
-				if (!isTickElementInsideByDirection({
-					direction,
-					chartArea,
-					box: getLineTextBox({
-						textAlign: labelTextAlign,
-						x: anchor.x,
-						y: anchor.y,
-						width,
-						lineHeight: lineH
-					})
-				})) continue;
-				ctx?.fillText?.(text, anchor.x, anchor.y);
-				break;
-			}
-		}
+		ctx.textAlign = side === "left" ? "left" : "right";
+		const tx = xOuter + dir * labelOffset;
+		if (Array.isArray(label)) {
+			const lineH = 12;
+			const startY = y - (label.length - 1) * lineH / 2;
+			label?.forEach((line, i) => ctx?.fillText?.(String(line), tx, startY + i * lineH));
+		} else ctx?.fillText?.(String(label), tx, y);
 	}
 	ctx?.restore?.();
 };
-var getTickLabelHeight = (tick, defaultFont) => {
-	const lines = toLines(tick?.label);
-	if (!lines.length) return 0;
-	const lineHeight = lineHeightPx(tick?.font ?? defaultFont);
-	return lines.length * lineHeight;
-};
 //#endregion
-//#region src/components/line-chart/plugins/line-markers-plugin/line-markers-plugin.ts
-var DEFAULT_FONT = "12px sans-serif";
-var DEFAULT_COLOR = "rgba(20,20,20,0.9)";
+//#region src/components/line-chart/plugins/vertical-markers-plugin/vertical-markers-plugin.ts
 var readPluginEnable = (chart) => {
-	const { lineMarkersPlugin } = chart?.options?.plugins ?? {};
-	return asObject(lineMarkersPlugin)?.enabled === true;
+	const { verticalMarkersPlugin } = chart?.options?.plugins ?? {};
+	return asObject(verticalMarkersPlugin)?.enabled === true;
 };
 var readAnnotationConfig = (chart) => {
 	const optionsWithAnnotations = chart?.options;
 	const configWithAnnotations = chart?.config?.options;
-	return asObject(configWithAnnotations?.annotations?.lineMarkersAnnotation) ?? asObject(optionsWithAnnotations?.annotations?.lineMarkersAnnotation);
+	return asObject(configWithAnnotations?.annotations?.verticalMarkersAnnotation) ?? asObject(optionsWithAnnotations?.annotations?.verticalMarkersAnnotation);
 };
 var readOwnBoolean = (obj, key) => {
 	if (!obj || typeof obj !== "object") return void 0;
@@ -22610,242 +22847,39 @@ var readOwnBoolean = (obj, key) => {
 	if (!descriptor || !("value" in descriptor)) return void 0;
 	return typeof descriptor?.value === "boolean" ? descriptor?.value : void 0;
 };
-var getMarkerDirection = (item, global) => {
-	return item?.direction ?? global?.lineDirection ?? LineMarkerDirection.Vertical;
-};
-var resolveSide = (item, global) => {
-	return item?.stickSide ?? global?.stickSide ?? LineMarkerSide.Right;
-};
-var getEdgeX = (chartArea, side, edgePaddingPx) => {
-	return clamp(side === LineMarkerSide.Left ? chartArea?.left + edgePaddingPx : chartArea?.right - edgePaddingPx, chartArea?.left, chartArea?.right);
-};
-var computeVerticalXPxBase = (args) => {
+var computeXPxBase = (args) => {
 	const { chart, chartArea, item, global } = args ?? {};
 	const stickToEdge = item?.stickToEdge ?? global?.stickToEdge ?? true;
-	const side = resolveSide(item, global);
+	const stickSide = item?.stickSide ?? global?.stickSide ?? "right";
 	const edgePaddingPx = global?.edgePaddingPx ?? 0;
 	const xValue = item?.xValue ?? global?.xValue;
 	if (isFiniteNumber(xValue)) return getPixelForValueSafe(resolveScale(chart, item?.xScaleID, "x"), xValue);
-	if (stickToEdge) return getEdgeX(chartArea, side, edgePaddingPx);
+	if (stickToEdge) return clamp(stickSide === "left" ? chartArea?.left + edgePaddingPx : chartArea?.right - edgePaddingPx, chartArea?.left, chartArea?.right);
 };
-var computeVerticalLineGeometry = (args) => {
-	const { chart, chartArea, item, global, xPx } = args ?? {};
+var computeYSpan = (args) => {
+	const { chart, chartArea, item, global } = args ?? {};
 	const yScale = resolveScale(chart, item?.yScaleID, "y");
 	if (!yScale) return void 0;
-	const reverse = readOwnBoolean(item, "reverse") ?? readOwnBoolean(global, "reverse") ?? false;
 	const yStartValue = item?.yStartValue ?? global?.yStartValue;
-	const yEndValue = item?.yEndValue ?? item?.value ?? global?.yEndValue;
-	if (!isFiniteNumber(yEndValue)) return void 0;
-	const y1 = isFiniteNumber(yStartValue) ? yScale.getPixelForValue(yStartValue) : reverse ? chartArea?.bottom : chartArea?.top;
-	const y1InArea = y1 >= chartArea?.top && y1 <= chartArea?.bottom;
-	const y2Raw = yScale.getPixelForValue(yEndValue);
-	const y2InArea = y2Raw >= chartArea?.top && y2Raw <= chartArea?.bottom;
-	const y2 = clamp(y2Raw, chartArea?.top, chartArea?.bottom);
-	return {
-		x1: xPx,
-		y1: clamp(y1, chartArea?.top, chartArea?.bottom),
-		x2: xPx,
-		y2,
-		startInArea: y1InArea,
-		endInArea: y2InArea,
-		axisInArea: xPx >= chartArea.left && xPx <= chartArea.right,
-		side: resolveSide(item, global),
-		direction: LineMarkerDirection.Vertical
-	};
-};
-var resolveHorizontalSpan = (args) => {
-	const { chart, chartArea, item, global, side, groupAnchorXPx, previousGroupItemXPx } = args ?? {};
-	const xScale = resolveScale(chart, item?.xScaleID, "x");
-	if (!xScale) return void 0;
-	const stickToEdge = item?.stickToEdge ?? global?.stickToEdge ?? true;
-	const stickToGroup = item?.stickToGroup ?? global?.stickToGroup ?? false;
-	const edgePaddingPx = global?.edgePaddingPx ?? 0;
-	const dirIntoChart = side === LineMarkerSide.Left ? 1 : -1;
-	const fixedLengthPx = item?.lengthPx ?? global?.lengthPx ?? global?.horizontalLineLengthPx;
-	const edgeX = getEdgeX(chartArea, side, edgePaddingPx);
-	const xStartValue = item?.xStartValue ?? global?.xStartValue;
-	const xEndValue = item?.xEndValue ?? global?.xEndValue;
-	const xValue = item?.xValue ?? global?.xValue;
-	const xStartPxRaw = isFiniteNumber(xStartValue) ? xScale.getPixelForValue(xStartValue) : void 0;
-	const xEndPxRaw = isFiniteNumber(xEndValue) ? xScale.getPixelForValue(xEndValue) : void 0;
-	const xStartPx = isFiniteNumber(xStartPxRaw) ? clamp(xStartPxRaw, chartArea?.left, chartArea?.right) : void 0;
-	const xEndPx = isFiniteNumber(xEndPxRaw) ? clamp(xEndPxRaw, chartArea?.left, chartArea?.right) : void 0;
-	if (stickToEdge && stickToGroup && isFiniteNumber(groupAnchorXPx)) {
-		const groupXRaw = groupAnchorXPx;
-		if (groupXRaw < chartArea.left || groupXRaw > chartArea.right) return;
-		const groupX = clamp(groupXRaw, chartArea?.left, chartArea?.right);
-		const edgeX = side === LineMarkerSide.Left ? chartArea.left : chartArea.right;
-		const x2Raw = isFiniteNumber(fixedLengthPx) ? edgeX + dirIntoChart * fixedLengthPx : groupX;
-		return {
-			x1: edgeX,
-			x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-			startInArea: edgeX >= chartArea.left && edgeX <= chartArea.right,
-			endInArea: isFiniteNumber(fixedLengthPx) ? x2Raw >= chartArea.left && x2Raw <= chartArea.right : groupX >= chartArea.left && groupX <= chartArea.right
-		};
-	}
-	if (!stickToEdge && stickToGroup && isFiniteNumber(fixedLengthPx)) {
-		const rawAnchor = previousGroupItemXPx ?? (isFiniteNumber(groupAnchorXPx) ? groupAnchorXPx : void 0);
-		if (!isFiniteNumber(rawAnchor)) return void 0;
-		const anchorX = clamp(rawAnchor, chartArea?.left, chartArea?.right);
-		const x2Raw = anchorX + dirIntoChart * fixedLengthPx;
-		return {
-			x1: anchorX,
-			x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-			startInArea: rawAnchor >= chartArea.left && rawAnchor <= chartArea.right,
-			endInArea: x2Raw >= chartArea.left && x2Raw <= chartArea.right
-		};
-	}
-	if (isFiniteNumber(xStartPx) && isFiniteNumber(xEndPx)) {
-		const startRaw = xStartPxRaw;
-		const endRaw = xEndPxRaw;
-		if (!isFiniteNumber(startRaw) || !isFiniteNumber(endRaw)) return void 0;
-		return {
-			x1: xStartPx,
-			x2: xEndPx,
-			startInArea: startRaw >= chartArea.left && startRaw <= chartArea.right,
-			endInArea: endRaw >= chartArea.left && endRaw <= chartArea.right
-		};
-	}
-	if (isFiniteNumber(xStartPx) && isFiniteNumber(fixedLengthPx)) {
-		const x2Raw = xStartPx + dirIntoChart * fixedLengthPx;
-		return {
-			x1: xStartPx,
-			x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-			startInArea: xStartPx >= chartArea.left && xStartPx <= chartArea.right,
-			endInArea: x2Raw >= chartArea.left && x2Raw <= chartArea.right
-		};
-	}
-	if (isFiniteNumber(xEndPx) && isFiniteNumber(fixedLengthPx)) {
-		const x1Raw = xEndPx - dirIntoChart * fixedLengthPx;
-		return {
-			x1: clamp(x1Raw, chartArea?.left, chartArea?.right),
-			x2: xEndPx,
-			startInArea: x1Raw >= chartArea.left && x1Raw <= chartArea.right,
-			endInArea: xEndPx >= chartArea.left && xEndPx <= chartArea.right
-		};
-	}
-	const xValuePxRaw = isFiniteNumber(xValue) ? xScale.getPixelForValue(xValue) : void 0;
-	if (isFiniteNumber(xValuePxRaw) && isFiniteNumber(fixedLengthPx)) {
-		const xAnchor = clamp(xValuePxRaw, chartArea?.left, chartArea?.right);
-		const x2Raw = xAnchor + dirIntoChart * fixedLengthPx;
-		return {
-			x1: xAnchor,
-			x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-			startInArea: xValuePxRaw >= chartArea.left && xValuePxRaw <= chartArea.right,
-			endInArea: x2Raw >= chartArea.left && x2Raw <= chartArea.right
-		};
-	}
-	if (stickToEdge && isFiniteNumber(fixedLengthPx)) {
-		const x2Raw = edgeX + dirIntoChart * fixedLengthPx;
-		return {
-			x1: edgeX,
-			x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-			startInArea: edgeX >= chartArea.left && edgeX <= chartArea.right,
-			endInArea: x2Raw >= chartArea.left && x2Raw <= chartArea.right
-		};
-	}
-};
-var computeHorizontalLineGeometry = (args) => {
-	const { chart, chartArea, item, global, groupAnchorXPx, previousGroupItemXPx } = args ?? {};
-	const yScale = resolveScale(chart, item?.yScaleID, "y");
-	if (!yScale) return void 0;
-	const yValue = item?.yValue ?? item?.value ?? global?.yValue;
-	if (!isFiniteNumber(yValue)) return void 0;
-	const side = resolveSide(item, global);
-	const span = resolveHorizontalSpan({
-		chart,
-		chartArea,
-		item,
-		global,
-		side,
-		groupAnchorXPx,
-		previousGroupItemXPx
-	});
-	if (!span) return void 0;
-	const yPxRaw = yScale.getPixelForValue(yValue);
-	const yPx = clamp(yPxRaw, chartArea?.top, chartArea?.bottom);
-	const yInArea = yPxRaw >= chartArea.top && yPxRaw <= chartArea.bottom;
-	return {
-		x1: span.x1,
-		y1: yPx,
-		x2: span.x2,
-		y2: yPx,
-		startInArea: span.startInArea && yInArea,
-		endInArea: span.endInArea && yInArea,
-		axisInArea: yInArea,
-		side,
-		direction: LineMarkerDirection.Horizontal
-	};
-};
-var resolveTick = (args) => {
-	const { globalTick, itemTick, defaultEnabled } = args;
-	return {
-		enabled: itemTick?.enabled ?? globalTick?.enabled ?? defaultEnabled,
-		label: itemTick?.label ?? globalTick?.label,
-		color: itemTick?.color ?? globalTick?.color,
-		font: itemTick?.font ?? globalTick?.font,
-		labelOffsetPx: itemTick?.labelOffsetPx ?? globalTick?.labelOffsetPx,
-		labelPosition: itemTick?.labelPosition ?? globalTick?.labelPosition,
-		reverse: itemTick?.reverse ?? globalTick?.reverse,
-		side: itemTick?.side ?? globalTick?.side,
-		sizePx: itemTick?.sizePx ?? globalTick?.sizePx
-	};
-};
-var hasTickLabel = (tick) => {
-	const label = tick?.label;
-	if (Array.isArray(label)) return label.length > 0;
-	return Boolean(label);
-};
-var toExtraGeometry = (args) => {
-	const { chart, chartArea, item, extra, xBase, defaultSide } = args;
-	const yScale = resolveScale(chart, extra?.yScaleID ?? item?.yScaleID, "y");
-	if (!yScale) return void 0;
-	const yValue = extra?.yValue ?? extra?.value;
-	if (!isFiniteNumber(yValue)) return void 0;
-	const lengthPx = extra?.lengthPx;
-	if (!isFiniteNumber(lengthPx) || lengthPx <= 0) return void 0;
-	const side = extra?.side ?? defaultSide;
-	const dirIntoChart = side === LineMarkerSide.Left ? 1 : -1;
-	const yPxRaw = yScale.getPixelForValue(yValue);
-	const yPx = clamp(yPxRaw, chartArea?.top, chartArea?.bottom);
-	const x2Raw = xBase + dirIntoChart * lengthPx;
-	return {
-		x1: xBase,
-		y1: yPx,
-		x2: clamp(x2Raw, chartArea?.left, chartArea?.right),
-		y2: yPx,
-		startInArea: xBase >= chartArea.left && xBase <= chartArea.right,
-		endInArea: x2Raw >= chartArea.left && x2Raw <= chartArea.right,
-		axisInArea: yPxRaw >= chartArea.top && yPxRaw <= chartArea.bottom,
-		side,
-		direction: LineMarkerDirection.Horizontal
-	};
-};
-var getLineStyle = (item, global) => {
-	const color = item?.color ?? global?.color ?? DEFAULT_COLOR;
-	const opacity = item?.opacity ?? global?.opacity ?? 1;
-	const lineWidth = item?.lineWidth ?? global?.lineWidth ?? 1;
-	const lineDash = asArray(item?.lineDash ?? global?.lineDash);
-	if (!color || !isFiniteNumber(opacity) || !isFiniteNumber(lineWidth)) return;
+	const reverse = readOwnBoolean(item, "reverse") ?? readOwnBoolean(global, "reverse") ?? false;
+	const itemValue = item?.value;
+	if (!isFiniteNumber(itemValue)) return void 0;
+	const yStartPx = isFiniteNumber(yStartValue) ? clamp(yScale.getPixelForValue(yStartValue), chartArea?.top, chartArea?.bottom) : reverse ? chartArea?.bottom : chartArea?.top;
+	const yEndPxRaw = clamp(yScale.getPixelForValue(itemValue), chartArea?.top, chartArea?.bottom);
 	return {
-		color,
-		opacity,
-		lineWidth,
-		lineDash
+		yStartPx,
+		yEndPx: reverse ? Math.min(yStartPx, yEndPxRaw) : Math.max(yStartPx, yEndPxRaw),
+		endTick: {
+			label: item.label,
+			color: item.color,
+			font: item.font,
+			labelOffsetPx: item.labelOffsetPx
+		},
+		reverse
 	};
 };
-var getLineReverse = (geometry) => {
-	if (geometry.direction === LineMarkerDirection.Horizontal) return geometry.x2 < geometry.x1;
-	return geometry.y2 < geometry.y1;
-};
-var hasVisibleLineSegment = (args) => {
-	const { geometry } = args;
-	const epsilon = .5;
-	if (geometry.direction === LineMarkerDirection.Horizontal) return geometry.axisInArea && Math.abs(geometry.x2 - geometry.x1) > epsilon;
-	return geometry.axisInArea && Math.abs(geometry.y2 - geometry.y1) > epsilon;
-};
-var lineMarkersPlugin = {
-	id: "lineMarkers",
+var verticalMarkersPlugin = {
+	id: "verticalMarkers",
 	afterDraw: (chart) => {
 		if (!readPluginEnable(chart)) return;
 		const cfg = readAnnotationConfig(chart);
@@ -22856,195 +22890,50 @@ var lineMarkersPlugin = {
 		const items = asArray(cfg?.items);
 		if (!items.length) return;
 		const itemGapPx = cfg?.itemGapPx ?? 0;
-		const defaultSide = cfg?.stickSide ?? LineMarkerSide.Right;
-		const lineTasks = [];
-		const tickTasks = [];
-		let groupedVerticalIndexBySide = {};
-		let groupedAnchorBySide = {};
-		let previousGroupedHorizontalEndBySide = {};
-		items.forEach((item, itemIndex) => {
+		const globalStickSide = cfg?.stickSide ?? "right";
+		let visibleIndex = 0;
+		items?.forEach((item) => {
 			if (!item || item?.display === false) return;
-			const direction = getMarkerDirection(item, cfg);
-			const side = resolveSide(item, cfg);
-			const style = getLineStyle(item, cfg);
-			if (!style) return;
-			let geometry;
-			if (direction === LineMarkerDirection.Vertical) {
-				const baseXPx = computeVerticalXPxBase({
-					chart,
-					chartArea,
-					item,
-					global: cfg
-				});
-				if (!isFiniteNumber(baseXPx)) return;
-				const stickToEdge = item?.stickToEdge ?? cfg?.stickToEdge ?? true;
-				const hasExplicitXValue = isFiniteNumber(item?.xValue ?? cfg?.xValue);
-				const isGroupedVertical = stickToEdge && !hasExplicitXValue;
-				const dirIntoChart = side === LineMarkerSide.Left ? 1 : -1;
-				const groupedVerticalIndex = groupedVerticalIndexBySide[side] ?? 0;
-				const groupOffsetPx = item?.groupOffsetPx ?? 0;
-				geometry = computeVerticalLineGeometry({
-					chart,
-					chartArea,
-					item,
-					global: cfg,
-					xPx: isGroupedVertical ? baseXPx + dirIntoChart * groupedVerticalIndex * itemGapPx + dirIntoChart * groupOffsetPx : baseXPx
-				});
-				if (geometry && isGroupedVertical) {
-					groupedVerticalIndexBySide[side] = groupedVerticalIndex + 1;
-					const prevAnchor = groupedAnchorBySide[side];
-					groupedAnchorBySide[side] = isFiniteNumber(prevAnchor) ? side === LineMarkerSide.Left ? Math.min(prevAnchor, geometry.x1) : Math.max(prevAnchor, geometry.x1) : geometry.x1;
-				}
-			} else {
-				const stickToGroup = item?.stickToGroup ?? cfg?.stickToGroup ?? false;
-				geometry = computeHorizontalLineGeometry({
-					chart,
-					chartArea,
-					item,
-					global: cfg,
-					groupAnchorXPx: (() => {
-						const anchor = groupedAnchorBySide[side];
-						if (!isFiniteNumber(anchor)) return void 0;
-						return clamp(anchor, chartArea?.left, chartArea?.right);
-					})(),
-					previousGroupItemXPx: (() => {
-						const prev = previousGroupedHorizontalEndBySide[side];
-						if (!isFiniteNumber(prev)) return void 0;
-						return clamp(prev, chartArea?.left, chartArea?.right);
-					})()
-				});
-				if (geometry && stickToGroup) previousGroupedHorizontalEndBySide[side] = geometry.x2;
-			}
-			if (!geometry) return;
-			if (!hasVisibleLineSegment({ geometry })) return;
-			lineTasks.push({
-				geometry,
-				style
-			});
-			const lineReverse = getLineReverse(geometry);
-			const lineStart = {
-				x: geometry.x1,
-				y: geometry.y1
-			};
-			const lineEnd = {
-				x: geometry.x2,
-				y: geometry.y2
-			};
-			const startTick = resolveTick({
-				globalTick: cfg?.startTick,
-				itemTick: item?.startTick,
-				defaultEnabled: false
-			});
-			const endTick = resolveTick({
-				globalTick: cfg?.endTick,
-				itemTick: item?.endTick,
-				defaultEnabled: direction === LineMarkerDirection.Vertical
-			});
-			const resolvedStartSide = startTick?.side ?? side;
-			const resolvedEndSide = endTick?.side ?? side;
-			if ((startTick?.enabled || hasTickLabel(startTick)) && geometry.startInArea) tickTasks.push({
-				id: `${item?.id ?? `item-${itemIndex}`}-start`,
-				x: lineStart.x,
-				y: lineStart.y,
-				side: resolvedStartSide,
-				direction: geometry.direction,
-				reverse: startTick?.reverse ?? !lineReverse,
-				tick: startTick,
-				defaultColor: style.color,
-				defaultFont: DEFAULT_FONT
-			});
-			if ((endTick?.enabled || hasTickLabel(endTick)) && geometry.endInArea) tickTasks.push({
-				id: `${item?.id ?? `item-${itemIndex}`}-end`,
-				x: lineEnd.x,
-				y: lineEnd.y,
-				side: resolvedEndSide,
-				direction: geometry.direction,
-				reverse: endTick?.reverse ?? lineReverse,
-				tick: endTick,
-				defaultColor: style.color,
-				defaultFont: DEFAULT_FONT
-			});
-			if (direction !== LineMarkerDirection.Vertical) return;
-			asArray(item?.extras).forEach((extra, extraIndex) => {
-				if (!extra || extra?.display === false) return;
-				const extraGeometry = toExtraGeometry({
-					chart,
-					chartArea,
-					item,
-					extra,
-					xBase: geometry.x1,
-					defaultSide: side
-				});
-				if (!extraGeometry) return;
-				const extraStyle = getLineStyle(extra, cfg);
-				if (!extraStyle) return;
-				lineTasks.push({
-					geometry: extraGeometry,
-					style: extraStyle
-				});
-				const extraTick = resolveTick({
-					itemTick: extra?.tick,
-					defaultEnabled: false
-				});
-				if (!extraTick?.enabled && !hasTickLabel(extraTick) || !extraGeometry.endInArea) return;
-				const extraReverse = extraTick?.reverse ?? readOwnBoolean(extra, "reverse") ?? false;
-				tickTasks.push({
-					id: `${item?.id ?? `item-${itemIndex}`}-extra-${extra?.id ?? extraIndex}`,
-					x: extraGeometry.x2,
-					y: extraGeometry.y2,
-					side: extraTick?.side ?? extraGeometry.side ?? defaultSide,
-					direction: LineMarkerDirection.Horizontal,
-					reverse: extraReverse,
-					tick: extraTick,
-					defaultColor: extraStyle.color,
-					defaultFont: DEFAULT_FONT
-				});
+			const baseXPx = computeXPxBase({
+				chart,
+				chartArea,
+				item,
+				global: cfg
 			});
-		});
-		lineTasks.forEach(({ geometry, style }) => {
-			drawLineSegment({
+			if (!isFiniteNumber(baseXPx)) return;
+			const side = item?.stickSide ?? globalStickSide;
+			const xPx = baseXPx + (side === "left" ? 1 : -1) * visibleIndex * itemGapPx;
+			visibleIndex += 1;
+			const ySpan = computeYSpan({
 				chart,
-				x1: geometry.x1,
-				y1: geometry.y1,
-				x2: geometry.x2,
-				y2: geometry.y2,
-				color: style.color,
-				opacity: style.opacity,
-				lineWidth: style.lineWidth,
-				lineDash: style.lineDash
+				chartArea,
+				item,
+				global: cfg
 			});
-		});
-		const enableLabelCollisionResolver = cfg?.enableLabelCollisionResolver ?? true;
-		const labelCollisionPx = cfg?.labelCollisionPx ?? 4;
-		const labelCollisionClusterXPx = cfg?.labelCollisionClusterXPx ?? 36;
-		const labelYById = enableLabelCollisionResolver ? resolveLabelCollisions({
-			labels: tickTasks.filter((task) => {
-				return task?.tick?.enabled !== false && isFiniteNumber(getTickLabelHeight(task.tick, task.defaultFont)) && getTickLabelHeight(task.tick, task.defaultFont) > 0;
-			}).map((task) => ({
-				id: task.id,
-				side: task.side,
-				x: task.x,
-				y: task.y,
-				height: getTickLabelHeight(task.tick, task.defaultFont)
-			})),
-			chartTop: chartArea.top,
-			chartBottom: chartArea.bottom,
-			clusterXPx: labelCollisionClusterXPx,
-			gapPx: labelCollisionPx
-		}) : {};
-		tickTasks.forEach((task) => {
+			if (!ySpan) return;
+			const color = item?.color ?? cfg?.color;
+			const opacity = item?.opacity ?? cfg?.opacity;
+			const lineWidth = item?.lineWidth ?? cfg?.lineWidth;
+			const lineDash = asArray(item?.lineDash ?? cfg?.lineDash);
+			if (!color || !isFiniteNumber(opacity) || !isFiniteNumber(lineWidth)) return;
 			drawTick({
 				ctx,
-				chartArea,
-				direction: task.direction,
-				x: task.x,
-				y: task.y,
-				side: task.side,
-				reverse: task.reverse,
-				labelY: labelYById[task.id],
-				tick: task.tick,
-				defaultColor: task.defaultColor,
-				defaultFont: task.defaultFont
+				x: drawVerticalLine({
+					chart,
+					xPx,
+					y1: ySpan?.yStartPx,
+					y2: ySpan?.yEndPx,
+					color,
+					opacity,
+					lineWidth,
+					lineDash
+				}),
+				y: ySpan?.yEndPx,
+				side,
+				reverse: ySpan?.reverse,
+				tick: ySpan?.endTick,
+				defaultColor: color,
+				defaultFont: "12px sans-serif"
 			});
 		});
 	}
@@ -23516,7 +23405,7 @@ var Legend = ({ chartRef, legendConfig }) => {
 };
 //#endregion
 //#region src/components/line-chart/line-chart.tsx
-Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin, lineMarkersPlugin);
+Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin, verticalMarkersPlugin);
 var LineChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);