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

package/dist/index.d.ts

@@ -329,7 +329,7 @@ export declare interface ICommonAnnotations {
     controlAnnotation?: boolean;
     enableDragAnnotation?: boolean;
     enableCalloutAnnotation?: boolean;
-    verticalMarkersAnnotation?: IVerticalMarkersAnnotation;
+    lineMarkersAnnotation?: ILineMarkersAnnotation;
     annotationsData?: ICommonAnnotationsData[];
     labelAnnotation?: ICommonAnnotation;
 }
@@ -483,7 +483,7 @@ export declare interface ICommonOptions {
     dragData?: ICommonDragData;
     annotations?: ICommonAnnotations;
     plugins?: {
-        verticalMarkersPlugin?: {
+        lineMarkersPlugin?: {
             enabled?: boolean;
         };
     };
@@ -771,6 +771,8 @@ export declare interface ILineLegend extends ICommonLegend {
     usePointStyle?: boolean;
 }
 
+export declare type ILineMarkersAnnotation = TLineMarkersOptions;
+
 export declare interface ILineRange {
     [key: string]: ILineChartRange;
 }
@@ -1002,14 +1004,36 @@ export declare interface IUnitOptions {
     setSelectedUnit: () => void;
 }
 
-export declare type IVerticalMarkersAnnotation = TVerticalMarkersOptions;
-
 export declare enum Key {
     Shift = "Shift"
 }
 
 export declare const LineChart: (props: ILineChartProps) => JSX_2.Element;
 
+export declare enum LineMarkerDirection {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+
+export declare enum LineMarkerLabelPosition {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom",
+    OnLine = "onLine"
+}
+
+export declare enum LineMarkerSide {
+    Left = "left",
+    Right = "right"
+}
+
+export declare enum LineMarkerTextAlign {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}
+
 export declare enum PanZoomMode {
     X = "x",
     Y = "y",
@@ -1059,58 +1083,109 @@ export declare type TGeneratedPieChartDatasets = IGeneratedPieChartDataset[];
 
 export declare type TGeneratedScatterChartDatasets = IGeneratedScatterChartDataset[];
 
-export declare enum TooltipLabel {
-    Y = "yLabel",
-    X = "xLabel"
-}
-
-export declare type TPrimitive = string | number | boolean | null;
+export declare type TLineMarkerDirection = LineMarkerDirection;
 
-export declare type TStickSide = 'left' | 'right';
-
-export declare type TVerticalMarkerItem = {
+export declare type TLineMarkerItem = {
     id?: string;
+    direction?: TLineMarkerDirection;
     xScaleID?: string;
     yScaleID?: string;
     xValue?: number;
+    yValue?: number;
     yStartValue?: number;
+    yEndValue?: number;
+    xStartValue?: number;
+    xEndValue?: number;
+    lengthPx?: number;
     value?: number;
     label?: string | string[];
     font?: string;
     labelOffsetPx?: number;
     stickToEdge?: boolean;
+    stickToGroup?: boolean;
     stickSide?: TStickSide;
+    groupOffsetPx?: number;
     reverse?: boolean;
     color?: string;
     opacity?: number;
     lineWidth?: number;
     lineDash?: number[];
+    startTick?: TLineMarkerTick;
+    endTick?: TLineMarkerTick;
+    extras?: TMarkerExtraItem[];
     display?: boolean;
 };
 
-export declare type TVerticalMarkersOptions = {
+export declare type TLineMarkerLabelPosition = LineMarkerLabelPosition;
+
+export declare type TLineMarkersOptions = {
     enabled?: boolean;
     itemGapPx?: number;
     edgePaddingPx?: number;
+    horizontalLineLengthPx?: number;
+    lineDirection?: TLineMarkerDirection;
+    labelCollisionPx?: number;
+    labelCollisionClusterXPx?: number;
+    enableLabelCollisionResolver?: boolean;
     stickToEdge?: boolean;
+    stickToGroup?: boolean;
     stickSide?: TStickSide;
     reverse?: boolean;
     xValue?: number;
+    yValue?: number;
+    yEndValue?: number;
+    xStartValue?: number;
+    xEndValue?: number;
+    lengthPx?: number;
     yStartValue?: number;
     color?: string;
     opacity?: number;
     lineWidth?: number;
     lineDash?: number[];
-    items?: TVerticalMarkerItem[];
+    startTick?: TLineMarkerTick;
+    endTick?: TLineMarkerTick;
+    items?: TLineMarkerItem[];
 };
 
-export declare type TVerticalMarkerTick = {
+export declare type TLineMarkerTextAlign = LineMarkerTextAlign;
+
+export declare type TLineMarkerTick = {
+    enabled?: boolean;
     label?: string | string[];
     color?: string;
     font?: string;
     labelOffsetPx?: number;
+    labelPosition?: TLineMarkerLabelPosition;
+    side?: TStickSide;
+    reverse?: boolean;
+    sizePx?: number;
 };
 
+export declare type TMarkerExtraItem = {
+    id?: string;
+    display?: boolean;
+    yScaleID?: string;
+    yValue?: number;
+    value?: number;
+    lengthPx?: number;
+    side?: TStickSide;
+    reverse?: boolean;
+    color?: string;
+    opacity?: number;
+    lineWidth?: number;
+    lineDash?: number[];
+    tick?: TLineMarkerTick;
+};
+
+export declare enum TooltipLabel {
+    Y = "yLabel",
+    X = "xLabel"
+}
+
+export declare type TPrimitive = string | number | boolean | null;
+
+export declare type TStickSide = LineMarkerSide;
+
 export declare type UnusedParameter = unknown;
 
 export { }
@@ -1118,68 +1193,24 @@ export { }
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
+        lineMarkersPlugin?: {
+            enabled?: boolean;
+        } | TLineMarkersOptions;
     }
 }
 
 
-/**
- * Vertical Markers Plugin
- *
- * This plugin draws vertical helper lines on top of the chart.
- * with a small triangle end cap ("boot") and a text label.
- *
- * Where to configure:
- * - Enable switch: options.plugins.verticalMarkersPlugin.enabled
- * - Data and style: options.annotations.verticalMarkersAnnotation
- *
- * Global props (verticalMarkersAnnotation):
- * - enabled: Turn markers on or off.
- * - items: List of marker objects to draw.
- * - itemGapPx: Space in pixels between marker lines.
- * - edgePaddingPx: Distance from chart left/right edge when sticky mode is used.
- * - stickToEdge: If true, use chart edge as base X position.
- * - stickSide: Which edge to use in sticky mode: 'left' or 'right'.
- * - xValue: Optional base X value from the X scale (used instead of edge).
- * - yStartValue: Optional start Y value for all lines (if not set, start from top;
- *   if reverse is true, start from bottom).
- * - reverse: If true, lines go from bottom to top. If false, top to bottom.
- * - color: Default line and triangle color.
- * - opacity: Default line opacity.
- * - lineWidth: Default line width.
- * - lineDash: Default dash pattern for lines.
- *
- * Item props (each object in items):
- * - value: Required Y value where the marker line ends and triangle is placed.
- * - label: Optional text near the triangle.
- * - display: Show or hide this item.
- * - stickToEdge: Per-item override of global stickToEdge.
- * - stickSide: Per-item override of global stickSide.
- * - xValue: Per-item override of global xValue.
- * - yStartValue: Per-item override of global yStartValue.
- * - reverse: Per-item override of global reverse.
- * - color: Per-item override of global color.
- * - opacity: Per-item override of global opacity.
- * - lineWidth: Per-item override of global lineWidth.
- * - lineDash: Per-item override of global lineDash.
- * - font: Optional label font.
- * - labelOffsetPx: Optional label offset in pixels.
- * - xScaleID: Optional custom X scale id for xValue conversion.
- * - yScaleID: Optional custom Y scale id for value conversion.
- */
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        verticalMarkersPlugin?: {
-            enabled?: boolean;
-        } | TVerticalMarkersOptions;
+        calloutConnectorPlugin?: {
+            enableCalloutAnnotation?: boolean;
+        };
     }
 }
 
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        calloutConnectorPlugin?: {
-            enableCalloutAnnotation?: boolean;
-        };
+        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
     }
 }

package/dist/index.js

@@ -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)
 		};
