@oliasoft-open-source/charts-library 5.3.0 → 5.5.0-beta-1

package/dist/index.js

@@ -17632,6 +17632,7 @@ let AnnotationType = /* @__PURE__ */ function(AnnotationType$2) {
 	AnnotationType$2["Ellipse"] = "ellipse";
 	AnnotationType$2["Line"] = "line";
 	AnnotationType$2["Text"] = "text";
+	AnnotationType$2["Label"] = "label";
 	return AnnotationType$2;
 }({});
 let PointStyle = /* @__PURE__ */ function(PointStyle$1) {
@@ -18727,6 +18728,7 @@ var defaultAnnotations$2 = (annotations) => ({
 	showAnnotations: annotations?.showAnnotations ?? false,
 	controlAnnotation: annotations?.controlAnnotation ?? false,
 	enableDragAnnotation: annotations?.enableDragAnnotation ?? false,
+	enableCalloutAnnotation: annotations?.enableCalloutAnnotation ?? false,
 	annotationsData: defaultAnnotationsData$2(annotations?.annotationsData)
 });
 var defaultLegend$3 = (legend$1) => ({
@@ -19286,6 +19288,7 @@ let AnnotationType$1 = /* @__PURE__ */ function(AnnotationType$2) {
 	AnnotationType$2["BOX"] = "box";
 	AnnotationType$2["LINE"] = "line";
 	AnnotationType$2["ELLIPSE"] = "ellipse";
+	AnnotationType$2["LABEL"] = "label";
 	return AnnotationType$2;
 }({});
 let DragAxis = /* @__PURE__ */ function(DragAxis$1) {
@@ -19368,112 +19371,199 @@ var handlePointLeave = (element, chart$4, annotation$1) => {
 	}
 	chart$4.draw();
 };
-var generateAnnotations = (annotationsData) => {
-	return annotationsData?.map((ann, idx) => {
-		const scaleID = ann?.annotationAxis ?? void 0;
-		const inputColor = ann?.color ?? COLORS[idx];
-		const color$3 = !!ann?.opacity ? addTransparency(inputColor, ann?.opacity) : inputColor;
-		const type = ann?.type ?? AnnotationType$1.LINE;
-		const adjustScaleRange$1 = ann?.adjustScaleRange;
-		const borderColor = {
-			[AnnotationType$1.LINE]: color$3,
-			[AnnotationType$1.POINT]: color$3,
-			[AnnotationType$1.BOX]: color$3,
-			[AnnotationType$1.ELLIPSE]: "transparent"
-		}[type] || "transparent";
-		const borderWidth = {
-			[AnnotationType$1.LINE]: BORDER_WIDTH.INITIAL,
-			[AnnotationType$1.BOX]: BORDER_WIDTH.ZERO,
-			[AnnotationType$1.POINT]: BORDER_WIDTH.ZERO,
-			[AnnotationType$1.ELLIPSE]: ann?.borderWidth ?? 0
-		}[type] ?? 0;
-		const borderDash = type === AnnotationType$1.LINE ? ANNOTATION_DASH : void 0;
-		const defLabel = {
-			content: ann?.label,
-			display: true,
-			font: { weight: "normal" }
-		};
-		const label = {
-			[AnnotationType$1.LINE]: {
-				backgroundColor: color$3,
-				content: ann?.label,
-				display: false,
-				position: Position.Top
-			},
-			[AnnotationType$1.POINT]: {
-				backgroundColor: ann?.labelConfig?.backgroundColor ?? "transparent",
-				content: ann?.label,
-				display: ann?.labelConfig?.display ?? !!ann?.label,
-				position: ann?.labelConfig?.position ?? Position.Bottom,
-				color: ann?.labelConfig?.color ?? "hsl(60, 10.34482759%, 12.5%)",
-				font: ann?.labelConfig?.font ?? `12px "Roobert", "Noto Sans", sans-serif`,
-				borderWidth: BORDER_WIDTH.INITIAL,
-				padding: 5,
-				borderRadius: 3,
-				borderColor: ann?.labelConfig?.borderColor ?? "transparent"
-			},
-			[AnnotationType$1.BOX]: defLabel,
-			[AnnotationType$1.ELLIPSE]: defLabel
-		}[type] || defLabel;
-		const enter = ({ element }, { chart: chart$4 }) => {
-			switch (type) {
-				case AnnotationType$1.LINE:
-					handleLineEnter(element, chart$4, ann);
-					break;
-				case AnnotationType$1.BOX:
-					handleBoxEnter(element, chart$4, ann);
-					break;
-				case AnnotationType$1.POINT:
-					handlePointEnter(element, chart$4, ann);
-					break;
-				default: break;
-			}
-		};
-		const leave = ({ element }, { chart: chart$4 }) => {
-			switch (type) {
-				case AnnotationType$1.LINE:
-					handleLineLeave(element, chart$4, ann);
-					break;
-				case AnnotationType$1.BOX:
-					handleBoxLeave(element, chart$4, ann);
-					break;
-				case AnnotationType$1.POINT:
-					handlePointLeave(element, chart$4, ann);
-					break;
-				default: break;
-			}
-		};
-		const onDragStart = () => (cord, annotation$1) => ann?.onDragStart ? ann?.onDragStart(cord, annotation$1) : void 0;
-		const onDrag = () => (cord, annotation$1) => ann?.onDrag ? ann?.onDrag(cord, annotation$1) : void 0;
-		const onDragEnd = () => (cord, annotation$1) => ann?.onDragEnd ? ann?.onDragEnd(cord, annotation$1) : void 0;
-		return {
-			...ann,
-			display: ann?.display,
-			annotationIndex: idx,
-			id: `${ann?.label}-${ann?.value}-${idx}`,
-			scaleID,
-			label,
+var handleLabelEnter = (element, chart$4, annotation$1) => {
+	if (annotation$1?.enableDrag) {
+		chart$4.hoveredAnnotationId = element.options.id || null;
+		chart$4.update("none");
+		element.options.borderWidth = BORDER_WIDTH.POINT_HOVERED;
+		chart$4.canvas.style.cursor = CursorStyle.Pointer;
+	}
+	chart$4.draw();
+};
+var handleLabelLeave = (element, chart$4, annotation$1) => {
+	if (annotation$1?.enableDrag) {
+		chart$4.hoveredAnnotationId = null;
+		element.options.borderWidth = BORDER_WIDTH.INITIAL;
+		chart$4.canvas.style.cursor = CursorStyle.Initial;
+		chart$4.update("none");
+	}
+	chart$4.draw();
+};
+const generateAnn = (ann, index$2) => {
+	const scaleID = ann?.annotationAxis ?? void 0;
+	const inputColor = ann?.color ?? COLORS[index$2];
+	const color$3 = !!ann?.opacity ? addTransparency(inputColor, ann?.opacity) : inputColor;
+	const type = ann?.type ?? AnnotationType$1.LINE;
+	const adjustScaleRange$1 = ann?.adjustScaleRange;
+	const borderColor = {
+		[AnnotationType$1.LINE]: color$3,
+		[AnnotationType$1.POINT]: color$3,
+		[AnnotationType$1.LABEL]: color$3,
+		[AnnotationType$1.BOX]: color$3,
+		[AnnotationType$1.ELLIPSE]: "transparent"
+	}[type] || "transparent";
+	const borderWidth = {
+		[AnnotationType$1.LINE]: BORDER_WIDTH.INITIAL,
+		[AnnotationType$1.BOX]: BORDER_WIDTH.ZERO,
+		[AnnotationType$1.POINT]: BORDER_WIDTH.ZERO,
+		[AnnotationType$1.LABEL]: BORDER_WIDTH.ZERO,
+		[AnnotationType$1.ELLIPSE]: ann?.borderWidth ?? 0
+	}[type] ?? 0;
+	const borderDash = type === AnnotationType$1.LINE ? ANNOTATION_DASH : void 0;
+	const defLabel = {
+		content: ann?.label,
+		display: true,
+		font: { weight: "normal" }
+	};
+	const label = {
+		[AnnotationType$1.LINE]: {
 			backgroundColor: color$3,
-			borderColor,
-			borderWidth,
-			borderDash,
-			type,
-			adjustScaleRange: adjustScaleRange$1,
-			enter,
-			leave,
-			onDragStart,
-			onDrag,
-			onDragEnd,
-			pointStyle: ann?.pointStyle ?? PointStyle.Circle,
-			resizable: ann?.resizable ?? true,
-			displayDragCoordinates: ann?.displayDragCoordinates ?? true
-		};
+			content: ann?.label,
+			display: false,
+			position: Position.Top
+		},
+		[AnnotationType$1.POINT]: {
+			backgroundColor: ann?.labelConfig?.backgroundColor ?? "transparent",
+			content: ann?.label,
+			display: ann?.labelConfig?.display ?? !!ann?.label,
+			position: ann?.labelConfig?.position ?? Position.Bottom,
+			color: ann?.labelConfig?.color ?? "hsl(60, 10.34482759%, 12.5%)",
+			font: ann?.labelConfig?.font ?? `12px "Roobert", "Noto Sans", sans-serif`,
+			borderWidth: BORDER_WIDTH.INITIAL,
+			padding: 5,
+			borderRadius: 3,
+			borderColor: ann?.labelConfig?.borderColor ?? "transparent"
+		},
+		[AnnotationType$1.LABEL]: defLabel,
+		[AnnotationType$1.BOX]: defLabel,
+		[AnnotationType$1.ELLIPSE]: defLabel
+	}[type] || defLabel;
+	const enter = ({ element }, { chart: chart$4 }) => {
+		console.log("enter");
+		switch (type) {
+			case AnnotationType$1.LINE:
+				handleLineEnter(element, chart$4, ann);
+				break;
+			case AnnotationType$1.BOX:
+				handleBoxEnter(element, chart$4, ann);
+				break;
+			case AnnotationType$1.LABEL:
+				handleLabelEnter(element, chart$4, ann);
+				break;
+			case AnnotationType$1.POINT:
+				handlePointEnter(element, chart$4, ann);
+				break;
+			default: break;
+		}
+	};
+	const leave = ({ element }, { chart: chart$4 }) => {
+		switch (type) {
+			case AnnotationType$1.LINE:
+				handleLineLeave(element, chart$4, ann);
+				break;
+			case AnnotationType$1.BOX:
+				handleBoxLeave(element, chart$4, ann);
+				break;
+			case AnnotationType$1.LABEL:
+				handleLabelLeave(element, chart$4, ann);
+				break;
+			case AnnotationType$1.POINT:
+				handlePointLeave(element, chart$4, ann);
+				break;
+			default: break;
+		}
+	};
+	const onDragStart = () => (cord, annotation$1) => ann?.onDragStart ? ann?.onDragStart(cord, annotation$1) : void 0;
+	const onDrag = () => (cord, annotation$1) => ann?.onDrag ? ann?.onDrag(cord, annotation$1) : void 0;
+	const onDragEnd = () => (cord, annotation$1) => ann?.onDragEnd ? ann?.onDragEnd(cord, annotation$1) : void 0;
+	return {
+		...ann,
+		display: ann?.display,
+		annotationIndex: index$2,
+		id: ann?.id ?? `${ann?.label}-${index$2}`,
+		scaleID,
+		label,
+		backgroundColor: color$3,
+		borderColor,
+		borderWidth,
+		borderDash,
+		type,
+		adjustScaleRange: adjustScaleRange$1,
+		enter,
+		leave,
+		onDragStart,
+		onDrag,
+		onDragEnd,
+		pointStyle: ann?.pointStyle ?? PointStyle.Circle,
+		resizable: ann?.resizable ?? true,
+		displayDragCoordinates: ann?.displayDragCoordinates ?? true
+	};
+};
+var getCalloutAnnotation = (refAnnotation, index$2) => {
+	const generated = generateAnn(refAnnotation, index$2);
+	if (!generated) return [];
+	const { label,...baseRest } = generated;
+	const baseId = baseRest.id;
+	const calloutCfg = refAnnotation?.labelConfig?.callout ?? {};
+	const baseAnnotation = {
+		...baseRest,
+		label: { display: false }
+	};
+	const side = index$2 % 2 === 0 ? 1 : -1;
+	const row = Math.floor(index$2 / 2);
+	const xAdjust = typeof calloutCfg.xAdjust === "number" ? calloutCfg.xAdjust : side * 60;
+	const yAdjust = typeof calloutCfg.yAdjust === "number" ? calloutCfg.yAdjust : -40 - row * 22;
+	const color$3 = calloutCfg?.color ?? "hsl(60, 10.34482759%, 12.5%)";
+	const font = calloutCfg?.font ?? `12px "Roobert", "Noto Sans", sans-serif`;
+	const borderColor = calloutCfg?.borderColor ?? "transparent";
+	const strokeStyle = calloutCfg.strokeStyle ?? baseAnnotation.borderColor;
+	const lineWidth = typeof calloutCfg.lineWidth === "number" ? calloutCfg.lineWidth : 1;
+	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 4;
+	const endOffset = typeof calloutCfg.endOffset === "number" ? calloutCfg.endOffset : 4;
+	return [baseAnnotation, {
+		...baseAnnotation,
+		id: `callout-annotation-${index$2}`,
+		type: "label",
+		backgroundColor: "transparent",
+		content: `${label?.content ?? refAnnotation?.label ?? ""}`,
+		color: color$3,
+		font,
+		borderColor,
+		borderWidth: BORDER_WIDTH.INITIAL,
+		padding: 5,
+		xAdjust,
+		yAdjust,
+		resizable: false,
+		displayDragCoordinates: false,
+		enableDrag: true,
+		enter: ({ element }, { chart: chart$4 }) => {
+			return handleLabelEnter(element, chart$4, { enableDrag: true });
+		},
+		leave: ({ element }, { chart: chart$4 }) => {
+			return handleLabelLeave(element, chart$4, { enableDrag: true });
+		},
+		onDragStart: calloutCfg?.onDragStart ? () => (coords) => calloutCfg?.onDragStart?.(coords, refAnnotation) : void 0,
+		onDrag: calloutCfg?.onDrag ? () => (coords) => calloutCfg?.onDrag?.(coords, refAnnotation) : void 0,
+		onDragEnd: calloutCfg?.onDragEnd ? () => (coords) => calloutCfg?.onDragEnd?.(coords, refAnnotation) : void 0,
+		calloutConnector: {
+			enabled: true,
+			fromId: baseId,
+			strokeStyle,
+			lineWidth,
+			startOffset,
+			endOffset
+		}
+	}];
+};
+var generateAnnotations = (annotationsData) => {
+	return annotationsData?.flatMap((ann, idx) => {
+		if (ann?.labelConfig?.callout?.enabled ?? false) return getCalloutAnnotation(ann, idx);
+		return generateAnn(ann, idx);
 	});
 };
-var getAnnotation = ({ showAnnotations, annotationsData }) => {
+const getAnnotation = ({ showAnnotations, annotationsData }) => {
 	return showAnnotations && annotationsData && annotationsData?.length ? generateAnnotations(annotationsData) ?? [] : [];
 };
-var get_chart_annotation_default = getAnnotation;
 const useUpdateAnnotations = (options, dispatch) => {
 	if (!options.annotations?.controlAnnotation) return;
 	const prevAnnotationsRef = useRef(null);
@@ -19483,7 +19573,7 @@ const useUpdateAnnotations = (options, dispatch) => {
 		if (!prev || prev.showAnnotations !== showAnnotations || !isEqual(prev.annotationsData, annotationsData)) {
 			dispatch({
 				type: SET_ANNOTATION,
-				payload: get_chart_annotation_default({
+				payload: getAnnotation({
 					showAnnotations,
 					annotationsData
 				})
@@ -19502,7 +19592,7 @@ const LegendProvider = ({ children, options, datasets }) => {
 		...ds,
 		hidden: false
 	} })) ?? [];
-	const annotation$1 = get_chart_annotation_default({
+	const annotation$1 = getAnnotation({
 		showAnnotations,
 		annotationsData
 	});
@@ -19581,7 +19671,11 @@ const useLegendState = ({ chartRef, options }) => {
 const toAnnotationObject = (annotationArr = []) => {
 	let annotations = {};
 	if (annotationArr.length) annotations = annotationArr.reduce((acc, annotation$1, idx) => {
-		acc[`annotation${idx + 1}`] = annotation$1;
+		const key = annotation$1?.id ?? `annotation${idx + 1}`;
+		acc[key] = {
+			...annotation$1,
+			id: key
+		};
 		return acc;
 	}, {});
 	return { annotations };
@@ -19603,7 +19697,7 @@ const useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets
 	}) ?? {};
 	const { state: legendState } = useLegend() ?? {};
 	const { annotation: annotationFromLegend } = legendState ?? {};
-	const annotation$1 = (controlAnnotation ? annotationFromLegend : get_chart_annotation_default({
+	const annotation$1 = (controlAnnotation ? annotationFromLegend : getAnnotation({
 		showAnnotations,
 		annotationsData
 	})) ?? [];
@@ -19641,6 +19735,7 @@ const useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets
 	const plugins$1 = {
 		datalabels,
 		annotationDraggerPlugin: { enabled: state?.enableDragAnnotation },
+		calloutConnectorPlugin: { enableCalloutAnnotation: options?.annotations.enableCalloutAnnotation },
 		annotation: toAnnotationObject(annotation$1),
 		zoom: {
 			pan: panOptions,
@@ -19797,14 +19892,20 @@ var wrapText = (words, maxWidth, ctx) => {
 var renderWrappedText = (ctx, options) => {
 	if (!ctx) return;
 	const { text, maxWidth, fontSize, lineHeight, x, y, position } = options ?? {};
-	const wrappedLines = wrapText(getWords(text), maxWidth, ctx);
+	let lines = [];
+	if (Array.isArray(text)) text.forEach((item) => {
+		const wrapped = wrapText(getWords(item), maxWidth, ctx);
+		lines.push(...wrapped);
+	});
+	else if (typeof text === "string") lines = wrapText(getWords(text), maxWidth, ctx);
+	if (!lines.length) return;
 	ctx?.save?.();
 	ctx.font = `${fontSize}px Arial`;
 	ctx.fillStyle = SEMI_TRANSPARENT;
 	ctx.textAlign = getTextAlign(position);
 	drawText({
 		ctx,
-		lines: wrappedLines,
+		lines,
 		lineHeight,
 		x,
 		y,
@@ -19854,7 +19955,7 @@ const calculateAnnotationMetricsInValues = (annotation$1) => {
 		centerY = (yMin + yMax) / 2;
 		width = xMax - xMin;
 		height = yMax - yMin;
-	} else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType$1.POINT) {
+	} else if (!isNil(xValue) && !isNil(yValue) && (type === AnnotationType$1.POINT || type === AnnotationType$1.LABEL)) {
 		centerX = xValue;
 		centerY = yValue;
 		width = 0;
@@ -19892,7 +19993,7 @@ const calculateAnnotationMetricsInValuesInPixels = (annotation$1, scales$1, xSca
 		height = yMinValue - yMaxValue;
 		centerX = xScale?.getPixelForValue(xCenterValue) ?? -1;
 		centerY = yScale?.getPixelForValue(yCenterValue) ?? -1;
-	} else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType$1.POINT) {
+	} else if (!isNil(xValue) && !isNil(yValue) && (type === AnnotationType$1.POINT || type === AnnotationType$1.LABEL)) {
 		width = 0;
 		height = 0;
 		centerX = xScale?.getPixelForValue(xValue) ?? -1;
@@ -19919,7 +20020,7 @@ const isWithinChartArea = ({ x, y, chartArea, scales: scales$1, metrics, resizab
 	const maxX = xScale?.getValueForPixel(chartArea.right) ?? Number.POSITIVE_INFINITY;
 	const minY = yScale?.getValueForPixel(chartArea.bottom) ?? Number.NEGATIVE_INFINITY;
 	const maxY = yScale?.getValueForPixel(chartArea.top) ?? Number.POSITIVE_INFINITY;
-	if (annotationType === AnnotationType$1.POINT) return (x !== void 0 ? x >= minX && x <= maxX : true) && (y !== void 0 ? y >= minY && y <= maxY : true);
+	if (annotationType === AnnotationType$1.POINT || annotationType === AnnotationType$1.LABEL) return (x !== void 0 ? x >= minX && x <= maxX : true) && (y !== void 0 ? y >= minY && y <= maxY : true);
 	if (annotationType === AnnotationType$1.BOX && metrics.width !== void 0 && metrics.height !== void 0) {
 		const boxXMin = x !== void 0 ? x - metrics.width / 2 : void 0;
 		const boxXMax = x !== void 0 ? x + metrics.width / 2 : void 0;
@@ -19943,7 +20044,7 @@ const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotatio
 		xScaleID,
 		yScaleID
 	})) return;
-	if (activeAnnotation.type === AnnotationType$1.POINT) {
+	if (activeAnnotation.type === AnnotationType$1.POINT || activeAnnotation.type === AnnotationType$1.LABEL) {
 		if (axis === "x") activeAnnotation.xValue = newPosition;
 		else if (axis === "y") activeAnnotation.yValue = newPosition;
 	} else if (activeAnnotation.type === AnnotationType$1.BOX && metrics) {
@@ -20136,6 +20237,86 @@ const annotationDraggerPlugin = {
 		}
 	}
 };
+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;
+};
+const computeConnectorPoints = (fromEl, labelEl, connector) => {
+	const x1c = fromEl?.centerX;
+	const y1c = fromEl?.centerY;
+	const cx$1 = labelEl?.centerX;
+	const cy = labelEl?.centerY;
+	const labelWidth = labelEl?.width ?? 0;
+	const labelHeight = labelEl?.height ?? 0;
+	const ux = cx$1 - x1c;
+	const uy = cy - y1c;
+	const len = Math.sqrt(ux * ux + uy * uy) || 1;
+	const dx = ux / len;
+	const dy = uy / len;
+	const fromRadius = getRadius(fromEl);
+	const startOffset = (connector?.startOffset ?? 4) + fromRadius;
+	const startX = x1c + dx * startOffset;
+	const startY = y1c + dy * startOffset;
+	let endX = cx$1;
+	let endY = cy;
+	if (labelWidth > 0 && labelHeight > 0) {
+		const hw = labelWidth / 2;
+		const hh = labelHeight / 2;
+		const vx = x1c - cx$1;
+		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 ?? 4);
+		endX = cx$1 + vxn * total;
+		endY = cy + vyn * total;
+	} else {
+		const endOffset = connector.endOffset ?? 4;
+		endX = cx$1 - dx * endOffset;
+		endY = cy - dy * endOffset;
+	}
+	return {
+		startX,
+		startY,
+		endX,
+		endY
+	};
+};
+const calloutConnectorPlugin = {
+	id: "calloutConnector",
+	afterDraw(chart$4) {
+		const { enableCalloutAnnotation } = chart$4?.options?.plugins?.calloutConnectorPlugin || { enableCalloutAnnotation: false };
+		if (!enableCalloutAnnotation) return;
+		const elements$1 = annotation.getAnnotations(chart$4);
+		if (!elements$1 || !elements$1.length) return;
+		const annRoot = chart$4.options.plugins?.annotation;
+		if (!annRoot) return;
+		const raw = annRoot.annotations;
+		if (!raw) return;
+		(Array.isArray(raw) ? raw : Object.values(raw)).forEach((opt) => {
+			const connector = opt?.calloutConnector;
+			if (!connector || !connector.enabled || !opt?.id) return;
+			const labelEl = elements$1.find((el) => el.options && el.options.id === opt.id);
+			const fromEl = elements$1.find((el) => el.options && el.options.id === connector.fromId);
+			if (!labelEl || !fromEl) return;
+			const { startX, startY, endX, endY } = computeConnectorPoints(fromEl, labelEl, connector) ?? {};
+			const ctx = chart$4?.ctx;
+			ctx?.save?.();
+			ctx?.beginPath?.();
+			ctx?.moveTo?.(startX, startY);
+			ctx?.lineTo?.(endX, endY);
+			ctx.lineWidth = connector?.lineWidth ?? 1;
+			ctx.strokeStyle = connector?.strokeStyle ?? "rgba(120,120,120,0.9)";
+			if (connector?.lineDash && connector?.lineDash?.length) ctx?.setLineDash?.(connector.lineDash);
+			ctx.lineCap = "round";
+			ctx?.stroke?.();
+			ctx?.restore?.();
+		});
+	}
+};
 let defaultTranslations = /* @__PURE__ */ function(defaultTranslations$1) {
 	defaultTranslations$1["label"] = "Label";
 	defaultTranslations$1["pointsLines"] = "Points & lines";
@@ -20572,7 +20753,7 @@ var Legend$1 = ({ chartRef, legendConfig }) => {
 	] });
 };
 var legend_default = Legend$1;
-Chart.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin, plugin$1, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin);
+Chart.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin, plugin$1, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin);
 var LineChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);