td-plots 1.11.0 → 1.11.2

package/dist/components/LegendUtils.d.ts

@@ -14,4 +14,7 @@ export type LegendBoxPlotItemProps = LegendItemProps & {
 };
 export declare const LegendBoxPlotItem: (props: LegendBoxPlotItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LegendColorItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LegendLineItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export type LegendLineItemProps = LegendItemProps & {
+    strokeDasharray?: string;
+};
+export declare const LegendLineItem: (props: LegendLineItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SummaryComparisonPlot.d.ts

@@ -1,16 +1,16 @@
-type SummaryComparisonData = {
-    comparedMedian?: number;
-    summarizedMin?: number;
-    summarizedMax?: number;
-    summarizedMean?: number;
+type BracketData = {
+    userValue?: number;
+    populationMin: number;
+    populationMax: number;
 };
-type SummaryComparisonGroup = {
+type BracketDataWithMeta = {
     groupLabel: string;
-    data: SummaryComparisonData;
+    data: BracketData;
     color?: string;
 };
 export type SummaryComparisonPlotProps = {
-    groups: SummaryComparisonGroup[];
+    groups: BracketDataWithMeta[];
+    userColor?: string;
     width?: number;
     height?: number;
     title?: string;
@@ -21,6 +21,11 @@ export type SummaryComparisonPlotProps = {
     tooltipPosition?: "left" | "right";
     startXAxisAtZero?: boolean;
     unit?: string;
+    tooltipLabels?: {
+        populationMinLabel?: string;
+        populationMaxLabel?: string;
+        userValueLabel?: string;
+    };
 };
 declare const SummaryComparisonPlot: (props: SummaryComparisonPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SummaryComparisonPlot;

package/dist/index.d.ts

@@ -19,6 +19,6 @@ export type { LineWithHistogramProps } from "./components/LineWithHistogram";
 export { default as BarPlot } from "./components/BarPlot";
 export type { BarPlotProps } from "./components/BarPlot";
 export { LegendColorItem, LegendLineItem } from "./components/LegendUtils";
-export type { LegendItemProps } from "./components/LegendUtils";
+export type { LegendItemProps, LegendLineItemProps, } from "./components/LegendUtils";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -1538,7 +1538,6 @@ const BoxPlot = (props) => {
         staticPlot: false, // Enable interactivity
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    console.log("layout:", layout); // Debugging log to inspect the final layout object
     return (jsx("div", { ref: containerRef, 
         // className={`plot-container ${plotId}`}
         style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsxs("div", { style: {
@@ -1619,6 +1618,7 @@ const LegendColorItem = (props) => {
 const LegendLineItem = (props) => {
     const lineWidth = props.width || 40;
     const lineHeight = props.height || 4;
+    const dashArray = props.strokeDasharray || "";
     const labelKey = props.label == null
         ? ""
         : typeof props.label === "string"
@@ -1629,7 +1629,7 @@ const LegendLineItem = (props) => {
             alignItems: "center",
             mr: 4,
             fontFamily: "Open Sans, verdana, arial, sans-serif",
-        }, children: [jsx("svg", { width: lineWidth, height: lineHeight, style: { marginRight: 8 }, children: jsx("line", { x1: 0, y1: lineHeight / 2, x2: lineWidth, y2: lineHeight / 2, stroke: props.color, strokeWidth: lineHeight }) }), props.label] }, labelKey));
+        }, children: [jsx("svg", { width: lineWidth, height: lineHeight, style: { marginRight: 8 }, children: jsx("line", { x1: 0, y1: lineHeight / 2, x2: lineWidth, y2: lineHeight / 2, stroke: props.color, strokeWidth: lineHeight, strokeDasharray: dashArray }) }), props.label] }, labelKey));
 };
 
 // This component takes grouped data and transforms it for displaying with the BoxPlot component.
@@ -1922,65 +1922,117 @@ const SplitBoxPlot = (props) => {
     });
     const totalGroups = groups.length + additionalGroups.length;
     const yAxisSplitProportion = additionalGroups.length > 0 ? groups.length / totalGroups : 1;
+    // Render y-axis titles as annotations so we can specifically set xshift in px from the axis.
+    // Calculating approximate label width in pixels to ensure the title is far enough away from the longest label,
+    // with a minimum distance to look good even with short labels.
+    const charWidth = 8; // ~px per character for Open Sans 14px (Plotly title font)
+    const primaryMaxChars = Math.max(0, ...groups.map((g) => g.label.length));
+    const secondaryMaxChars = additionalGroups.length > 0
+        ? Math.max(0, ...additionalGroups.map((g) => g.label.length))
+        : primaryMaxChars;
+    const maxLabelChars = Math.max(primaryMaxChars, secondaryMaxChars);
+    const approxLabelPx = maxLabelChars * charWidth;
+    const yAxisTitleAnnotations = [];
+    if (yAxisTitle) {
+        const domainTop = additionalGroups.length > 0 ? yAxisSplitProportion - 0.01 : 1;
+        yAxisTitleAnnotations.push({
+            text: yAxisTitle,
+            x: 0,
+            xshift: -120,
+            y: domainTop / 2,
+            xref: "paper",
+            yref: "paper",
+            showarrow: false,
+            textangle: "-90",
+            xanchor: "center",
+            yanchor: "middle",
+            font: {
+                family: '"Open Sans", verdana, arial, sans-serif',
+                size: 14,
+                color: "rgb(68, 68, 68)",
+            },
+        });
+    }
+    if (secondYAxisTitle && additionalGroups.length > 0) {
+        yAxisTitleAnnotations.push({
+            text: secondYAxisTitle,
+            x: 0,
+            xshift: -120,
+            y: (yAxisSplitProportion + 1) / 2,
+            xref: "paper",
+            yref: "paper",
+            showarrow: false,
+            textangle: "-90",
+            xanchor: "center",
+            yanchor: "middle",
+            font: {
+                family: '"Open Sans", verdana, arial, sans-serif',
+                size: 14,
+                color: "rgb(68, 68, 68)",
+            }, // styled to look like plotly's default title styling
+        });
+    }
     const extraLayoutConfig = Object.assign(Object.assign({ yaxis: {
             type: "linear", // Use linear axis for numeric positioning of boxes
             tickmode: "array",
             tickvals,
             ticktext,
-            automargin: true,
+            // automargin: true,
             range: [-0.5, groups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
-            domain: additionalGroups ? [0, yAxisSplitProportion - 0.01] : [0, 1], // Ensure primary y-axis takes full height
+            domain: additionalGroups.length > 0 ? [0, yAxisSplitProportion - 0.01] : [0, 1], // Ensure primary y-axis takes full height
             tickcolor: "#ffffff",
             ticklen: 0,
+            ticksuffix: "", // clear the BoxPlot default suffix so label widths match yaxis2
             showgrid: false,
             //@ts-ignore
             ticklabelstandoff: 7,
             ticklabelposition: "outside left",
-            title: {
-                text: yAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
-                standoff: 45,
-            },
+            title: { text: "" }, // rendered via annotation instead
         }, xaxis: {
             anchor: "y", // Anchor to primary y-axis
         }, margin: {
-            t: title ? 50 : 40,
-            r: 50,
+            t: title ? 50 : 70,
+            r: 20,
+            l: Math.max(130, approxLabelPx + 40),
         }, shapes: [
             ...separatorShapes,
             // ...differenceBetweenMediansLines,
-            ...xAnnotations.map((annotation) => ({
+            ...xAnnotations.map((annotation, annotationIndex) => ({
                 type: "line",
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.05,
+                y1: 1.05 + annotationIndex * 0.05,
                 xref: "x",
                 yref: "paper",
                 line: {
                     color: annotation.color || "rgba(255, 0, 0, 0.7)",
                     width: 2,
-                    dash: "dash",
+                    dash: "dot",
                 },
             })),
         ], annotations: [
+            ...yAxisTitleAnnotations,
             // ...differenceAnnotations,
-            ...xAnnotations.map((annotation) => ({
+            ...xAnnotations.map((annotation, annotationIndex) => ({
                 x: annotation.x,
-                y: 1.06,
+                y: 1,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",
                 showarrow: false,
                 yanchor: "bottom",
+                yshift: 18 + annotationIndex * 20, // stack in pixels — stable across screen sizes
                 font: {
                     color: annotation.color || "rgba(255, 0, 0, 0.7)",
                     size: 12,
                 },
             })),
-        ] }, (additionalGroups && {
+        ] }, (additionalGroups.length > 0 && {
         xaxis2: {
             title: {
                 text: secondXAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
+                standoff: 10 + xAnnotations.length * 12, // Add extra space to accommodate annotations.
             },
             side: "top",
             anchor: "y2", // Anchor to secondary y-axis
@@ -1998,17 +2050,16 @@ const SplitBoxPlot = (props) => {
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
         },
-    })), (additionalGroups && {
+    })), (additionalGroups.length > 0 && {
         yaxis2: {
             domain: [yAxisSplitProportion, 1], // Adjust domain for secondary y-axis (histogram)
-            title: {
-                text: secondYAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
-                standoff: 45, // Add space between title and axis
-            },
+            title: { text: "" }, // rendered via annotation instead
             range: [-0.5, additionalGroups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
             automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,
+            ticklen: 0,
+            ticksuffix: "",
             ticklabelposition: "outside left",
             showline: true,
             mirror: "ticks",
@@ -2025,15 +2076,15 @@ const SplitBoxPlot = (props) => {
             ticklabelstandoff: 7,
         },
     }));
-    console.log("extraLayoutConfig:", extraLayoutConfig);
     const containerStyles = Object.assign({ width: width, height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
-    console.log(boxPlotData);
     return (jsx("div", { style: Object.assign({}, containerStyles), children: jsx(BoxPlot, { data: boxPlotData, width: width, height: height, title: title, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, extraLayoutConfig: extraLayoutConfig, containerStyleOverrides: containerStyleOverrides, plotId: `${plotId}-boxplot` }) }));
 };
 
 const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const SummaryComparisonPlot = (props) => {
-    const { groups, height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, unit = "", } = props;
+    const { groups, userColor = "orange", height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, unit = "", 
+    // xAnnotations = [], TO DO
+    tooltipLabels = {}, } = props;
     // Ref for plot container
     const containerRef = useRef(null);
     // State for custom tooltip
@@ -2063,40 +2114,42 @@ const SummaryComparisonPlot = (props) => {
         let tooltipX = event.event.clientX;
         let tooltipY = event.event.clientY;
         content += `<strong>${groupName}</strong><br/>`;
-        const summarizedMinText = groupData.summarizedMin
-            ? groupData.summarizedMin.toFixed(2)
+        const populationMinText = groupData.populationMin !== undefined
+            ? groupData.populationMin.toFixed(2)
             : "NA";
-        const summarizedMaxText = groupData.summarizedMax
-            ? groupData.summarizedMax.toFixed(2)
-            : "NA";
-        const comparedMedianText = groupData.comparedMedian !== undefined
-            ? groupData.comparedMedian.toFixed(2)
+        const populationMaxText = groupData.populationMax !== undefined
+            ? groupData.populationMax.toFixed(2)
             : "NA";
         content += `
       <table style="width: 100%; margin-top: 4px;">
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">Population avg-\u03C3:</td>
-          <td style="text-align: right; padding: 2px 0;">${summarizedMinText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.populationMinLabel || "Population avg-\u03C3"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${populationMinText}</td>
         </tr>
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">Population avg+\u03C3:</td>
-          <td style="text-align: right; padding: 2px 0;">${summarizedMaxText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.populationMaxLabel || "Population avg+\u03C3"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${populationMaxText}</td>
         </tr>
+        `;
+        if (groupData.userValue !== undefined) {
+            const userValueText = groupData.userValue.toFixed(2);
+            content += `
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">My Median:</td>
-          <td style="text-align: right; padding: 2px 0;">${comparedMedianText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.userValueLabel || "My value"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${userValueText}</td>
         </tr>
-      </table>
-    `;
+      `;
+        }
+        content += `</table></div>`;
         contentColor = eventData.line
             ? eventData.line.color
             : eventData.marker.color || contentColor;
-        // Position tooltip at the end of the line (75th percentile)
+        // Position tooltip at the end of the line (populationMax for right tooltip, populationMin for left tooltip)
         // Use the xaxis d2p method to convert data coordinate to pixel coordinate
         if (point.xaxis && typeof point.xaxis.d2p === "function") {
             const pixelX = tooltipPosition === "right"
-                ? point.xaxis.d2p(groupData.summarizedMax)
-                : point.xaxis.d2p(groupData.summarizedMin);
+                ? point.xaxis.d2p(groupData.populationMax)
+                : point.xaxis.d2p(groupData.populationMin);
             const pixelY = point.yaxis.d2p(eventData.y[0]); // Use the y coordinate of the line for vertical positioning
             const containerRect = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (containerRect) {
@@ -2120,63 +2173,68 @@ const SummaryComparisonPlot = (props) => {
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
-        if (group.data.summarizedMin !== undefined &&
-            group.data.summarizedMax !== undefined) {
-            traces.push({
-                type: "scatter",
-                mode: "lines",
-                name: group.groupLabel,
-                x: [group.data.summarizedMin, group.data.summarizedMax],
-                y: [groupIndex * 0.1, groupIndex * 0.1],
-                line: {
-                    color: colorToRGBA(group.color || "orange", 1),
-                    width: 6,
-                },
-                showlegend: false,
-                hoverinfo: "none",
-            });
-        }
-        if (group.data.comparedMedian !== undefined) {
-            traces.push({
-                type: "scatter",
-                mode: "markers",
-                name: group.groupLabel,
-                x: [group.data.comparedMedian],
-                y: [groupIndex * 0.1],
-                marker: {
-                    color: colorToRGBA(group.color || "orange", 1),
-                    size: 10,
-                    symbol: "circle",
-                    line: {
-                        color: "white",
-                        width: 1,
-                    },
-                },
-                showlegend: false,
-                hoverinfo: "none",
-            });
+        traces.push({
+            type: "scatter",
+            mode: "lines",
+            name: group.groupLabel,
+            x: [group.data.populationMin, group.data.populationMax],
+            y: [groupIndex * 0.1, groupIndex * 0.1],
+            line: {
+                color: colorToRGBA(group.color || "orange", 1),
+                width: 6,
+            },
+            showlegend: false,
+            hoverinfo: "none",
+        });
+        if (group.data.userValue !== undefined) {
+            const CIRCLE_RADIUS_PX = 6;
             comparedLines.push({
                 type: "line",
                 name: group.groupLabel,
-                x0: group.data.comparedMedian,
-                x1: group.data.comparedMedian,
+                x0: group.data.userValue,
+                x1: group.data.userValue,
                 y0: 0,
                 y1: 1.1,
                 yref: "paper",
                 line: {
-                    color: group.color || "orange",
+                    color: colorToRGBA(userColor, 1),
                     width: 2,
                 },
             });
+            comparedLines.push({
+                type: "circle",
+                xref: "x",
+                yref: "y",
+                // Pixel-mode: xanchor/yanchor are data coords for the center;
+                // x0/x1/y0/y1 are pixel offsets, so the circle stays a fixed
+                // visual size regardless of the axis scale.
+                xsizemode: "pixel",
+                ysizemode: "pixel",
+                xanchor: group.data.userValue,
+                yanchor: groupIndex * 0.1,
+                x0: -CIRCLE_RADIUS_PX,
+                x1: CIRCLE_RADIUS_PX,
+                y0: -CIRCLE_RADIUS_PX,
+                y1: CIRCLE_RADIUS_PX,
+                fillcolor: colorToRGBA(userColor, 1),
+                line: {
+                    color: "white",
+                    width: 1,
+                },
+            });
             comparedAnnotations.push({
-                x: group.data.comparedMedian,
-                y: 1.08,
+                x: group.data.userValue,
+                y: 1.1,
                 xref: "x",
                 yref: "paper",
-                text: `${group.data.comparedMedian.toFixed(2)} ${unit}`,
+                text: `${group.data.userValue.toFixed(2)} ${unit}`,
                 showarrow: false,
                 xanchor: "center",
                 yanchor: "bottom",
+                font: {
+                    color: colorToRGBA(userColor, 1),
+                    size: 12,
+                },
             });
         }
         return traces;
@@ -2184,9 +2242,10 @@ const SummaryComparisonPlot = (props) => {
     // Add tick label for the compared annotation value
     if (comparedAnnotations.length > 0) {
         comparedAnnotations.push({
-            x: -0.03, // Position to the left of the y-axis
-            y: 1.03,
+            x: 0, // Position to the left of the y-axis
+            y: 1.1, // Should match the y position of the compared median annotation
             xref: "paper",
+            xshift: -10,
             yref: "paper",
             text: "My AVG",
             showarrow: false,
@@ -2194,14 +2253,17 @@ const SummaryComparisonPlot = (props) => {
             yanchor: "bottom",
         });
     }
-    const xRangeMin = groups.reduce((min, group) => {
-        var _a, _b;
-        return Math.min(min, (_a = group.data.summarizedMin) !== null && _a !== void 0 ? _a : Infinity, (_b = group.data.comparedMedian) !== null && _b !== void 0 ? _b : Infinity);
-    }, 0);
+    // xRangeMin a little funky because we want to ensure a non-zero value is calculated
+    // in case startXAxisAtZero is false. populationMin is our anchor and
+    // if that is not defined then we can fall back to a min of 0. If userValue is not defined
+    // we want to listen to populationMin for computing xRangeMin.
+    const xRangeMin = groups.reduce((min, group) => { var _a; return Math.min(min, group.data.populationMin, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : Infinity); }, Infinity);
+    // Similar logic for xRangeMax. If nothing is defined, set the max to 0.
+    // Otherwise, listen to populationMax and userValue if given.
     const xRangeMax = groups.reduce((max, group) => {
-        var _a, _b;
-        return Math.max(max, (_a = group.data.summarizedMax) !== null && _a !== void 0 ? _a : -Infinity, (_b = group.data.comparedMedian) !== null && _b !== void 0 ? _b : -Infinity);
-    }, 0);
+        var _a;
+        return Math.max(max, group.data.populationMax, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : -Infinity);
+    }, -Infinity);
     const layout = {
         width: undefined,
         height: height,
@@ -2250,6 +2312,12 @@ const SummaryComparisonPlot = (props) => {
             linewidth: 1,
         },
         yaxis: {
+            title: {
+                text: yAxisTitle,
+                font: {
+                    size: 14,
+                },
+            },
             mirror: "ticks",
             gridcolor: "#efefef",
             gridwidth: 0.2,
@@ -2323,12 +2391,26 @@ const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, c
             gap: "20px",
             alignItems: "center",
             flexDirection: "row",
-        }, children: [jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: {
+        }, children: [jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsxs("div", { style: {
+                            position: "relative",
                             width: 13,
-                            height: 13,
-                            backgroundColor: color,
-                            borderRadius: "20px",
-                        } }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: { width: 30, height: 3, backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
+                            height: 20,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: [jsx(Box, { sx: {
+                                    position: "absolute",
+                                    width: 3,
+                                    height: 20,
+                                    backgroundColor: color,
+                                } }), jsx(Box, { sx: {
+                                    position: "relative",
+                                    width: 10,
+                                    height: 10,
+                                    backgroundColor: color,
+                                    borderRadius: "20px",
+                                    border: `1px solid white`,
+                                } })] }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: { width: 30, height: 5, backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
 };
 
 const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
@@ -2569,21 +2651,37 @@ const BarPlot = (props) => {
     // Ref for plot container
     const containerRef = useRef(null);
     const plotMetaRef = useRef(null);
+    // Pixel offsets from the x-axis line for the bar group shapes.
+    // 45px clears tick marks + labels + axis title; the 15px band sits below all of them.
+    const BAR_GROUP_SHAPE_TOP_PX = 8;
+    const BAR_GROUP_SHAPE_HEIGHT_PX = 20;
+    // px above the top of the plot area — lands between x2 tick labels (~15px) and x2 title (~35px)
+    const X_ANNOTATION_TOP_PX = 22;
+    // Tracks the rendered plot area height so we can convert the shape's fixed pixel
+    // center back into a paper y coordinate for the annotation.
+    const [plotAreaHeight, setPlotAreaHeight] = useState(300);
     const [barGroupTooltip, setBarGroupTooltip] = useState(null);
     const y2AxisPosition = 0.72; // Position of the secondary y-axis (histogram) as a fraction of the plot height
     const capturePlotMeta = (_figure, graphDiv) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             const m = (_a = graphDiv._fullLayout) === null || _a === void 0 ? void 0 : _a.margin;
             const r = (_c = (_b = graphDiv._fullLayout) === null || _b === void 0 ? void 0 : _b.xaxis) === null || _c === void 0 ? void 0 : _c.range;
+            const h = (_d = graphDiv._fullLayout) === null || _d === void 0 ? void 0 : _d.height;
             if (m && r) {
                 plotMetaRef.current = {
                     xRange: r,
                     margin: { l: m.l, r: m.r, t: m.t, b: m.b },
+                    height: (_f = h !== null && h !== void 0 ? h : (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 400,
                 };
+                if (h) {
+                    const newPlotH = h - m.t - m.b;
+                    if (newPlotH > 0)
+                        setPlotAreaHeight(newPlotH);
+                }
             }
         }
-        catch (_d) { }
+        catch (_g) { }
     };
     const handleBarGroupMouseMove = (e) => {
         var _a;
@@ -2593,18 +2691,18 @@ const BarPlot = (props) => {
             setBarGroupTooltip(null);
             return;
         }
-        const { xRange, margin } = plotMetaRef.current;
+        const { xRange, margin, height: plotlyHeight } = plotMetaRef.current;
         const rect = containerRef.current.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
-        const containerHeight = containerRef.current.clientHeight;
         const containerWidth = containerRef.current.clientWidth;
         const plotW = containerWidth - margin.l - margin.r;
-        containerHeight - margin.t - margin.b;
-        const plotBottom = containerHeight - margin.b;
-        // barGroupShapes sit at y0=-0.02, y1=-0.04 in paper coords (just below the x-axis line)
-        const stripTop = plotBottom - 10; // Plot bottom extends further than the x axis. Value here adjusted manually.
-        const stripBottom = plotBottom + 20; // approximate. Doesn't have to be perfect.
+        // Use Plotly's own reported height so plotBottom is consistent with the margin values
+        const plotBottom = plotlyHeight - margin.b - 35; // Subtracting and extra 35px to finally get it in the right spot.
+        // Shapes use yanchor=0 (x-axis line) with negative pixel y values, which maps to
+        // positive screen-y (downward). Strip bounds mirror those pixel offsets exactly.
+        const stripTop = plotBottom;
+        const stripBottom = plotBottom + BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX + 5; // Give a little extra room on the bottom.
         if (mouseY < stripTop || mouseY > stripBottom) {
             setBarGroupTooltip(null);
             return;
@@ -2755,8 +2853,12 @@ const BarPlot = (props) => {
             yref: "paper",
             x0: group.min,
             x1: group.max > xMax ? xMax + barWidth : group.max,
-            y0: -0.02,
-            y1: -0.07,
+            // Anchor at the x-axis line (paper y=0) so the pixel offset is consistent
+            // regardless of plot height — avoids overlap with tick labels on small screens.
+            yanchor: 0,
+            ysizemode: "pixel",
+            y0: -BAR_GROUP_SHAPE_TOP_PX,
+            y1: -28,
             fillcolor: group.color,
             line: {
                 width: 1,
@@ -2769,7 +2871,10 @@ const BarPlot = (props) => {
             xref: "x",
             yref: "paper",
             x: barGroups[0].min + barDataWidth / 2,
-            y: -0.043,
+            // Convert the pixel center of the shape band to a paper y coordinate using
+            // the actual rendered plot area height so it stays inside the shape on any screen size.
+            y: -18 /
+                plotAreaHeight,
             text: barGroupTooltipTitle,
             showarrow: false,
             yanchor: "middle",
@@ -2808,7 +2913,9 @@ const BarPlot = (props) => {
             l: 50,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
             t: 40 + (title ? 50 : 0), // Add extra top margin if there is a title
-            b: 50,
+            b: barGroups.length > 0
+                ? BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX + 15
+                : 50,
             pad: 4,
         }, xaxis: {
             title: {
@@ -2827,12 +2934,15 @@ const BarPlot = (props) => {
             linewidth: 1,
             fixedrange: true, // Disable zooming
             automargin: true, // Adjust margin if tick labels rotate
-            ticklen: 21,
+            ticklen: barGroups.length > 0
+                ? BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX
+                : 8, // tick length in px.
             tickcolor: "white",
         } }, (data2 && {
         xaxis2: {
             title: {
                 text: xAxis2Title,
+                standoff: 22,
             },
             side: "top",
             anchor: "y2", // Anchor to secondary y-axis
@@ -2853,7 +2963,7 @@ const BarPlot = (props) => {
     })), { yaxis: {
             title: {
                 text: yAxisTitle !== null && yAxisTitle !== void 0 ? yAxisTitle : "Count",
-                standoff: 12, // Add space between title and axis
+                standoff: 15, // Add space between title and axis
             },
             domain: data2 ? [0, y2AxisPosition - 0.01] : [0, 1], // Ensure primary y-axis takes full height
             automargin: true, // Required for standoff to work properly
@@ -2900,7 +3010,7 @@ const BarPlot = (props) => {
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.05,
+                y1: 1 + (X_ANNOTATION_TOP_PX - 4) / plotAreaHeight,
                 xref: "x",
                 yref: "paper",
                 line: {
@@ -2913,7 +3023,7 @@ const BarPlot = (props) => {
             ...(barGroupShapeAnnotation ? [barGroupShapeAnnotation] : []),
             ...xAnnotations.map((annotation) => ({
                 x: annotation.x,
-                y: 1.06,
+                y: 1 + X_ANNOTATION_TOP_PX / plotAreaHeight,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",