@x-plat/design-system 0.5.34 → 0.5.36

package/dist/components/Chart/index.cjs

@@ -163,8 +163,8 @@ var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react.default.useState({
     visible: false,
-    clientX: 0,
-    clientY: 0,
+    x: 0,
+    y: 0,
     content: ""
   });
   const containerRef = import_react.default.useRef(null);
@@ -175,18 +175,26 @@ var useChartTooltip = (enabled) => {
     const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
   const show = import_react.default.useCallback((e, content) => {
     if (!enabled) return;
-    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
+    const rect = containerRef.current?.getBoundingClientRect();
+    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) => {
+    if (!enabled) return;
+    setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = import_react.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, hide, move, containerRef };
+  return { tooltip, show, showAt, hide, move, containerRef };
 };
 var GridLines = import_react.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -251,7 +259,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var LineChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -291,23 +299,9 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -375,7 +369,7 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var CurveChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -415,23 +409,9 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -499,7 +479,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, onMove, onLeave }) => {
+var BarChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -549,8 +529,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: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-            onMouseMove: onMove,
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -638,30 +617,14 @@ var PieDonutChart = import_react.default.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
+          className: "chart-slice"
         }
-      ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "text",
-        {
-          x: s.lx,
-          y: s.ly,
-          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          children: s.v
-        },
-        `label-${i}`
-      ))
+      ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
   const ref = import_react.default.useRef(null);
   const [pos, setPos] = import_react.default.useState({ left: 0, top: 0 });
   import_react.default.useLayoutEffect(() => {
@@ -669,20 +632,19 @@ var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + TOOLTIP_OFFSET;
-    let top = clientY - h - TOOLTIP_OFFSET;
-    if (left + w > vw - 8) left = clientX - w - TOOLTIP_OFFSET;
-    if (top < 8) top = clientY + TOOLTIP_OFFSET;
-    if (left < 8) left = 8;
+    let left = x + TOOLTIP_OFFSET;
+    let top = y - h - TOOLTIP_OFFSET;
+    if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (left < 0) left = 0;
     setPos({ left, top });
-  }, [clientX, clientY]);
+  }, [x, y, containerWidth, containerHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ref,
-      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
-      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
+      className: "chart-tooltip chart-tooltip-show",
+      style: { left: pos.left, top: pos.top },
       children
     }
   );
@@ -727,7 +689,7 @@ var ChartLegend = ({ data, labels, type }) => {
 };
 var Chart = import_react.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react.default.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = import_react.default.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -735,13 +697,13 @@ var Chart = import_react.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, 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, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    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 }),
-    tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/dist/components/Chart/index.css

@@ -4,11 +4,14 @@
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .lib-xplat-chart .chart-svg {
   display: block;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   will-change: transform;
   contain: layout style paint;
 }
@@ -92,7 +95,19 @@
   white-space: nowrap;
   overflow: visible;
 }
+.lib-xplat-chart .chart-bar-animate {
+  animation: chart-bar-grow 800ms ease-out both;
+}
+.lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
+  animation: chart-fade-in 150ms ease-out both;
+}
+.lib-xplat-chart .chart-area[style*=animationDelay] {
+  animation: chart-fade-in 800ms ease-out both;
+}
 .lib-xplat-chart .chart-tooltip {
+  position: absolute;
+  z-index: 10;
   padding: var(--spacing-space-3);
   background-color: var(--semantic-surface-neutral-strong);
   color: var(--semantic-text-inverse);
@@ -103,25 +118,8 @@
   max-width: 240px;
   pointer-events: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-.lib-xplat-chart .chart-tooltip.chart-tooltip-show {
-  opacity: 1;
   animation: chart-tooltip-in 120ms ease-out;
 }
-.lib-xplat-chart .chart-tooltip.chart-tooltip-hide {
-  opacity: 0;
-  animation: chart-tooltip-out 80ms ease-in;
-}
-.lib-xplat-chart .chart-bar-animate {
-  animation: chart-bar-grow 800ms ease-out both;
-}
-.lib-xplat-chart .chart-pie-label-animate {
-  opacity: 0;
-  animation: chart-fade-in 150ms ease-out both;
-}
-.lib-xplat-chart .chart-area[style*=animationDelay] {
-  animation: chart-fade-in 800ms ease-out both;
-}
 .lib-xplat-chart .chart-legend {
   display: flex;
   flex-wrap: wrap;
@@ -178,14 +176,6 @@
     opacity: 1;
   }
 }
-@keyframes chart-tooltip-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
   .lib-xplat-chart .chart-pie-label-animate,

package/dist/components/Chart/index.js

@@ -127,8 +127,8 @@ var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
-    clientX: 0,
-    clientY: 0,
+    x: 0,
+    y: 0,
     content: ""
   });
   const containerRef = React.useRef(null);
@@ -139,18 +139,26 @@ var useChartTooltip = (enabled) => {
     const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
   const show = React.useCallback((e, content) => {
     if (!enabled) return;
-    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
+    const rect = containerRef.current?.getBoundingClientRect();
+    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) => {
+    if (!enabled) return;
+    setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = React.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, hide, move, containerRef };
+  return { tooltip, show, showAt, hide, move, containerRef };
 };
 var GridLines = React.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx(Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -215,7 +223,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -255,23 +263,9 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -339,7 +333,7 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -379,23 +373,9 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        const svg = e.currentTarget;
-        const rect = svg.getBoundingClientRect();
-        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
-        const points = seriesPoints[0];
-        if (!points || points.length === 0) return;
-        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
-        let closest = 0;
-        let minDist = Math.abs(points[0].x - mx);
-        for (let i = 1; i < points.length; i++) {
-          const dist = Math.abs(points[i].x - mx);
-          if (dist < minDist) {
-            minDist = dist;
-            closest = i;
-          }
-        }
-        if (minDist <= step / 2) {
-          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -463,7 +443,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, onMove, onLeave }) => {
+var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -513,8 +493,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMo
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-            onMouseMove: onMove,
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -602,30 +581,14 @@ var PieDonutChart = React.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
+          className: "chart-slice"
         }
-      ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: s.lx,
-          y: s.ly,
-          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          children: s.v
-        },
-        `label-${i}`
-      ))
+      ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
   const ref = React.useRef(null);
   const [pos, setPos] = React.useState({ left: 0, top: 0 });
   React.useLayoutEffect(() => {
@@ -633,20 +596,19 @@ var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + TOOLTIP_OFFSET;
-    let top = clientY - h - TOOLTIP_OFFSET;
-    if (left + w > vw - 8) left = clientX - w - TOOLTIP_OFFSET;
-    if (top < 8) top = clientY + TOOLTIP_OFFSET;
-    if (left < 8) left = 8;
+    let left = x + TOOLTIP_OFFSET;
+    let top = y - h - TOOLTIP_OFFSET;
+    if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (left < 0) left = 0;
     setPos({ left, top });
-  }, [clientX, clientY]);
+  }, [x, y, containerWidth, containerHeight]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
-      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
+      className: "chart-tooltip chart-tooltip-show",
+      style: { left: pos.left, top: pos.top },
       children
     }
   );
@@ -691,7 +653,7 @@ var ChartLegend = ({ data, labels, type }) => {
 };
 var Chart = React.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = React.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = React.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -699,13 +661,13 @@ var Chart = React.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    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 }),
-    tooltip.content && /* @__PURE__ */ jsx(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";