@fluentui/react-charts 9.3.21 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -1,1077 +0,0 @@
-'use client';
-import * as React from 'react';
-import { max as d3Max, min as d3Min } from 'd3-array';
-import { useVerticalStackedBarChartStyles } from './useVerticalStackedBarChartStyles.styles';
-import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
-import { useId } from '@fluentui/react-utilities';
-import { tokens } from '@fluentui/react-theme';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { CartesianChart, ChartPopover, Legends } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
-import { formatDateToLocaleString, isInvalidValue, isSafeUrl } from '@fluentui/chart-utilities';
-import { useImageExport } from '../../utilities/hooks';
-const barGapMultiplier = 0.2;
-const barGapMin = 1;
-const MIN_DOMAIN_MARGIN = 8;
-export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, forwardedRef)=>{
-    var _props_legendProps;
-    const props = {
-        xAxisCategoryOrder: 'default',
-        yAxisCategoryOrder: 'default',
-        maxBarWidth: 24,
-        ..._props
-    };
-    const _isRtl = useRtl();
-    const _createLegendsForLine = (data)=>_getLineLegends(data);
-    const _emptyChartId = useId('_VSBC_empty');
-    const _arrowNavigationAttributes = useArrowNavigationGroup({
-        axis: 'vertical',
-        circular: true
-    });
-    let _points = [];
-    let _dataset;
-    let _xAxisLabels = [];
-    let _bars;
-    let _xAxisType = props.data && props.data.length > 0 ? getTypeOfAxis(props.data[0].xAxisPoint, true) : XAxisTypes.StringAxis;
-    let _barWidth = 0;
-    let _colors;
-    let _margins;
-    let _lineObject;
-    let _yMax;
-    let _yMin;
-    let _calloutAnchorPoint;
-    let _domainMargin = MIN_DOMAIN_MARGIN;
-    let _xAxisInnerPadding = 0;
-    let _xAxisOuterPadding = 0;
-    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
-    const Y_ORIGIN = 0;
-    let _yAxisType;
-    let _yAxisLabels = [];
-    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
-    const [activeLegend, setActiveLegend] = React.useState(undefined);
-    const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
-    const [color, setColor] = React.useState('');
-    const [hoverXValue, setHoverXValue] = React.useState('');
-    const [YValueHover, setYValueHover] = React.useState([]);
-    const [xCalloutValue, setXCalloutValue] = React.useState('');
-    const [yCalloutValue, setYCalloutValue] = React.useState('');
-    const [activeXAxisDataPoint, setActiveXAxisDataPoint] = React.useState('');
-    const [calloutLegend, setCalloutLegend] = React.useState('');
-    const [stackCalloutProps, setStackCalloutProps] = React.useState();
-    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
-    const [callOutAccessibilityData, setCallOutAccessibilityData] = React.useState();
-    const [clickPosition, setClickPosition] = React.useState({
-        x: 0,
-        y: 0
-    });
-    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
-    const prevPropsRef = React.useRef(null);
-    React.useEffect(()=>{
-        if (prevPropsRef.current) {
-            var _prevProps_legendProps, _props_legendProps;
-            const prevProps = prevPropsRef.current;
-            if (!areArraysEqual((_prevProps_legendProps = prevProps.legendProps) === null || _prevProps_legendProps === void 0 ? void 0 : _prevProps_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
-                var _props_legendProps1;
-                setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
-            }
-            if (prevProps.height !== props.height || prevProps.width !== props.width || prevProps.data !== props.data) {
-                _adjustProps();
-                _dataset = _createDataSetLayer();
-            }
-        }
-        prevPropsRef.current = props;
-    }, [
-        props
-    ]);
-    function _getLegendData(data, lineLegends) {
-        if (props.hideLegend) {
-            return /*#__PURE__*/ React.createElement(React.Fragment, null);
-        }
-        const defaultPalette = [
-            getColorFromToken(DataVizPalette.color6),
-            getColorFromToken(DataVizPalette.color1),
-            getColorFromToken(DataVizPalette.color5),
-            getColorFromToken(DataVizPalette.color7),
-            getColorFromToken(DataVizPalette.color10)
-        ];
-        const actions = [];
-        const { allowHoverOnLegend = true } = props;
-        data.forEach((singleChartData)=>{
-            singleChartData.chartData.forEach((point)=>{
-                const color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
-                const checkSimilarLegends = actions.filter((leg)=>leg.title === point.legend && leg.color === color);
-                if (checkSimilarLegends.length > 0) {
-                    return;
-                }
-                const legend = {
-                    title: point.legend,
-                    color,
-                    hoverAction: allowHoverOnLegend ? ()=>{
-                        _handleChartMouseLeave();
-                        _onLegendHover(point.legend);
-                    } : undefined,
-                    onMouseOutAction: allowHoverOnLegend ? ()=>_onLegendLeave() : undefined
-                };
-                actions.push(legend);
-            });
-        });
-        const legendsOfLine = [];
-        if (lineLegends && lineLegends.length > 0) {
-            lineLegends.forEach((point)=>{
-                const legend = {
-                    title: point.title,
-                    color: point.color,
-                    isLineLegendInBarChart: true,
-                    hoverAction: allowHoverOnLegend ? ()=>{
-                        _handleChartMouseLeave();
-                        _onLegendHover(point.title);
-                    } : undefined,
-                    onMouseOutAction: allowHoverOnLegend ? ()=>_onLegendLeave() : undefined
-                };
-                legendsOfLine.push(legend);
-            });
-        }
-        const totalLegends = actions.concat(legendsOfLine);
-        return /*#__PURE__*/ React.createElement(Legends, {
-            legends: totalLegends,
-            enabledWrapLines: props.enabledLegendsWrapLines,
-            overflowText: props.legendsOverflowText,
-            ...props.legendProps,
-            onChange: _onLegendSelectionChange,
-            legendRef: _legendsRef
-        });
-    }
-    function _getHighlightedLegend() {
-        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
-            activeLegend
-        ] : [];
-    }
-    function _lineHoverFocus(lineData, event) {
-        let clientX = 0;
-        let clientY = 0;
-        if ('clientX' in event) {
-            clientX = event.clientX;
-            clientY = event.clientY;
-        } else {
-            const boundingRect = event.target.getBoundingClientRect();
-            clientX = boundingRect.left + boundingRect.width / 2;
-            clientY = boundingRect.top + boundingRect.height / 2;
-        }
-        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
-            _updatePosition(clientX, clientY);
-            setPopoverOpen(true);
-            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
-            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
-            setCalloutLegend(lineData.legend);
-            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
-            setColor(lineData.color);
-        }
-    }
-    function _onStackHoverFocus(stack, event) {
-        var _stack_lineData;
-        let clientX = 0;
-        let clientY = 0;
-        if ('clientX' in event) {
-            clientX = event.clientX;
-            clientY = event.clientY;
-        } else {
-            // Handle React FocusEvent or SVGGElement
-            const element = 'target' in event ? event.target : event;
-            const boundingRect = element.getBoundingClientRect();
-            clientX = boundingRect.left + boundingRect.width / 2;
-            clientY = boundingRect.top + boundingRect.height / 2;
-        }
-        if (!_noLegendHighlighted()) {
-            var _stack_lineData1;
-            stack = {
-                ...stack,
-                chartData: stack.chartData.filter((dataPoint)=>_isLegendHighlighted(dataPoint.legend)),
-                lineData: (_stack_lineData1 = stack.lineData) === null || _stack_lineData1 === void 0 ? void 0 : _stack_lineData1.filter((dataPoint)=>_isLegendHighlighted(dataPoint.legend))
-            };
-        }
-        const lineData = stack.lineData;
-        const isLinesPresent = lineData !== undefined && lineData.length > 0;
-        if (isLinesPresent) {
-            lineData.forEach((item)=>{
-                item.data = item.data || item.y;
-                item.shouldDrawBorderBottom = true;
-            });
-        }
-        _updatePosition(clientX, clientY);
-        var _stack_lineData_length;
-        setPopoverOpen(stack.chartData.length > 0 || ((_stack_lineData_length = (_stack_lineData = stack.lineData) === null || _stack_lineData === void 0 ? void 0 : _stack_lineData.length) !== null && _stack_lineData_length !== void 0 ? _stack_lineData_length : 0) > 0);
-        setYValueHover(isLinesPresent ? [
-            ...lineData.sort((a, b)=>a.data < b.data ? 1 : -1),
-            ...stack.chartData.slice().reverse()
-        ] : stack.chartData.slice().reverse());
-        setHoverXValue(stack.xAxisPoint instanceof Date ? formatDateToLocaleString(stack.xAxisPoint, props.culture, props.useUTC) : stack.xAxisPoint);
-        setStackCalloutProps(stack);
-        setActiveXAxisDataPoint(stack.xAxisPoint);
-        setCallOutAccessibilityData(stack.stackCallOutAccessibilityData);
-    }
-    function _handleChartMouseLeave() {
-        _calloutAnchorPoint = null;
-        setPopoverOpen(false);
-        setActiveXAxisDataPoint('');
-    }
-    const _onClick = (data, mouseEvent)=>{
-        var _props_onBarClick;
-        (_props_onBarClick = props.onBarClick) === null || _props_onBarClick === void 0 ? void 0 : _props_onBarClick.call(props, mouseEvent, data);
-        if (props.href && isSafeUrl(props.href)) {
-            window.location.href = props.href;
-        }
-    };
-    function _adjustProps() {
-        var _points_;
-        _points = props.data || [];
-        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
-        const defaultColors = [
-            getColorFromToken(DataVizPalette.color6),
-            getColorFromToken(DataVizPalette.color1),
-            getColorFromToken(DataVizPalette.color5),
-            getColorFromToken(DataVizPalette.color7),
-            getColorFromToken(DataVizPalette.color10)
-        ];
-        _colors = defaultColors;
-        const firstXValue = (_points_ = _points[0]) === null || _points_ === void 0 ? void 0 : _points_.xAxisPoint;
-        _xAxisType = isInvalidValue(firstXValue) ? XAxisTypes.StringAxis : getTypeOfAxis(firstXValue, true);
-        _lineObject = _getFormattedLineData(props.data);
-        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
-        _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
-        _initYAxisParams();
-    }
-    function _createDataSetLayer() {
-        const dataset = _points.map((singlePointData)=>{
-            if (_yAxisType === YAxisType.StringAxis) {
-                return {
-                    x: singlePointData.xAxisPoint,
-                    y: 0
-                };
-            }
-            let total = 0;
-            singlePointData.chartData.forEach((point)=>{
-                total = total + point.data;
-            });
-            return {
-                x: singlePointData.xAxisPoint,
-                y: total
-            };
-        });
-        _xAxisLabels = _getOrderedXAxisLabels();
-        return dataset;
-    }
-    function _onLegendHover(legendTitle) {
-        setActiveLegend(legendTitle);
-    }
-    function _onLegendLeave() {
-        setActiveLegend(undefined);
-    }
-    function _onLegendSelectionChange(_selectedLegends, event, currentLegend) {
-        var _props_legendProps, _props_legendProps1;
-        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
-            setSelectedLegends(_selectedLegends);
-        } else {
-            setSelectedLegends(_selectedLegends.slice(-1));
-        }
-        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
-            props.legendProps.onChange(_selectedLegends, event, currentLegend);
-        }
-    }
-    function _getMargins(margins) {
-        _margins = margins;
-    }
-    function _getGraphData(xScale, yScale, containerHeight, containerWidth, xElement) {
-        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
-        return _bars = _createBar(xBarScale, _yAxisType === YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement);
-    }
-    function _getAxisData(yAxisData) {
-        if (yAxisData && yAxisData.yAxisDomainValues.length) {
-            const { yAxisDomainValues: domainValue } = yAxisData;
-            _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || Y_ORIGIN);
-            _yMin = Math.min(domainValue[0], props.yMinValue || Y_ORIGIN);
-        }
-    }
-    /**
-   * This function checks if the given legend is highlighted or not.
-   * A legend can be highlighted in 2 ways:
-   * 1. selection: if the user clicks on it
-   * 2. hovering: if there is no selected legend and the user hovers over it
-   */ function _isLegendHighlighted(legendTitle) {
-        return _getHighlightedLegend().includes(legendTitle);
-    }
-    /**
-   * This function checks if none of the legends is selected or hovered.
-   */ function _noLegendHighlighted() {
-        return _getHighlightedLegend().length === 0;
-    }
-    function _getAriaLabel(singleChartData, point, isLinePoint) {
-        var _point_callOutAccessibilityData;
-        if (!point) {
-            var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
-            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDateToLocaleString(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
-            const pointValues = singleChartData.chartData.map((pt)=>{
-                const legend = pt.legend;
-                const yValue = pt.yAxisCalloutData || pt.data;
-                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
-            }).filter((str)=>str !== '').join(' ');
-            const lineValues = (_singleChartData_lineData = singleChartData.lineData) === null || _singleChartData_lineData === void 0 ? void 0 : _singleChartData_lineData.map((ln)=>{
-                const legend = ln.legend;
-                const yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
-            }).filter((str)=>str !== '').join(' ');
-            return ((_singleChartData_stackCallOutAccessibilityData = singleChartData.stackCallOutAccessibilityData) === null || _singleChartData_stackCallOutAccessibilityData === void 0 ? void 0 : _singleChartData_stackCallOutAccessibilityData.ariaLabel) || `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '');
-        }
-        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDateToLocaleString(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
-        const legend = point.legend;
-        const yValue = point.yAxisCalloutData || (isLinePoint ? point.data || point.y : point.data);
-        return !isLinePoint && ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
-    }
-    function _getCustomizedCallout() {
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
-    }
-    function _toFocusWholeStack() {
-        const { isCalloutForStack = false } = props;
-        return isCalloutForStack;
-    }
-    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
-        let domainNRangeValue;
-        if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth);
-        } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth);
-        } else {
-            domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
-        }
-        return domainNRangeValue;
-    }
-    function _getFormattedLineData(data) {
-        const linesData = [];
-        const formattedLineData = {};
-        data.forEach((item, index)=>{
-            if (item.lineData) {
-                item.lineData.forEach((line)=>{
-                    linesData.push({
-                        ...line,
-                        index,
-                        xItem: item
-                    });
-                });
-            }
-        });
-        linesData.forEach((item)=>{
-            if (formattedLineData[item.legend]) {
-                formattedLineData[item.legend].push(item);
-            } else {
-                formattedLineData[item.legend] = [
-                    item
-                ];
-            }
-        });
-        return formattedLineData;
-    }
-    function _getLineLegends(data) {
-        const lineObject = _lineObject;
-        const lineLegends = [];
-        Object.keys(lineObject).forEach((item)=>{
-            lineLegends.push({
-                title: item,
-                color: lineObject[item][0].color
-            });
-        });
-        return lineLegends;
-    }
-    function _createLines(xScale, yScalePrimary, containerHeight, containerWidth, yScaleSecondary) {
-        var _props_lineOptions;
-        const lineObject = _getFormattedLineData(props.data);
-        const lines = [];
-        const borderForLines = [];
-        const dots = [];
-        //const { theme } = props;
-        const lineBorderWidth = ((_props_lineOptions = props.lineOptions) === null || _props_lineOptions === void 0 ? void 0 : _props_lineOptions.lineBorderWidth) ? Number.parseFloat(props.lineOptions.lineBorderWidth.toString()) : 0;
-        const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2;
-        Object.keys(lineObject).forEach((item, index)=>{
-            const shouldHighlight = _isLegendHighlighted(item) || _noLegendHighlighted();
-            for(let i = 1; i < lineObject[item].length; i++){
-                var _lineObject_item__lineOptions, _lineObject_item__lineOptions1, _lineObject_item__lineOptions2;
-                const x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint);
-                const useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && yScaleSecondary;
-                const y1 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i - 1].y) : yScalePrimary(lineObject[item][i - 1].y);
-                const x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
-                const y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
-                const yScaleBandwidthTranslate = !useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
-                if (lineBorderWidth > 0) {
-                    borderForLines.push(/*#__PURE__*/ React.createElement("line", {
-                        key: `${index}-${i}-BorderLine`,
-                        x1: x1,
-                        y1: y1,
-                        x2: x2,
-                        y2: y2,
-                        opacity: shouldHighlight ? 1 : 0.1,
-                        strokeWidth: 3 + lineBorderWidth * 2,
-                        fill: "transparent",
-                        strokeLinecap: "round",
-                        stroke: tokens.colorNeutralBackground1,
-                        transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`
-                    }));
-                }
-                var _lineObject_item__lineOptions_strokeWidth, _lineObject_item__lineOptions_strokeLinecap;
-                lines.push(/*#__PURE__*/ React.createElement("line", {
-                    key: `${index}-${i}-line`,
-                    x1: x1,
-                    y1: y1,
-                    x2: x2,
-                    y2: y2,
-                    opacity: shouldHighlight ? 1 : 0.1,
-                    strokeWidth: (_lineObject_item__lineOptions_strokeWidth = (_lineObject_item__lineOptions = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions === void 0 ? void 0 : _lineObject_item__lineOptions.strokeWidth) !== null && _lineObject_item__lineOptions_strokeWidth !== void 0 ? _lineObject_item__lineOptions_strokeWidth : 3,
-                    strokeLinecap: (_lineObject_item__lineOptions_strokeLinecap = (_lineObject_item__lineOptions1 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions1 === void 0 ? void 0 : _lineObject_item__lineOptions1.strokeLinecap) !== null && _lineObject_item__lineOptions_strokeLinecap !== void 0 ? _lineObject_item__lineOptions_strokeLinecap : 'round',
-                    strokeDasharray: (_lineObject_item__lineOptions2 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions2 === void 0 ? void 0 : _lineObject_item__lineOptions2.strokeDasharray,
-                    stroke: lineObject[item][i].color,
-                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
-                    onMouseOver: (event)=>_lineHover(lineObject[item][i - 1], event),
-                    onMouseLeave: _handleMouseOut
-                }));
-            }
-        });
-        Object.keys(lineObject).forEach((item, index)=>{
-            lineObject[item].forEach((circlePoint, subIndex)=>{
-                const circleRef = {
-                    refElement: null
-                };
-                const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
-                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
-                dots.push(/*#__PURE__*/ React.createElement("circle", {
-                    key: `${index}-${subIndex}-dot`,
-                    cx: xScale(circlePoint.xItem.xAxisPoint),
-                    cy: circlePoint.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(circlePoint.y) : yScalePrimary(circlePoint.y),
-                    onMouseOver: (event)=>_lineHover(circlePoint, event),
-                    onMouseLeave: _handleMouseOut,
-                    r: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
-                    stroke: circlePoint.color,
-                    fill: tokens.colorNeutralBackground1,
-                    strokeWidth: 3,
-                    // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
-                    // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
-                    opacity: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity,
-                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
-                    ref: (e)=>{
-                        circleRef.refElement = e;
-                    },
-                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
-                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
-                    onBlur: _handleMouseOut,
-                    role: "img",
-                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
-                }));
-            });
-        });
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, borderForLines, lines, dots);
-    }
-    function _getCircleOpacityAndRadius(xAxisPoint, legend) {
-        if (!_noLegendHighlighted()) {
-            if (xAxisPoint === activeXAxisDataPoint && _isLegendHighlighted(legend)) {
-                return {
-                    opacity: 1,
-                    radius: 8
-                };
-            } else if (_isLegendHighlighted(legend)) {
-                return {
-                    opacity: 1,
-                    radius: 0.3
-                };
-            } else {
-                return {
-                    opacity: 0,
-                    radius: 0
-                };
-            }
-        } else {
-            return {
-                opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
-                radius: 8
-            };
-        }
-    }
-    function _renderCallout(props) {
-        return props ? /*#__PURE__*/ React.createElement(ChartPopover, {
-            culture: props.culture,
-            XValue: props.xAxisCalloutData,
-            xCalloutValue: xCalloutValue,
-            yCalloutValue: yCalloutValue,
-            clickPosition: clickPosition,
-            isPopoverOpen: isPopoverOpen,
-            legend: props.legend,
-            YValue: props.yAxisCalloutData,
-            color: props.color
-        }) : null;
-    }
-    function _onRectHover(xAxisPoint, point, color, mouseEvent) {
-        mouseEvent.persist();
-        _onRectFocusHover(xAxisPoint, point, color, mouseEvent);
-    }
-    function _onRectFocusHover(xAxisPoint, point, color, mouseEvent) {
-        let clientX = 0;
-        let clientY = 0;
-        if ('clientX' in mouseEvent) {
-            clientX = mouseEvent.clientX;
-            clientY = mouseEvent.clientY;
-        } else {
-            // Handle case where mouseEvent is an SVGGElement
-            const boundingRect = mouseEvent.getBoundingClientRect();
-            clientX = boundingRect.left + boundingRect.width / 2;
-            clientY = boundingRect.top + boundingRect.height / 2;
-        }
-        if ((_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.chartDataPoint) !== point || (_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.xAxisDataPoint) !== xAxisPoint) {
-            _calloutAnchorPoint = {
-                chartDataPoint: point,
-                xAxisDataPoint: xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString()
-            };
-            const xCalloutValue = point.xAxisCalloutData || (xAxisPoint instanceof Date ? formatDateToLocaleString(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString());
-            _updatePosition(clientX, clientY);
-            setPopoverOpen(_noLegendHighlighted() || _isLegendHighlighted(point.legend));
-            setCalloutLegend(point.legend);
-            setDataForHoverCard(point.data);
-            setColor(color);
-            setXCalloutValue(xCalloutValue);
-            setYCalloutValue(point.yAxisCalloutData);
-            setDataPointCalloutProps(point);
-            setCallOutAccessibilityData(point.callOutAccessibilityData);
-        }
-    }
-    function _lineHover(lineData, mouseEvent) {
-        mouseEvent.persist();
-        _lineHoverFocus(lineData, mouseEvent);
-    }
-    function _lineFocus(event, lineData, ref) {
-        if (ref.refElement) {
-            _lineHoverFocus(lineData, event);
-        }
-    }
-    function _onStackHover(stack, mouseEvent) {
-        mouseEvent.persist();
-        _onStackHoverFocus(stack, mouseEvent);
-    }
-    function _onRectFocus(point, xAxisPoint, color, ref) {
-        if (ref.refElement) {
-            _onRectFocusHover(xAxisPoint, point, color, ref.refElement);
-        }
-    }
-    function _onStackFocus(stack, groupRef) {
-        if (groupRef.refElement) {
-            _onStackHoverFocus(stack, groupRef.refElement);
-        }
-    }
-    function _handleMouseOut() {
-    /**/ }
-    function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
-        const { barGapMax = 0 } = props;
-        let totalData = 0;
-        let totalHeight;
-        let sumOfPercent = 0;
-        let scalingRatio;
-        if (_yAxisType === YAxisType.StringAxis) {
-            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : bars.reduce((total, bar)=>total + yBarScale(bar.data), 0);
-        } else {
-            // When displaying gaps between the bars, the height of each bar is
-            // adjusted so that the total of all bars is not changed by the gaps
-            totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
-            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
-            bars.forEach((point)=>{
-                let value = Math.abs(point.data) / totalData * 100;
-                if (value < 1 && value !== 0) {
-                    value = 1;
-                }
-                sumOfPercent += value;
-            });
-            scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
-        }
-        const gaps = barGapMax && bars.length - 1;
-        const gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, totalHeight * barGapMultiplier / gaps));
-        const heightValueScale = _yAxisType === YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
-        return {
-            gapHeight,
-            heightValueScale,
-            absStackTotal: totalData
-        };
-    }
-    function _getScales(containerHeight, containerWidth) {
-        const yDomain = [
-            Math.min(Y_ORIGIN, _yMin),
-            Math.max(Y_ORIGIN, _yMax)
-        ];
-        const yBarScale = d3ScaleLinear().domain(yDomain).range([
-            0,
-            containerHeight - _margins.bottom - _margins.top
-        ]);
-        if (_xAxisType === XAxisTypes.NumericAxis) {
-            const xMax = d3Max(_dataset, (point)=>point.x);
-            const xMin = d3Min(_dataset, (point)=>point.x);
-            const xBarScale = d3ScaleLinear().domain(_isRtl ? [
-                xMax,
-                xMin
-            ] : [
-                xMin,
-                xMax
-            ]).range([
-                _margins.left + _domainMargin,
-                containerWidth - _margins.right - _domainMargin
-            ]);
-            if (!isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding)) {
-                xBarScale.nice();
-            }
-            return {
-                xBarScale,
-                yBarScale
-            };
-        }
-        if (_xAxisType === XAxisTypes.DateAxis) {
-            const sDate = d3Min(_dataset, (point)=>{
-                return point.x;
-            });
-            const lDate = d3Max(_dataset, (point)=>{
-                return point.x;
-            });
-            const xBarScale = props.useUTC ? d3ScaleUtc() : d3ScaleTime();
-            xBarScale.domain(_isRtl ? [
-                lDate,
-                sDate
-            ] : [
-                sDate,
-                lDate
-            ]).range([
-                _margins.left + _domainMargin,
-                containerWidth - _margins.right - _domainMargin
-            ]);
-            return {
-                xBarScale,
-                yBarScale
-            };
-        }
-        const xBarScale = d3ScaleBand().domain(_xAxisLabels).range(_isRtl ? [
-            containerWidth - _margins.right - _domainMargin,
-            _margins.left + _domainMargin
-        ] : [
-            _margins.left + _domainMargin,
-            containerWidth - _margins.right - _domainMargin
-        ]).paddingInner(_xAxisInnerPadding).paddingOuter(_xAxisOuterPadding);
-        return {
-            xBarScale,
-            yBarScale
-        };
-    }
-    const _isChartEmpty = ()=>{
-        return !(props.data && props.data.length > 0 && props.data.some((item)=>item.chartData.length > 0 || item.lineData && item.lineData.length > 0));
-    };
-    function _updatePosition(newX, newY) {
-        const threshold = 1; // Set a threshold for movement
-        const { x, y } = clickPosition;
-        // Calculate the distance moved
-        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
-        // Update the position only if the distance moved is greater than the threshold
-        if (distance > threshold) {
-            setClickPosition({
-                x: newX,
-                y: newY
-            });
-            setPopoverOpen(true);
-        }
-    }
-    function _getDomainMargins(containerWidth) {
-        _domainMargin = MIN_DOMAIN_MARGIN;
-        const totalWidth = calcTotalWidth(containerWidth, _margins, MIN_DOMAIN_MARGIN);
-        if (_xAxisType === XAxisTypes.StringAxis) {
-            if (isScalePaddingDefined(props.xAxisOuterPadding, props.xAxisPadding)) {
-                // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
-                // to adjust the space before the first bar and after the last bar.
-                _domainMargin = 0;
-            } else if (props.barWidth !== 'auto') {
-                // Update the bar width so that when CartesianChart rerenders,
-                // the following calculations don't use the previous bar width.
-                _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
-                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = calcRequiredWidth(_barWidth, _xAxisLabels.length, _xAxisInnerPadding);
-                if (totalWidth >= reqWidth) {
-                    // Center align the chart by setting equal left and right margins for domain
-                    _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
-                }
-            } else if (props.mode === 'plotly' && _xAxisLabels.length > 1) {
-                // Calculate the remaining width after rendering bars at their maximum allowable width
-                const bandwidth = calcBandwidth(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
-                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
-                let reqWidth = calcRequiredWidth(barWidth, _xAxisLabels.length, _xAxisInnerPadding);
-                const margin1 = (totalWidth - reqWidth) / 2;
-                let margin2 = Number.POSITIVE_INFINITY;
-                if (!props.hideTickOverlap) {
-                    // Calculate the remaining width after accounting for the space required to render x-axis labels
-                    const step = calculateLongestLabelWidth(_xAxisLabels) + 20;
-                    reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
-                    margin2 = (totalWidth - reqWidth) / 2;
-                }
-                _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
-            }
-        } else {
-            var _props_data;
-            const data = ((_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.map((point)=>point.xAxisPoint)) || [];
-            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calculateAppropriateBarWidth(data, totalWidth, _xAxisInnerPadding));
-            _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
-        }
-        return {
-            ..._margins,
-            left: _margins.left + _domainMargin,
-            right: _margins.right + _domainMargin
-        };
-    }
-    function _getChartTitle() {
-        const { chartTitle, data } = props;
-        const numLines = Object.keys(_lineObject).length;
-        return (chartTitle ? `${chartTitle}. ` : '') + `Vertical bar chart with ${(data === null || data === void 0 ? void 0 : data.length) || 0} stacked bars` + (numLines > 0 ? ` and ${numLines} lines` : '') + '. ';
-    }
-    const classes = useVerticalStackedBarChartStyles(props);
-    function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
-        const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
-        const shouldFocusWholeStack = _toFocusWholeStack();
-        if (_xAxisType === XAxisTypes.StringAxis) {
-            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
-        }
-        const bars = _points.map((singleChartData, indexNumber)=>{
-            const xPoint = xBarScale(_xAxisType === XAxisTypes.NumericAxis ? singleChartData.xAxisPoint : _xAxisType === XAxisTypes.DateAxis ? singleChartData.xAxisPoint : singleChartData.xAxisPoint);
-            const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? -_barWidth / 2 : (xBarScale.bandwidth() - _barWidth) / 2;
-            let barTotalValue = 0;
-            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0 && point.data !== '' && !(_yAxisType === YAxisType.StringAxis && typeof yBarScale(point.data) === 'undefined'));
-            if (!barsToDisplay.length) {
-                return undefined;
-            }
-            const { gapHeight, heightValueScale, absStackTotal } = _getBarGapAndScale(barsToDisplay, yBarScale);
-            if (heightValueScale < 0) {
-                return undefined;
-            }
-            const yBaseline = containerHeight - _margins.bottom - (_yAxisType === YAxisType.StringAxis ? 0 : yBarScale(Y_ORIGIN));
-            let yPositiveStart = yBaseline;
-            let yNegativeStart = yBaseline;
-            let yPoint = 0;
-            let heightOfLastBar = 0;
-            const singleBar = barsToDisplay.map((point, index)=>{
-                const startColor = point.color ? point.color : _colors[index];
-                const ref = {};
-                const shouldHighlight = _isLegendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
-                const rectFocusProps = !shouldFocusWholeStack && shouldHighlight && {
-                    'aria-label': _getAriaLabel(singleChartData, point),
-                    onMouseOver: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
-                    onMouseMove: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
-                    onMouseLeave: _handleMouseOut,
-                    onFocus: ()=>_onRectFocus(point, singleChartData.xAxisPoint, startColor, ref),
-                    onBlur: _handleMouseOut,
-                    onClick: (event)=>_onClick(point, event),
-                    role: 'img',
-                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined
-                };
-                let barHeight;
-                const gapOffset = index ? gapHeight : 0;
-                if (_yAxisType === YAxisType.StringAxis) {
-                    barHeight = Math.max(containerHeight - _margins.bottom - (yBarScale(point.data) + yBarScale.bandwidth() / 2) - gapOffset, barMinimumHeight, 1);
-                    yPositiveStart -= barHeight + gapOffset;
-                    yPoint = yPositiveStart;
-                } else {
-                    barHeight = Math.abs(heightValueScale * point.data);
-                    // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
-                    const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
-                    if (barHeight < minHeight) {
-                        barHeight = minHeight;
-                    }
-                    if (point.data >= Y_ORIGIN) {
-                        yPositiveStart -= barHeight + gapOffset;
-                        yPoint = yPositiveStart;
-                    } else {
-                        yPoint = yNegativeStart + gapOffset;
-                        yNegativeStart = yPoint + barHeight;
-                    }
-                    barTotalValue += point.data;
-                    heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
-                }
-                if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
-                    return /*#__PURE__*/ React.createElement(React.Fragment, {
-                        key: index + indexNumber + `${shouldFocusWholeStack}`
-                    }, /*#__PURE__*/ React.createElement("path", {
-                        className: classes.opacityChangeOnHover,
-                        d: `
-                  M ${xPoint} ${yPoint + barCornerRadius}
-                  a ${barCornerRadius} ${barCornerRadius} 0 0 1 ${barCornerRadius} ${-barCornerRadius}
-                  h ${_barWidth - 2 * barCornerRadius}
-                  a ${barCornerRadius} ${barCornerRadius} 0 0 1 ${barCornerRadius} ${barCornerRadius}
-                  v ${barHeight - barCornerRadius}
-                  h ${-_barWidth}
-                  z
-                `,
-                        fill: startColor,
-                        opacity: shouldHighlight ? 1 : 0.1,
-                        rx: props.roundCorners ? 3 : 0,
-                        ref: (e)=>{
-                            ref.refElement = e;
-                        },
-                        transform: `translate(${xScaleBandwidthTranslate}, 0)`,
-                        cursor: props.href ? 'pointer' : 'default',
-                        ...rectFocusProps
-                    }));
-                }
-                if (barHeight < 0) {
-                    return /*#__PURE__*/ React.createElement(React.Fragment, {
-                        key: index + indexNumber
-                    }, " ");
-                }
-                return /*#__PURE__*/ React.createElement(React.Fragment, {
-                    key: index + indexNumber
-                }, /*#__PURE__*/ React.createElement("rect", {
-                    className: classes.opacityChangeOnHover,
-                    x: xPoint,
-                    y: yPoint,
-                    width: _barWidth,
-                    height: barHeight,
-                    fill: startColor,
-                    opacity: shouldHighlight ? 1 : 0.1,
-                    cursor: props.href ? 'pointer' : 'default',
-                    rx: props.roundCorners ? 3 : 0,
-                    ref: (e)=>{
-                        ref.refElement = e;
-                    },
-                    ...rectFocusProps,
-                    transform: `translate(${xScaleBandwidthTranslate}, 0)`
-                }));
-            });
-            const groupRef = {};
-            const someBarsActive = singleChartData.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length > 0;
-            // FIXME: Making the entire stack focusable when stack callout is enabled adds unnecessary complexity
-            // and can reduce usability in certain scenarios. Instead, each individual element within the stack
-            // should be focusable on its own, with its own aria-label. This behavior is also seen in Highcharts.
-            const stackFocusProps = shouldFocusWholeStack && someBarsActive && {
-                'aria-label': _getAriaLabel(singleChartData),
-                onMouseOver: (event)=>_onStackHover(singleChartData, event),
-                onMouseMove: (event)=>_onStackHover(singleChartData, event),
-                onMouseLeave: _handleMouseOut,
-                onFocus: ()=>_onStackFocus(singleChartData, groupRef),
-                onBlur: _handleMouseOut,
-                onClick: (event)=>_onClick(singleChartData, event),
-                role: 'img',
-                tabIndex: !props.hideTooltip ? 0 : undefined
-            };
-            let showLabel = false;
-            let barLabel = 0;
-            let selectedBarTotalValue = 0;
-            let customBarLabel = undefined;
-            if (!props.hideLabels && _yAxisType !== YAxisType.StringAxis) {
-                // Collect all bars with barLabel that match the legend filter
-                const barLabelsToDisplay = barsToDisplay.filter((point)=>point.barLabel && (_noLegendHighlighted() || _isLegendHighlighted(point.legend)));
-                // For stacked bars, we want to show the total of the stack, not individual bar labels
-                // Only use customBarLabel if there's exactly one bar with a label in the stack
-                if (barLabelsToDisplay.length === 1) {
-                    customBarLabel = barLabelsToDisplay[0].barLabel;
-                }
-                if (_noLegendHighlighted()) {
-                    showLabel = true;
-                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : barTotalValue;
-                    selectedBarTotalValue = barTotalValue;
-                } else {
-                    barsToDisplay.forEach((point)=>{
-                        if (_isLegendHighlighted(point.legend)) {
-                            showLabel = true;
-                            selectedBarTotalValue += point.data;
-                        }
-                    });
-                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : selectedBarTotalValue;
-                }
-            }
-            return /*#__PURE__*/ React.createElement("g", {
-                key: indexNumber + `${shouldFocusWholeStack}`
-            }, /*#__PURE__*/ React.createElement("g", {
-                id: `${indexNumber}-singleBar`,
-                ref: (e)=>{
-                    groupRef.refElement = e;
-                },
-                ...stackFocusProps
-            }, singleBar), !props.hideLabels && _barWidth >= 16 && showLabel && /*#__PURE__*/ React.createElement("text", {
-                x: xPoint + _barWidth / 2,
-                //if total bar value >=0, show label above top bar, otherwise below bottom bar
-                y: selectedBarTotalValue >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
-                textAnchor: "middle",
-                className: classes.barLabel,
-                "aria-label": `Total: ${barLabel}`,
-                role: "img",
-                transform: `translate(${xScaleBandwidthTranslate}, 0)`,
-                style: {
-                    direction: 'ltr',
-                    unicodeBidi: 'isolate'
-                }
-            }, typeof barLabel === 'string' ? barLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : formatScientificLimitWidth(barLabel)));
-        });
-        return bars.filter((bar)=>!!bar);
-    }
-    function _getMinMaxOfYAxis(dataset, yAxisType, useSecondaryYScale) {
-        if (!useSecondaryYScale) {
-            return findVSBCNumericMinMaxOfY(dataset);
-        }
-        const values = [];
-        props.data.forEach((xPoint)=>{
-            var _xPoint_lineData;
-            (_xPoint_lineData = xPoint.lineData) === null || _xPoint_lineData === void 0 ? void 0 : _xPoint_lineData.forEach((point)=>{
-                // useSecondaryYScale is applicable only for lines in VSBC
-                if (point.useSecondaryYScale) {
-                    values.push(point.y);
-                }
-            });
-        });
-        return {
-            startValue: d3Min(values),
-            endValue: d3Max(values)
-        };
-    }
-    function _initYAxisParams() {
-        if (_points[0].chartData.length > 0) {
-            _yAxisType = getTypeOfAxis(_points[0].chartData[0].data, false);
-        } else {
-            Object.keys(_lineObject).forEach((lineLegend)=>{
-                if (!_lineObject[lineLegend][0].useSecondaryYScale) {
-                    _yAxisType = getTypeOfAxis(_lineObject[lineLegend][0].y, false);
-                }
-            });
-        }
-        _yAxisLabels = _getOrderedYAxisLabels();
-    }
-    function _getYDomainMargins(containerHeight) {
-        /**
-     * Specifies the extra top margin to apply above the highest y-axis tick label.
-     * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
-     */ let yAxisTickMarginTop = 0;
-        /** Total height available to render the bars */ const totalHeight = containerHeight - _margins.bottom - _margins.top;
-        if (_yAxisType === YAxisType.StringAxis) {
-            /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;
-            _points.forEach((xPoint)=>{
-                /** Height of the stacked bar, expressed in multiples of the height of a y-axis label (or category) */ let barHeightInLabels = 0;
-                xPoint.chartData.forEach((bar)=>{
-                    barHeightInLabels += _yAxisLabels.indexOf(`${bar.data}`) + 1;
-                });
-                maxBarHeightInLabels = Math.max(maxBarHeightInLabels, barHeightInLabels);
-            });
-            /** Height of a y-axis label (or category) */ const yAxisLabelHeight = maxBarHeightInLabels === 0 ? 0 : totalHeight / maxBarHeightInLabels;
-            yAxisTickMarginTop += yAxisLabelHeight * (maxBarHeightInLabels - _yAxisLabels.length);
-        }
-        return {
-            ..._margins,
-            top: _margins.top + yAxisTickMarginTop
-        };
-    }
-    function _getOrderedXAxisLabels() {
-        if (_xAxisType !== XAxisTypes.StringAxis) {
-            return [];
-        }
-        return sortAxisCategories(_mapCategoryToValues(), props.xAxisCategoryOrder);
-    }
-    function _getOrderedYAxisLabels() {
-        if (_yAxisType !== YAxisType.StringAxis) {
-            return [];
-        }
-        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
-    }
-    function _mapCategoryToValues(isYAxis = false) {
-        const categoryToValues = {};
-        _points.forEach((point)=>{
-            var _point_lineData;
-            point.chartData.forEach((bar)=>{
-                const category = isYAxis ? bar.data : point.xAxisPoint;
-                const value = isYAxis ? point.xAxisPoint : bar.data;
-                if (!categoryToValues[category]) {
-                    categoryToValues[category] = [];
-                }
-                if (typeof value === 'number') {
-                    categoryToValues[category].push(value);
-                }
-            });
-            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((linePoint)=>{
-                if (isYAxis && linePoint.useSecondaryYScale) {
-                    return;
-                }
-                const category = isYAxis ? linePoint.y : point.xAxisPoint;
-                const value = isYAxis ? point.xAxisPoint : linePoint.y;
-                if (!categoryToValues[category]) {
-                    categoryToValues[category] = [];
-                }
-                if (typeof value === 'number') {
-                    categoryToValues[category].push(value);
-                }
-            });
-        });
-        return categoryToValues;
-    }
-    if (!_isChartEmpty()) {
-        _adjustProps();
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack();
-        _dataset = _createDataSetLayer();
-        const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
-        const calloutProps = {
-            color,
-            legend: calloutLegend,
-            XValue: xCalloutValue,
-            YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
-            YValueHover,
-            hoverXValue,
-            ...props.calloutProps,
-            ...getAccessibleDataObject(callOutAccessibilityData),
-            clickPosition,
-            isPopoverOpen,
-            isCalloutForStack: shouldFocusWholeStack,
-            isCartesian: true,
-            customCallout: {
-                customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
-                customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
-            }
-        };
-        const tickParams = {
-            tickValues: props.tickValues,
-            tickFormat: props.tickFormat
-        };
-        return /*#__PURE__*/ React.createElement(CartesianChart, {
-            ...props,
-            chartTitle: _getChartTitle(),
-            points: _dataset,
-            chartType: ChartTypes.VerticalStackedBarChart,
-            xAxisType: _xAxisType,
-            getMinMaxOfYAxis: _getMinMaxOfYAxis,
-            calloutProps: calloutProps,
-            createYAxis: createNumericYAxis,
-            tickParams: tickParams,
-            legendBars: legendBars,
-            datasetForXAxisDomain: _xAxisLabels,
-            isCalloutForStack: shouldFocusWholeStack,
-            getDomainNRangeValues: _getDomainNRangeValues,
-            createStringYAxis: createStringYAxis,
-            barwidth: _barWidth,
-            getmargins: _getMargins,
-            getGraphData: _getGraphData,
-            getAxisData: _getAxisData,
-            onChartMouseLeave: _handleChartMouseLeave,
-            getDomainMargins: _getDomainMargins,
-            ..._xAxisType === XAxisTypes.StringAxis && {
-                xAxisInnerPadding: _xAxisInnerPadding,
-                xAxisOuterPadding: _xAxisOuterPadding
-            },
-            componentRef: cartesianChartRef,
-            showRoundOffXTickValues: !isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding),
-            yAxisType: _yAxisType,
-            stringDatasetForYAxisDomain: [
-                '',
-                ..._yAxisLabels
-            ],
-            getYDomainMargins: _getYDomainMargins,
-            /* eslint-disable react/jsx-no-bind */ children: (props)=>{
-                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
-            }
-        });
-    }
-    return /*#__PURE__*/ React.createElement("div", {
-        id: _emptyChartId,
-        role: 'alert',
-        style: {
-            opacity: '0'
-        },
-        "aria-label": 'Graph has no data to display'
-    });
-});
-VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';