td-plots 1.12.0 → 1.13.0

package/dist/components/StackedBarPlot.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+interface BarDataPoint {
+    x: number;
+    y: number;
+}
+interface BarDataSeries {
+    name: string;
+    data: BarDataPoint[];
+    color?: string;
+}
+export interface StackedBarPlotProps {
+    data: BarDataSeries[];
+    histogramData: number[];
+    selectedHistogramData?: [number, number];
+    selectedHistogramDataColor?: string;
+    barWidth?: number;
+    barColor?: string;
+    barColor2?: string;
+    xAccessor?: (d: any) => number;
+    yAccessor?: (d: any) => number;
+    width?: number;
+    height?: number;
+    title?: string;
+    title2?: string;
+    xAxisTitle?: string;
+    xAxis2Title?: string;
+    yAxisTitle?: string;
+    yAxis2Title?: string;
+    containerStyleOverrides?: React.CSSProperties;
+    plotId?: string;
+    xAnnotations?: {
+        x: number;
+        text?: string;
+        color?: string;
+    }[];
+    barHoverTemplate?: string;
+    barGroupTooltipTitle?: string;
+    d3FormatValueString?: string;
+}
+declare const StackedBarPlot: (props: StackedBarPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default StackedBarPlot;

package/dist/index.d.ts

@@ -22,5 +22,7 @@ export { default as BarPlot } from "./components/BarPlot";
 export type { BarPlotProps } from "./components/BarPlot";
 export { LegendColorItem, LegendLineItem } from "./components/LegendUtils";
 export type { LegendItemProps, LegendLineItemProps, } from "./components/LegendUtils";
+export { default as StackedBarPlot } from "./components/StackedBarPlot";
+export type { StackedBarPlotProps } from "./components/StackedBarPlot";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -541,7 +541,7 @@ var SettingsIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
 }), 'Settings');
 
-const Plot$7 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$8 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const HistogramPlot = (props) => {
     var _a, _b, _c, _d;
     const { data, title, xAxisTitle, barColor = "rgb(72, 72, 74)", unselectedBarColor = "rgba(203, 195, 195, 0.88)", selectorsColor = "black", containerStyleOverrides, unselectedData = [], handleClickOrSelection = () => { }, onDeselect = () => { }, plotId, selectByBin = false, dateTickFormat, binSizeOverride, statsAnnotations = ["mean"], emptySelectedRange = false, d3FormatValueString = ".1f", showBinSizeControls = "always", onBinSizeCalculated, onBinSizeChange, showBinSizeControlValue = true, isMobile = false, settingsTitleStylingOverrides = {}, } = props;
@@ -1293,7 +1293,7 @@ const HistogramPlot = (props) => {
                                             const newBinSize = newValue;
                                             setBinSize(newBinSize);
                                             onBinSizeChange === null || onBinSizeChange === void 0 ? void 0 : onBinSizeChange(newBinSize);
-                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsx(Plot$7, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
+                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsx(Plot$8, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
                             onDeselect();
                             setSelectedRange(null); // Remove selected box
                         }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
@@ -1304,7 +1304,7 @@ const HistogramPlot = (props) => {
                         } }, `histogram-${plotId || "default"}`)] }) }) }));
 };
 
-const Plot$6 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$7 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const RadialHistogramPlot = (props) => {
     const { data, barColor = "rgb(72, 72, 74)", unselectedBarColor = "rgba(203, 195, 195, 0.88)", selectorsColor = "black", onSelected, onClick, containerStyleOverrides, barWidth = 20, // Default bar width in degrees
      } = props;
@@ -1404,14 +1404,14 @@ const RadialHistogramPlot = (props) => {
         staticPlot: false,
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ "--selection-color": selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$6, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
+    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ "--selection-color": selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$7, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block",
                 } }) }) }));
 };
 
-const Plot$5 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$6 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const StatsDonut = (props) => {
     const { withCenterLabel = false, centerLabel, centerValue, showLegend = true, legendPosition = "right", containerStyle = {}, } = props;
     // Configure legend position based on prop
@@ -1459,7 +1459,7 @@ const StatsDonut = (props) => {
             },
         ]
         : [];
