@moderneinc/react-charts 1.3.0-next.d7d66e → 1.4.0-next.9cb5c1

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

@@ -112,4 +112,17 @@ export type D3StackedAreaChartProps = {
     };
     /** Morph progress (0 = area, 1 = parliament) */
     morphProgress?: number;
+    /**
+     * Scale factor for tooltip size. Use values like 0.8 for 80% size, 1.2 for 120% size.
+     * Affects font sizes, padding, spacing, and color bar width proportionally.
+     * @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

@@ -80,6 +80,19 @@ export type D3StackedBarChartProps = {
      * Set to 0 to disable minimum width entirely.
      */
     minBarWidth?: number;
+    /**
+     * Scale factor for tooltip size. Use values like 0.8 for 80% size, 1.2 for 120% size.
+     * Affects font sizes, padding, spacing, and color bar width proportionally.
+     * @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;
 };
 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,47 @@
+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.
+     */
+    flipThreshold?: number;
+    /**
+     * Tooltip content
+     */
+    children: React.ReactNode;
+};