@x-plat/design-system 0.5.36 → 0.5.37

package/dist/components/Chart/index.cjs

@@ -186,8 +186,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = import_react.default.useCallback((x, y, content) => {
+  const showAt = import_react.default.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = import_react.default.useCallback(() => {
@@ -279,6 +292,7 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = import_react.default.useRef(null);
+  const svgRef = import_react.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -295,13 +309,14 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -389,6 +404,7 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = import_react.default.useRef(null);
+  const curveSvgRef = import_react.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -405,13 +421,14 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -480,6 +497,7 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = import_react.default.useRef(null);
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -506,7 +524,7 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, animate
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -529,7 +547,7 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, animate
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -702,7 +720,7 @@ var Chart = import_react.default.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/dist/components/Chart/index.js

@@ -150,8 +150,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = React.useCallback((x, y, content) => {
+  const showAt = React.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = React.useCallback(() => {
@@ -243,6 +256,7 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = React.useRef(null);
+  const svgRef = React.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -259,13 +273,14 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
   return /* @__PURE__ */ jsxs(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -353,6 +368,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = React.useRef(null);
+  const curveSvgRef = React.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -369,13 +385,14 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
   return /* @__PURE__ */ jsxs(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -444,6 +461,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = React.useRef(null);
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -470,7 +488,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onSh
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ jsxs("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -493,7 +511,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onSh
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -666,7 +684,7 @@ var Chart = React.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ jsx(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/dist/components/index.cjs

@@ -2380,8 +2380,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = import_react6.default.useCallback((x, y, content) => {
+  const showAt = import_react6.default.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = import_react6.default.useCallback(() => {
@@ -2473,6 +2486,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = import_react6.default.useRef(null);
+  const svgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react6.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -2489,13 +2503,14 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -2583,6 +2598,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = import_react6.default.useRef(null);
+  const curveSvgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react6.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -2599,13 +2615,14 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -2674,6 +2691,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = import_react6.default.useRef(null);
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2700,7 +2718,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -2723,7 +2741,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -2896,7 +2914,7 @@ var Chart = import_react6.default.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/dist/components/index.js

@@ -2290,8 +2290,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = React6.useCallback((x, y, content) => {
+  const showAt = React6.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = React6.useCallback(() => {
@@ -2383,6 +2396,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = React6.useRef(null);
+  const svgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -2399,13 +2413,14 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   return /* @__PURE__ */ jsxs197(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -2493,6 +2508,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = React6.useRef(null);
+  const curveSvgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -2509,13 +2525,14 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   return /* @__PURE__ */ jsxs197(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -2584,6 +2601,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = React6.useRef(null);
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2610,7 +2628,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ jsxs197("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -2633,7 +2651,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -2806,7 +2824,7 @@ var Chart = React6.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ jsx307(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/dist/index.cjs

@@ -6779,8 +6779,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = import_react6.default.useCallback((x, y, content) => {
+  const showAt = import_react6.default.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = import_react6.default.useCallback(() => {
@@ -6872,6 +6885,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = import_react6.default.useRef(null);
+  const svgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react6.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -6888,13 +6902,14 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -6982,6 +6997,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = import_react6.default.useRef(null);
+  const curveSvgRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react6.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -6998,13 +7014,14 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -7073,6 +7090,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = import_react6.default.useRef(null);
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -7099,7 +7117,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -7122,7 +7140,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -7295,7 +7313,7 @@ var Chart = import_react6.default.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/dist/index.js

@@ -6380,8 +6380,21 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = React6.useCallback((x, y, content) => {
+  const showAt = React6.useCallback((svgX, svgY, content, svgEl) => {
     if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let x = svgX;
+    let y = svgY;
+    if (svgEl) {
+      const svgRect = svgEl.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const vb = svgEl.viewBox.baseVal;
+      const scaleX = svgRect.width / (vb.width || 1);
+      const scaleY = svgRect.height / (vb.height || 1);
+      x = svgX * scaleX + (svgRect.left - containerRect.left);
+      y = svgY * scaleY + (svgRect.top - containerRect.top);
+    }
     setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = React6.useCallback(() => {
@@ -6473,6 +6486,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = React6.useRef(null);
+  const svgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -6489,13 +6503,14 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   return /* @__PURE__ */ jsxs197(
     "svg",
     {
+      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
         } else {
           onLeave();
         }
@@ -6583,6 +6598,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = React6.useRef(null);
+  const curveSvgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -6599,13 +6615,14 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   return /* @__PURE__ */ jsxs197(
     "svg",
     {
+      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
         } else {
           onLeave();
         }
@@ -6674,6 +6691,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+  const barSvgRef = React6.useRef(null);
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6700,7 +6718,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ jsxs197("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -6723,7 +6741,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -6896,7 +6914,7 @@ var Chart = React6.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ jsx307(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.36",
+  "version": "0.5.37",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",