-    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$5, { data: [
+    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$6, { data: [
                     {
                         type: "pie",
                         values: props.values,
@@ -1492,7 +1492,7 @@ const StatsDonut = (props) => {
                 }, useResizeHandler: true }) }) }));
 };
 
-const Plot$4 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$5 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BoxPlot = (props) => {
     const { data, width = 600, height = 400, title = "Box Plot", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "boxplot", extraLayoutConfig = {}, } = props;
     // Ref for plot container
@@ -1545,7 +1545,7 @@ const BoxPlot = (props) => {
                     position: "relative",
                     width: "100%",
                     height: "100%",
-                }, children: [jsx(Plot$4, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
+                }, children: [jsx(Plot$5, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
                         // onHover={handleHover}
                         // onUnhover={handleUnhover}
                         style: {
@@ -2075,7 +2075,7 @@ const SplitBoxPlot = (props) => {
     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$3 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$4 = 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 = "", xAnnotations = [], tooltipLabels = {}, d3FormatValueString = ".1f", } = props;
     // Ref for plot container
@@ -2350,7 +2350,7 @@ const SummaryComparisonPlot = (props) => {
                     position: "relative",
                     width: "100%",
                     height: "100%",
-                }, children: [jsx(Plot$3, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
+                }, children: [jsx(Plot$4, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
                             width: "100%",
                             height: `${height}px`,
                             display: "block",
@@ -2405,7 +2405,7 @@ const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, c
                                 } })] }), 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$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$3 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 // This component plots a line chart in the foreground with a histogram in the backgroun. The histogram
 // is used only for context, while the line is intended to have the focus. To that end, the line plot has hover interactions
 // while the histogram does not.
@@ -2621,17 +2621,17 @@ const LineWithHistogram = (props) => {
                         position: "relative",
                         width: "100%",
                         height: "100%",
-                    }, children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
+                    }, children: jsx(Plot$3, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
                             width: "100%",
                             height: "100%",
                             display: "block",
                             transition: "opacity 0.15s ease-in-out",
-                        }, revision: revision }, `lineplot-${plotId || "default"}`) }), jsx("div", { style: { display: "none" }, children: jsx(Plot$2, { data: histogramPlotlyData, layout: { width: 400, height: 300 }, onInitialized: handlePlotInitialized }, `hidden-histogram-${plotId || "default"}-${hiddenPlotKey}`) })] }) }));
+                        }, revision: revision }, `lineplot-${plotId || "default"}`) }), jsx("div", { style: { display: "none" }, children: jsx(Plot$3, { data: histogramPlotlyData, layout: { width: 400, height: 300 }, onInitialized: handlePlotInitialized }, `hidden-histogram-${plotId || "default"}-${hiddenPlotKey}`) })] }) }));
 };
 
-const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const SPLIT = 0.33;
-const GAP = 0.03;
+const GAP = 0.04;
 // Stacked subplots sharing a single x-axis: histogram on top (yaxis2), line on bottom (yaxis).
 // Because both traces use xaxis "x", hovermode "x unified" spans both panels simultaneously.
 // histogramData.x must be in the same domain as lineData.x for hover to be meaningful.
@@ -2751,7 +2751,7 @@ const LineOnHistogram = (props) => {
         scrollZoom: false,
         staticPlot: false,
     };
-    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$1, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
+    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block",
@@ -2759,7 +2759,7 @@ const LineOnHistogram = (props) => {
                 }, revision: revision }, `lineplot-${plotId || "default"}`) }) }));
 };
 
