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

package/dist/index.js

@@ -14364,7 +14364,7 @@ function isZoomingOrPanning(chart) {
 	const state = getState(chart);
 	return state.panning || state.dragging;
 }
-var clamp$3 = (x, from, to) => Math.min(to, Math.max(from, x));
+var clamp$2 = (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$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]);
+	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]);
 }
 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$2 = (x, from, to) => Math.min(to, Math.max(from, x));
+var clamp$1 = (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$2(obj[key], from, to);
+	for (const key of Object.keys(obj)) obj[key] = clamp$1(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$2(toPercent(s), 0, 1);
+var toPositivePercent = (s) => clamp$1(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$2(opacity, 0, 1) : 1;
+	return isNumber$1(opacity) ? clamp$1(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$2(Math.max(x, y), 0, .25);
+	return clamp$1(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 = "hsl(60, 10.34482759%, 12.5%)";
+var DEFAULT_COLOR$1 = "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;
+	defaults$1.color = DEFAULT_COLOR$1;
 	defaults$1.borderColor = BORDER_COLOR;
 };
 var isEmptyString = (value) => value === "";
@@ -20190,20 +20190,33 @@ var defaultAnnotations$2 = (annotations) => ({
 			controlAnnotation: annotationConfig?.controlAnnotation ?? false,
 			enableDragAnnotation: annotationConfig?.enableDragAnnotation ?? false,
 			enableCalloutAnnotation: annotationConfig?.enableCalloutAnnotation ?? false,
-			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 ?? []
+			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 ?? []
 			},
 			annotationsData: defaultAnnotationsData$2(Array.isArray(annotations) ? annotations : annotations?.annotationsData)
 		};
@@ -20879,511 +20892,87 @@ 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((item) => {
-		return item?.toLowerCase()?.includes("x");
-	});
+	const key = Object.keys(chart?.scales ?? {})?.find((k) => k?.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((item) => {
-		return item?.toLowerCase()?.includes("y");
-	});
+	const key = Object.keys(chart?.scales ?? {})?.find((k) => k?.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 layout = getCalloutLayout(ctx, refAnnotation, index);
-	if (layout) return layout.xValue;
-	const chart = getChartFromCtx$1(ctx);
+	const chart = ctx?.chart;
 	const xVal = refAnnotation?.xValue;
 	if (typeof xVal !== "number") return 0;
 	if (!chart) return xVal;
-	const scale = getXScale(chart, getAxisId(refAnnotation, "x"));
+	const scale = getXScale(chart, refAnnotation?.annotationAxis);
 	if (!scale) return xVal;
 	const hasCustomOffset = typeof calloutCfg?.xAdjust === "number";
 	const side = index % 2 === 0 ? 1 : -1;
-	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * DEFAULT_HORIZONTAL_OFFSET;
+	const dx = hasCustomOffset ? calloutCfg?.xAdjust : side * 60;
 	const basePx = scale.getPixelForValue(xVal);
+	const cxBase = basePx + dx;
 	const area = chart.chartArea;
-	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);
+	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);
 };
 var resolveCalloutYValue = (ctx, refAnnotation, calloutCfg, index) => {
-	const layout = getCalloutLayout(ctx, refAnnotation, index);
-	if (layout) return layout.yValue;
-	const chart = getChartFromCtx$1(ctx);
-	const yVal = refAnnotation?.yValue;
+	const chart = ctx?.chart;
+	const yVal = refAnnotation.yValue;
 	if (typeof yVal !== "number") return 0;
 	if (!chart) return yVal;
-	const scale = getYScale(chart, getAxisId(refAnnotation, "y"));
+	const scale = getYScale(chart, refAnnotation?.annotationAxis);
 	if (!scale) return yVal;
 	const hasCustomOffset = typeof calloutCfg?.yAdjust === "number";
 	const row = Math.floor(index / 2);
-	const dy = hasCustomOffset ? calloutCfg?.yAdjust : DEFAULT_VERTICAL_OFFSET - row * DEFAULT_ROW_GAP;
+	const dy = hasCustomOffset ? calloutCfg?.yAdjust : -40 - row * 22;
 	const basePx = scale.getPixelForValue(yVal);
+	const cyBase = basePx + dy;
 	const area = chart.chartArea;
-	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;
+	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;
 var isCalloutAnchorInChartArea = (ctx, refAnnotation, margin = 0) => {
-	const chart = getChartFromCtx$1(ctx);
+	const chart = ctx?.chart;
 	const area = chart?.chartArea;
 	if (!chart || !area) return true;
-	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);
+	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);
 	return isInRange(x, area.left + margin, area.right - margin) && isInRange(y, area.top + margin, area.bottom - margin);
 };
 //#endregion
@@ -21684,14 +21273,7 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 	const calloutCfg = refAnnotation?.labelConfig?.callout ?? {};
 	const baseAnnotation = {
 		...baseRest,
-		label: {
-			...label,
-			display: (ctx) => {
-				if (!(refAnnotation.display ?? true)) return false;
-				if (!calloutCfg?.onlyWhenOverlapping) return false;
-				return !isCalloutOverlapping(ctx, refAnnotation, index);
-			}
-		}
+		label: { display: false }
 	};
 	const color = calloutCfg?.color ?? "hsl(60, 10.34482759%, 12.5%)";
 	const font = calloutCfg?.font ?? `12px "Roobert", "Noto Sans", sans-serif`;
@@ -21699,10 +21281,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 ?? "rgba(120, 126, 138, 0.9)";
+	const strokeStyle = calloutCfg.strokeStyle ?? baseAnnotation.borderColor;
 	const lineWidth = typeof calloutCfg.lineWidth === "number" ? calloutCfg.lineWidth : 1;
-	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 2;
-	const endOffset = typeof calloutCfg.endOffset === "number" ? calloutCfg.endOffset : .5;
+	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 6;
+	const endOffset = typeof calloutCfg.endOffset === "number" ? calloutCfg.endOffset : 1;
 	const calloutId = `callout-annotation-${index}`;
 	return [baseAnnotation, {
 		id: calloutId,
@@ -21712,18 +21294,14 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		color: (ctx) => {
 			const chart = getChartFromCtx(ctx);
 			if (!chart) return color;
-			if (Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) && chart.hoveredAnnotationId === calloutId) return "#DB5B00";
+			if (chart.hoveredAnnotationId === calloutId) return "#DB5B00";
 			return color;
 		},
 		font,
 		borderColor,
 		borderWidth: BORDER_WIDTH.INITIAL,
 		padding: 5,
-		display: (ctx) => {
-			if (!(refAnnotation.display ?? true)) return false;
-			if (!isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0)) return false;
-			return isCalloutOverlapping(ctx, refAnnotation, index);
-		},
+		display: (ctx) => (refAnnotation.display ?? true) && isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0),
 		xValue: (ctx) => {
 			const persistenceId = getChartFromCtx(ctx)?.options?.persistenceId;
 			const stored = getAnnotationPosition(persistenceId, `callout-annotation-${index}`);
@@ -21740,10 +21318,10 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		displayDragCoordinates: false,
 		enableDrag: true,
 		enter: ({ element }, { chart }) => {
-			return handleLabelEnter(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
+			return handleLabelEnter(element, chart, { enableDrag: true });
 		},
 		leave: ({ element }, { chart }) => {
-			return handleLabelLeave(element, chart, { enableDrag: Boolean(chart?.options?.plugins?.annotationDraggerPlugin?.enabled) });
+			return handleLabelLeave(element, chart, { enableDrag: true });
 		},
 		onDragStart: onCalloutDragStart ? () => (coords) => {
 			return onCalloutDragStart(coords, refAnnotation);
@@ -21760,13 +21338,7 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 			strokeStyle,
 			lineWidth,
 			startOffset,
-			endOffset,
-			anchor: {
-				position: refAnnotation?.labelConfig?.position,
-				xAdjust: refAnnotation?.labelConfig?.xAdjust,
-				yAdjust: refAnnotation?.labelConfig?.yAdjust,
-				labelOffsetPx: refAnnotation?.labelOffsetPx
-			}
+			endOffset
 		}
 	}];
 };