@@ -22025,6 +22038,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,
@@ -22055,13 +22073,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,
@@ -22086,32 +22104,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 },
@@ -22139,7 +22132,6 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		layoutPadding,
 		lineEnabled,
 		onAnimationComplete,
-		onChartHover,
 		options?.annotations,
 		options?.chartStyling?.maintainAspectRatio,
 		options?.chartStyling?.performanceMode,
@@ -22836,7 +22828,33 @@ var calloutConnectorPlugin = {
 	}
 };
 //#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);
 };
@@ -22862,68 +22880,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;
@@ -22931,39 +23217,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 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 verticalMarkersPlugin = {
-	id: "verticalMarkers",
+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);
@@ -22974,50 +23463,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
+			});
+			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
 			});
-			if (!isFiniteNumber(baseXPx)) return;
-			const side = item?.stickSide ?? globalStickSide;
-			const xPx = baseXPx + (side === "left" ? 1 : -1) * visibleIndex * itemGapPx;
-			visibleIndex += 1;
-			const ySpan = computeYSpan({
+			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
 			});
 		});
 	}
@@ -23489,7 +24123,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);
@@ -38621,7 +39255,7 @@ var getGroupedColorScheme = (length, startingColor) => {
 	});
 };
 //#endregion
-export { AlignOptions, AnnotationType, AxisType, BarChartWithLegend as BarChart, COLORS, ChartDirection, ChartHoverMode, ChartType, CursorStyle, DragAxis, AnnotationType$1 as DraggableAnnotationType, Events, GradientDirection, Key, LineChartWithLegend as LineChart, PanZoomMode, PieChartWithLegend as PieChart, PointStyle, PointType, Position, ScaleType, ScatterChartWithLegend as ScatterChart, TooltipLabel, getGroupedColorScheme, initializeLineChart };
+export { AlignOptions, AnnotationType, AxisType, BarChartWithLegend as BarChart, COLORS, ChartDirection, ChartHoverMode, ChartType, CursorStyle, DragAxis, AnnotationType$1 as DraggableAnnotationType, Events, GradientDirection, Key, LineChartWithLegend as LineChart, LineMarkerDirection, LineMarkerLabelPosition, LineMarkerSide, LineMarkerTextAlign, PanZoomMode, PieChartWithLegend as PieChart, PointStyle, PointType, Position, ScaleType, ScatterChartWithLegend as ScatterChart, TooltipLabel, getGroupedColorScheme, initializeLineChart };
 (function() {
 	//#region \0vite/all-css
 	try {

package/package.json

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