-const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BarPlot = (props) => {
     var _a, _b;
     const { data, data2 = null, data2Selected = [], barWidth = 2, barColor = "rgb(205, 26, 154)", // Default bar color (red)
@@ -3174,7 +3174,7 @@ const BarPlot = (props) => {
                         position: "relative",
                         width: "100%",
                         height: "100%",
-                    }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
+                    }, children: jsx(Plot$1, { data: [...plotlyData, ...histogramSubplotData], 
                         // Type doesn't contain "mirror" prop but it works.
                         //@ts-ignore
                         layout: layout, config: config, useResizeHandler: true, style: {
@@ -3205,6 +3205,388 @@ const BarPlot = (props) => {
                 }, children: [barGroupTooltipTitle, ": ", jsx("b", { children: barGroupTooltip.label })] }))] }));
 };
 
+const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const StackedBarPlot = (props) => {
+    const { data, histogramData = null, selectedHistogramData = [], barWidth = 2, barColor = "rgb(205, 26, 154)", // Default bar color (red)
+    barColor2 = "rgba(100, 200, 255, 0.7)", // Default histogram bar color (blue)
+    selectedHistogramDataColor = "rgba(255, 0, 0, 0.5)", // Default color for the histogram selection box (red)
+    title = "", title2 = "", // Default title for histogram subplot
+    xAxisTitle = "X Axis", yAxisTitle = "", xAxis2Title = "", yAxis2Title = "", xAccessor = (d) => d.x, yAccessor = (d) => d.y, containerStyleOverrides = {}, plotId = "bar-plot", xAnnotations = [], barHoverTemplate = "", // Default hover template for bars
+    d3FormatValueString = ".1f", } = props;
+    // Ref for plot container
+    const containerRef = useRef(null);
+    const plotMetaRef = useRef(null);
+    // 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 capturePlotMeta = (_figure, graphDiv) => {
+        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 (_g) { }
+    };
+    const y2AxisPosition = 0.72; // Position of the secondary y-axis (histogram) as a fraction of the plot height
+    const plotlyData = data.map((series, index) => {
+        var _a;
+        return ({
+            x: series.data.map((point) => xAccessor(point)),
+            y: series.data.map((point) => yAccessor(point)),
+            customdata: series.data.map((point) => [xAccessor(point) + barWidth]),
+            xaxis: index === 0 ? "x" : `x${index + 2}`, // x, x3, x4, ... (x2 reserved for histogram)
+            yaxis: index === 0 ? "y" : `y${index + 1}`, // Assign y-axis for each series
+            type: "bar",
+            marker: {
+                color: "white", // Use the provided bar color
+                line: {
+                    color: (_a = series.color) !== null && _a !== void 0 ? _a : barColor,
+                    width: 2,
+                },
+            },
+            width: barWidth, // width centered on the x value.
+            hovertemplate: barHoverTemplate || "%{y}", // Use provided hover template or default to showing y value
+        });
+    });
+    const histogramSubplotData = histogramData
+        ? [
+            {
+                x: histogramData,
+                type: "histogram",
+                marker: {
+                    color: barColor2,
+                    line: {
+                        color: "white",
+                        width: 0.5,
+                    },
+                },
+                xaxis: "x2", // Use secondary x-axis for histogram
+                yaxis: `y${data.length + 1}`, // Use secondary y-axis for histogram
+                hovertemplate: "[%{x})<br>Count: %{y}<extra></extra>", // Custom hover text
+            },
+        ]
+        : [];
+    const selectedHistogramShape = selectedHistogramData.length === 2 &&
+        selectedHistogramData[0] < selectedHistogramData[1]
+        ? [
+            {
+                type: "rect",
+                x0: selectedHistogramData[0],
+                x1: selectedHistogramData[1],
+                y0: y2AxisPosition, // Start at the top of the histogram subplot
+                y1: 1,
+                yref: "paper",
+                line: {
+                    width: 2,
+                    color: selectedHistogramDataColor,
+                    dash: "dot",
+                },
+                layer: "above", // Ensure the selection box is above the bars
+            },
+        ]
+        : [];
+    // Bar subplots fill the full height when there's no histogram; otherwise they share the bottom portion.
+    const barAreaTop = histogramData ? y2AxisPosition : 1;
+    // Title background shape (when histogramData exists)
+    const titleBackgroundShapes = data.flatMap((series, index) => {
+        var _a, _b;
+        return [
+            {
+                type: "rect",
+                xref: "paper",
+                yref: "paper",
+                x0: 0,
+                y0: (barAreaTop / data.length) * (index + 1) - 0.08, // Position behind the title of each series
+                x1: series.name.length * 0.014, // Approximate width based on title2 length
+                y1: (barAreaTop / data.length) * (index + 1) - 0.02,
+                fillcolor: "rgba(255, 255, 255, 0.5)",
+                line: {
+                    color: "rgba(255, 255, 255, 0.5)",
+                    width: 0,
+                },
+                layer: "above",
+            },
+            {
+                type: "rect",
+                xref: "paper",
+                yref: "paper",
+                x0: 0,
+                y0: (barAreaTop / data.length) * (index + 1) - 0.08, // Position behind the title of each series
+                x1: 0.01,
+                y1: (barAreaTop / data.length) * (index + 1) - 0.02,
+                fillcolor: (_a = series.color) !== null && _a !== void 0 ? _a : "rgba(255, 255, 255, 0.5)",
+                line: {
+                    color: (_b = series.color) !== null && _b !== void 0 ? _b : "rgba(255, 255, 255, 0.5)",
+                    width: 0,
+                },
+                layer: "above",
+            },
+        ];
+    });
+    // Add title background shape for histogram
+    titleBackgroundShapes.push({
+        type: "rect",
+        xref: "paper",
+        yref: "paper",
+        x0: 0,
+        y0: 0.96, // Position behind the primary title
+        x1: 0.02 + title.length * 0.01, // Approximate width based on title length 0.3/
+        y1: 1,
+        fillcolor: "rgba(255, 255, 255, 0.5)",
+        line: {
+            color: "rgba(200, 200, 200, 0.5)",
+            width: 0,
+        },
+        layer: "above",
+    });
+    // Title annotation
+    const titleAnnotations = data.map((series, index) => {
+        return {
+            xref: "paper",
+            yref: "paper",
+            x: 0.01,
+            xshift: 2,
+            y: (barAreaTop / data.length) * (index + 1) - 0.05,
+            xanchor: "left",
+            yanchor: "middle",
+            text: series.name,
+            showarrow: false,
+            font: {
+                size: 16,
+                color: "#333",
+                weight: 500,
+            },
+        };
+    });
+    titleAnnotations.push({
+        xref: "paper",
+        yref: "paper",
+        x: 0.01,
+        y: 0.96,
+        xshift: 2,
+        xanchor: "left",
+        yanchor: "middle",
+        text: title2,
+        showarrow: false,
+        font: {
+            size: 16,
+            color: "#333",
+            weight: 500,
+        },
+    });
+    const plotlyYaxes = data.map((_series, index) => ({
+        // title: {
+        //   text: yAxisTitle ?? "Count",
+        //   standoff: 15,
+        // },
+        domain: [
+            (barAreaTop / data.length) * index,
+            (barAreaTop / data.length) * (index + 1) - 0.02,
+        ],
+        hoverformat: d3FormatValueString,
+        nticks: 3,
+        automargin: true,
+        showgrid: true,
+        zeroline: false,
+        showline: true,
+        mirror: "ticks",
+        gridcolor: "#efefef",
+        gridwidth: 0.2,
+        zerolinecolor: "#969696",
+        zerolinewidth: 1,
+        linecolor: "#bababa",
+        linewidth: 1,
+        fixedrange: true,
+        ticksuffix: " ",
+    }));
+    if (histogramData) {
+        plotlyYaxes.push({
+            title: {
+                text: yAxis2Title,
+                standoff: 12,
+            },
+            domain: [y2AxisPosition, 1],
+            automargin: true,
+            showgrid: true,
+            zeroline: false,
+            showline: true,
+            mirror: "ticks",
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true,
+            ticksuffix: " ",
+        });
+    }
+    const layout = Object.assign(Object.assign(Object.assign(Object.assign({ showlegend: false, autosize: true, width: undefined, height: undefined, margin: {
+            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: 70,
+            pad: 4,
+        }, xaxis: {
+            title: {
+                text: xAxisTitle,
+            },
+            anchor: "y", // Anchor to primary y-axis
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
+            showgrid: true,
+            zeroline: false,
+            showline: true,
+            mirror: "ticks",
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            automargin: true, // Adjust margin if tick labels rotate
+            ticklen: 8, // tick length in px.
+            tickcolor: "white",
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
+            rangemode: "tozero", // Ensure x-axis starts at zero
+        } }, (histogramData && {
+        xaxis2: {
+            title: {
+                text: xAxis2Title,
+                standoff: 22,
+            },
+            side: "top",
+            anchor: `y${data.length + 1}`, // Anchor to the secondary y-axis (histogram)
+            showgrid: true,
+            zeroline: false,
+            showline: true,
+            mirror: "ticks",
+            showticklabels: true, // Show x-axis tick labels for histogram
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true,
+            automargin: true,
+            matches: "x", // Match the range of xaxis to keep them synchronized
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
+            rangemode: "tozero",
+        },
+    })), plotlyYaxes.reduce((acc, yaxis, index) => {
+        acc[`yaxis${index === 0 ? "" : index + 1}`] = yaxis;
+        return acc;
+    }, {})), data.slice(1).reduce((acc, _series, i) => {
+        acc[`xaxis${i + 3}`] = {
+            anchor: `y${i + 2}`,
+            matches: "x",
+            showticklabels: false,
+            showgrid: true,
+            zeroline: false,
+            showline: true,
+            mirror: "ticks",
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true,
+            automargin: true,
+            ticklen: 8,
+            tickcolor: "white",
+            tickformat: d3FormatValueString,
+            rangemode: "tozero",
+        };
+        return acc;
+    }, {})), { bargap: 0.03, shapes: [
+            ...titleBackgroundShapes,
+            ...selectedHistogramShape,
+            ...xAnnotations.map((annotation) => ({
+                type: "line",
+                x0: annotation.x,
+                x1: annotation.x,
+                y0: 0,
+                y1: 1 + (X_ANNOTATION_TOP_PX - 4) / plotAreaHeight,
+                xref: "x",
+                yref: "paper",
+                line: {
+                    color: annotation.color || "rgba(255, 0, 0, 0.7)",
+                    width: 3,
+                },
+            })),
+        ], annotations: [
+            ...titleAnnotations,
+            ...(yAxisTitle
+                ? [
+                    {
+                        xref: "paper",
+                        yref: "paper",
+                        x: 0,
+                        xshift: -45,
+                        y: barAreaTop / 2,
+                        xanchor: "center",
+                        yanchor: "middle",
+                        text: yAxisTitle,
+                        showarrow: false,
+                        textangle: -90,
+                        font: { size: 13, color: "#444" },
+                    },
+                ]
+                : []),
+            ...xAnnotations.map((annotation) => ({
+                x: annotation.x,
+                y: 1 + X_ANNOTATION_TOP_PX / plotAreaHeight,
+                xref: "x",
+                yref: "paper",
+                text: annotation.text || "",
+                showarrow: false,
+                yanchor: "bottom",
+                font: {
+                    color: annotation.color || "rgba(255, 0, 0, 0.7)",
+                    size: 12,
+                },
+            })),
+        ] });
+    const config = {
+        responsive: true, // Make the plot responsive
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
+    return (jsx("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
+                    // Type doesn't contain "mirror" prop but it works.
+                    //@ts-ignore
+                    layout: layout, config: config, useResizeHandler: true, style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "block",
+                        transition: "opacity 0.15s ease-in-out",
+                    }, onInitialized: capturePlotMeta, onUpdate: capturePlotMeta }, `bar-${plotId || "default"}`) }) }) }));
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -100686,5 +101068,5 @@ var reactPlotlyWrapper$1 = /*#__PURE__*/Object.freeze({
   default: reactPlotlyWrapper
 });
 
-export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineOnHistogram, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, SplitBoxPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
+export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineOnHistogram, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, SplitBoxPlot, StackedBarPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map