@@ -21947,6 +21519,11 @@ 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,
@@ -21977,13 +21554,13 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		updateAxesRangesFromChart,
 		zoomEnabled
 	]);
-	const verticalMarkersAnnotation = options?.annotations?.verticalMarkersAnnotation ?? {};
-	const verticalMarkersPluginEnabled = Boolean(options?.plugins?.verticalMarkersPlugin?.enabled ?? verticalMarkersAnnotation?.enabled);
-	const plugins = useMemo(() => ({
+	const lineMarkersAnnotation = options?.annotations?.lineMarkersAnnotation ?? {};
+	const lineMarkersPluginEnabled = Boolean(options?.plugins?.lineMarkersPlugin?.enabled ?? lineMarkersAnnotation?.enabled);
+	const plugins = {
 		datalabels,
 		annotationDraggerPlugin: { enabled: state?.enableDragAnnotation },
 		calloutConnectorPlugin: { enableCalloutAnnotation: options?.annotations.enableCalloutAnnotation },
-		verticalMarkersPlugin: { enabled: verticalMarkersPluginEnabled },
+		lineMarkersPlugin: { enabled: lineMarkersPluginEnabled },
 		annotation: toAnnotationObject(annotation),
 		zoom: {
 			pan: panOptions,
@@ -22008,32 +21585,7 @@ 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 },
@@ -22061,7 +21613,6 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		layoutPadding,
 		lineEnabled,
 		onAnimationComplete,
-		onChartHover,
 		options?.annotations,
 		options?.chartStyling?.maintainAspectRatio,
 		options?.chartStyling?.performanceMode,
@@ -22587,126 +22138,52 @@ var annotationDraggerPlugin = {
 };
 //#endregion
 //#region src/components/line-chart/plugins/callout-plugin/helpers.ts
-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 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 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 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;
+	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;
+	}
 	return {
-		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
+		startX,
+		startY,
+		endX,
+		endY
 	};
 };
 //#endregion
@@ -22729,30 +22206,49 @@ 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, tickStartX, tickStartY, tickEndX, tickEndY } = computeConnectorPoints(fromEl, labelEl, connector) ?? {};
+			const { startX, startY, endX, endY } = 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 = strokeStyle;
+			ctx.strokeStyle = connector?.strokeStyle ?? "rgba(120,120,120,0.9)";
 			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/vertical-markers-plugin/utils.ts
+//#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
 var isFiniteNumber = (v) => {
 	return isNumber(v) && Number.isFinite(v);
 };
@@ -22778,68 +22274,336 @@ 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/vertical-markers-plugin/draw.ts
-var drawVerticalLine = ({ chart, xPx, y1, y2, color, opacity, lineWidth, lineDash }) => {
+//#region src/components/line-chart/plugins/line-markers-plugin/draw.ts
+var drawLineSegment = ({ chart, x1, y1, x2, y2, color, opacity, lineWidth, lineDash }) => {
 	const { ctx } = chart ?? {};
-	const x = crispLinePx(xPx);
+	const startX = crispLinePx(x1);
+	const endX = crispLinePx(x2);
+	const startY = crispLinePx(y1);
+	const endY = crispLinePx(y2);
 	ctx?.save?.();
 	ctx.globalAlpha = opacity;
 	ctx?.beginPath?.();
 	ctx.lineWidth = lineWidth;
 	ctx.strokeStyle = color;
 	ctx?.setLineDash?.(lineDash);
-	ctx.lineCap = "round";
-	ctx?.moveTo?.(x, y1);
-	ctx?.lineTo?.(x, y2);
+	ctx.lineCap = "butt";
+	ctx?.moveTo?.(startX, startY);
+	ctx?.lineTo?.(endX, endY);
 	ctx?.stroke?.();
 	ctx?.restore?.();
-	return x;
+	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;
+	}
 };
 var drawTick = (args) => {
-	const { ctx, x, y, side, tick, defaultColor, defaultFont } = args ?? {};
+	const { ctx, x, y, side, tick, defaultColor, defaultFont, chartArea } = args ?? {};
+	const direction = args?.direction ?? LineMarkerDirection.Vertical;
 	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 = 6;
-	const dir = side === "left" ? 1 : -1;
-	const xTickEnd = x;
+	const bootSize = tick?.sizePx ?? 6;
+	const dir = side === LineMarkerSide.Left ? 1 : -1;
+	const xTickEnd = crispLinePx(x);
+	const yTickEnd = crispLinePx(y);
 	ctx?.save?.();
 	ctx.strokeStyle = color;
 	ctx.fillStyle = color;
 	ctx.lineWidth = 1;
-	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 xOuter = direction === LineMarkerDirection.Vertical ? xTickEnd + dir * bootSize : xTickEnd;
+	const yOuter = direction === LineMarkerDirection.Horizontal ? yTickEnd + (reverse ? bootSize : -bootSize) : yTickEnd;
+	const xThird = direction === LineMarkerDirection.Vertical ? xTickEnd : xTickEnd + dir * bootSize;
+	const yThird = reverse ? yTickEnd + bootSize : yTickEnd - bootSize;
+	const bootBounds = {
+		left: Math.min(xTickEnd, xOuter, xThird),
+		right: Math.max(xTickEnd, xOuter, xThird),
+		top: Math.min(yTickEnd, yOuter, yThird),
+		bottom: Math.max(yTickEnd, yOuter, yThird)
+	};
+	const canDrawBoot = (direction === LineMarkerDirection.Vertical ? isWithin(yTickEnd, chartArea.top, chartArea.bottom) : isWithin(xTickEnd, chartArea.left, chartArea.right)) && isTickElementInsideByDirection({
+		direction,
+		chartArea,
+		box: bootBounds
+	});
+	if (bootEnabled && canDrawBoot) {
+		ctx?.beginPath?.();
+		ctx?.moveTo?.(xTickEnd, yTickEnd);
+		ctx?.lineTo?.(xOuter, yOuter);
+		ctx?.lineTo?.(xThird, yThird);
+		ctx?.closePath?.();
+		ctx?.fill?.();
+	}
 	const label = tick.label;
 	if (label) {
 		ctx.font = font;
 		ctx.textBaseline = "middle";
-		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);
+		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?.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/vertical-markers-plugin/vertical-markers-plugin.ts
+//#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)";
 var readPluginEnable = (chart) => {
-	const { verticalMarkersPlugin } = chart?.options?.plugins ?? {};
-	return asObject(verticalMarkersPlugin)?.enabled === true;
+	const { lineMarkersPlugin } = chart?.options?.plugins ?? {};
+	return asObject(lineMarkersPlugin)?.enabled === true;
 };
 var readAnnotationConfig = (chart) => {
 	const optionsWithAnnotations = chart?.options;
 	const configWithAnnotations = chart?.config?.options;
-	return asObject(configWithAnnotations?.annotations?.verticalMarkersAnnotation) ?? asObject(optionsWithAnnotations?.annotations?.verticalMarkersAnnotation);
+	return asObject(configWithAnnotations?.annotations?.lineMarkersAnnotation) ?? asObject(optionsWithAnnotations?.annotations?.lineMarkersAnnotation);
 };
 var readOwnBoolean = (obj, key) => {
 	if (!obj || typeof obj !== "object") return void 0;
@@ -22847,39 +22611,242 @@ var readOwnBoolean = (obj, key) => {
 	if (!descriptor || !("value" in descriptor)) return void 0;
 	return typeof descriptor?.value === "boolean" ? descriptor?.value : void 0;
 };
-var computeXPxBase = (args) => {
+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) => {
 	const { chart, chartArea, item, global } = args ?? {};
 	const stickToEdge = item?.stickToEdge ?? global?.stickToEdge ?? true;
-	const stickSide = item?.stickSide ?? global?.stickSide ?? "right";
+	const side = resolveSide(item, global);
 	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 clamp(stickSide === "left" ? chartArea?.left + edgePaddingPx : chartArea?.right - edgePaddingPx, chartArea?.left, chartArea?.right);
+	if (stickToEdge) return getEdgeX(chartArea, side, edgePaddingPx);
 };
-var computeYSpan = (args) => {
-	const { chart, chartArea, item, global } = args ?? {};
+var computeVerticalLineGeometry = (args) => {
+	const { chart, chartArea, item, global, xPx } = args ?? {};
 	const yScale = resolveScale(chart, item?.yScaleID, "y");
 	if (!yScale) return void 0;
-	const yStartValue = item?.yStartValue ?? global?.yStartValue;
 	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);
+	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 {
-		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
+		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 verticalMarkersPlugin = {
-	id: "verticalMarkers",
+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;
+	return {
+		color,
+		opacity,
+		lineWidth,
+		lineDash
+	};
+};
+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",
 	afterDraw: (chart) => {
 		if (!readPluginEnable(chart)) return;
 		const cfg = readAnnotationConfig(chart);
@@ -22890,50 +22857,195 @@ var verticalMarkersPlugin = {
 		const items = asArray(cfg?.items);
 		if (!items.length) return;
 		const itemGapPx = cfg?.itemGapPx ?? 0;
-		const globalStickSide = cfg?.stickSide ?? "right";
-		let visibleIndex = 0;
-		items?.forEach((item) => {
+		const defaultSide = cfg?.stickSide ?? LineMarkerSide.Right;
+		const lineTasks = [];
+		const tickTasks = [];
+		let groupedVerticalIndexBySide = {};
+		let groupedAnchorBySide = {};
+		let previousGroupedHorizontalEndBySide = {};
+		items.forEach((item, itemIndex) => {
 			if (!item || item?.display === false) return;
-			const baseXPx = computeXPxBase({
-				chart,
-				chartArea,
-				item,
-				global: cfg
+			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
 			});
-			if (!isFiniteNumber(baseXPx)) return;
-			const side = item?.stickSide ?? globalStickSide;
-			const xPx = baseXPx + (side === "left" ? 1 : -1) * visibleIndex * itemGapPx;
-			visibleIndex += 1;
-			const ySpan = computeYSpan({
+			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
+				});
+			});
+		});
+		lineTasks.forEach(({ geometry, style }) => {
+			drawLineSegment({
 				chart,
-				chartArea,
-				item,
-				global: cfg
+				x1: geometry.x1,
+				y1: geometry.y1,
+				x2: geometry.x2,
+				y2: geometry.y2,
+				color: style.color,
+				opacity: style.opacity,
+				lineWidth: style.lineWidth,
+				lineDash: style.lineDash
 			});
-			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;
+		});
+		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) => {
 			drawTick({
 				ctx,
-				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"
+				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
 			});
 		});
 	}
@@ -23405,7 +23517,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, verticalMarkersPlugin);
+Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin, lineMarkersPlugin);
 var LineChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);