@moderneinc/react-charts 1.4.0 → 1.5.0

package/dist/components/d3-stacked-area-chart/d3-stacked-area-chart.types.d.ts

@@ -118,4 +118,11 @@ export type D3StackedAreaChartProps = {
      * @default 1
      */
     tooltipScale?: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * Use this when the chart is placed inside a container with overflow:hidden.
+     * @default false
+     */
+    usePortalTooltip?: boolean;
 };

package/dist/components/d3-stacked-bar-chart/d3-stacked-bar-chart.types.d.ts

@@ -86,6 +86,21 @@ export type D3StackedBarChartProps = {
      * @default 1
      */
     tooltipScale?: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * Use this when the chart is placed inside a container with overflow:hidden.
+     * @default false
+     */
+    usePortalTooltip?: boolean;
+    /**
+     * Where to anchor the tooltip relative to the crosshair.
+     * - 'cursor': Position near the cursor/crosshair intersection (default)
+     * - 'top': Position at the top of the chart, centered on the crosshair X
+     * - 'bottom-corner': Position at lower-left or lower-right of crosshair intersection
+     * @default 'cursor'
+     */
+    tooltipAnchor?: 'cursor' | 'top' | 'bottom-corner';
 };
 export type TooltipData = {
     visible: boolean;

package/dist/components/shared/chart-tooltip.component.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+import { ChartTooltipProps } from './chart-tooltip.types';
+/**
+ * Chart tooltip component that supports both inline and portal rendering modes.
+ *
+ * Coordinates are provided in SVG viewBox space and transformed to pixel coordinates
+ * based on the actual rendered size of the container.
+ *
+ * When `usePortal` is false (default), the tooltip renders with `position: absolute`
+ * relative to the chart container - this can be clipped by parent overflow settings.
+ *
+ * When `usePortal` is true, the tooltip renders in a React Portal (document.body)
+ * with `position: fixed`, escaping any container overflow constraints.
+ */
+export declare const ChartTooltip: FunctionComponent<ChartTooltipProps>;

package/dist/components/shared/chart-tooltip.types.d.ts

@@ -0,0 +1,62 @@
+import { RefObject } from 'react';
+export type ChartTooltipProps = {
+    /**
+     * Whether the tooltip is visible
+     */
+    visible: boolean;
+    /**
+     * X position in SVG viewBox coordinates
+     */
+    x: number;
+    /**
+     * Y position in SVG viewBox coordinates
+     */
+    y: number;
+    /**
+     * Reference to the chart container element for dimension calculations
+     */
+    containerRef: RefObject<HTMLElement | null>;
+    /**
+     * SVG viewBox width - required to transform viewBox coordinates to pixel coordinates
+     */
+    viewBoxWidth: number;
+    /**
+     * SVG viewBox height - required to transform viewBox coordinates to pixel coordinates
+     */
+    viewBoxHeight: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * @default false
+     */
+    usePortal?: boolean;
+    /**
+     * Scale factor for tooltip size. Affects padding and base styles.
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * Width threshold in viewBox coordinates for horizontal flip.
+     * When x exceeds this value, tooltip flips to the left side of the cursor.
+     * Only applies when anchorPosition is 'cursor'.
+     */
+    flipThreshold?: number;
+    /**
+     * Where to anchor the tooltip relative to the crosshair.
+     * - 'cursor': Position near the cursor/crosshair intersection (default)
+     * - 'top': Position at the top of the chart, centered on the crosshair X
+     * - 'bottom-corner': Position at lower-left or lower-right of crosshair intersection
+     * @default 'cursor'
+     */
+    anchorPosition?: 'cursor' | 'top' | 'bottom-corner';
+    /**
+     * Top margin of the chart area in viewBox coordinates.
+     * Used when anchorPosition is 'top' to position tooltip correctly.
+     * @default 20
+     */
+    chartTopMargin?: number;
+    /**
+     * Tooltip content
+     */
+    children: React.ReactNode;
+};