@fluentui/react-charts 9.0.2 → 9.0.3

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -7,7 +7,7 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, Legends, ChartPopover } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth } from '../../utilities/index';
 var CircleVisbility;
 (function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
@@ -19,6 +19,7 @@ const MIN_DOMAIN_MARGIN = 8;
  * VerticalBarchart component
  * {@docCategory VerticalBarChart}
  */ export const VerticalBarChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
     let _points = [];
     let _barWidth = 0;
     let _colors;
@@ -28,6 +29,7 @@ const MIN_DOMAIN_MARGIN = 8;
     let _bars;
     let _xAxisLabels;
     let _yMax;
+    let _yMin;
     let _isHavingLine = _checkForLine();
     const _tooltipId = useId('VCTooltipID_');
     const _xAxisType = props.data && props.data.length > 0 ? getTypeOfAxis(props.data[0].x, true) : XAxisTypes.StringAxis;
@@ -42,12 +44,11 @@ const MIN_DOMAIN_MARGIN = 8;
     const cartesianChartRef = React.useRef(null);
     const [color, setColor] = React.useState('');
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
-    const [selectedLegend, setSelectedLegend] = React.useState('');
-    const [activeLegend, setActiveLegend] = React.useState('');
+    const [activeLegend, setActiveLegend] = React.useState(undefined);
     const [xCalloutValue, setXCalloutValue] = React.useState('');
     const [yCalloutValue, setYCalloutValue] = React.useState('');
     const [activeXdataPoint, setActiveXDatapoint] = React.useState(null);
-    const [YValueHover, setYValueHover] = React.useState();
+    const [hoveredYValues, setYValueHover] = React.useState();
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [calloutLegend, setCalloutLegend] = React.useState('');
     const [callOutAccessibilityData, setCalloutAccessibilityData] = React.useState();
@@ -57,6 +58,8 @@ const MIN_DOMAIN_MARGIN = 8;
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
+    const prevPropsRef = React.useRef(null);
     React.useImperativeHandle(props.componentRef, ()=>{
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
@@ -64,6 +67,24 @@ const MIN_DOMAIN_MARGIN = 8;
             chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : 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) {
+                _adjustProps();
+            }
+        }
+        prevPropsRef.current = props;
+    }, [
+        props,
+        prevPropsRef,
+        _adjustProps
+    ]);
     function _createLine(// eslint-disable-next-line @typescript-eslint/no-explicit-any
     xScale, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     yScale, containerHeight = 0, containerWidth = 0, // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -125,7 +146,7 @@ const MIN_DOMAIN_MARGIN = 8;
                 id: `${_vbcPointId}-${index}`,
                 cx: isStringAxis ? xScale(item.x) + 0.5 * xScale.bandwidth() : xScale(item.x),
                 cy: item.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(item.y) : yScale(item.y),
-                onMouseOver: _legendHighlighted(lineLegendText) ? _lineHover.bind(item.point) : (event)=>_onBarHover(item.point, colorScale(item.y), event),
+                onMouseOver: (event)=>_legendHighlighted(lineLegendText) ? _lineHover(item.point, event) : _onBarHover(item.point, colorScale(item.y), event),
                 onMouseOut: _onBarLeave,
                 r: _getCircleVisibilityAndRadius(item.x, lineLegendText).radius,
                 stroke: lineLegendColor,
@@ -145,13 +166,13 @@ const MIN_DOMAIN_MARGIN = 8;
         return /*#__PURE__*/ React.createElement(React.Fragment, null, line, dots);
     }
     function _getCircleVisibilityAndRadius(xAxisPoint, legend) {
-        if (selectedLegend !== '') {
-            if (xAxisPoint === activeXdataPoint && selectedLegend === legend) {
+        if (!_noLegendHighlighted()) {
+            if (xAxisPoint === activeXdataPoint && _legendHighlighted(legend)) {
                 return {
                     visibility: "visibility",
                     radius: 8
                 };
-            } else if (selectedLegend === legend) {
+            } else if (_legendHighlighted(legend)) {
                 // Don't hide the circle to keep it focusable. For more information,
                 // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                 return {
@@ -271,10 +292,10 @@ const MIN_DOMAIN_MARGIN = 8;
         const { useSingleColor = false } = props;
         const { data, lineLegendText, lineLegendColor = tokens.colorPaletteYellowBackground1 } = props;
         const selectedPoint = data.filter((xDataPoint)=>xDataPoint.x === point.x);
-        // there might be no y value of the line for the hovered bar. so we need to check this condition
-        if (_isHavingLine && ((_selectedPoint__lineData = selectedPoint[0].lineData) === null || _selectedPoint__lineData === void 0 ? void 0 : _selectedPoint__lineData.y) !== undefined) {
+        // Check if the line legend is highlighted or no legend is highlighted
+        if (_isHavingLine && ((_selectedPoint__lineData = selectedPoint[0].lineData) === null || _selectedPoint__lineData === void 0 ? void 0 : _selectedPoint__lineData.y) !== undefined && (_legendHighlighted(lineLegendText) || _noLegendHighlighted())) {
             var _selectedPoint__lineData1, _selectedPoint__lineData2, _selectedPoint__lineData3;
-            // callout data for the  line
+            // Add callout data for the line
             YValueHover.push({
                 legend: lineLegendText,
                 color: lineLegendColor,
@@ -283,14 +304,17 @@ const MIN_DOMAIN_MARGIN = 8;
                 yAxisCalloutData: (_selectedPoint__lineData3 = selectedPoint[0].lineData) === null || _selectedPoint__lineData3 === void 0 ? void 0 : _selectedPoint__lineData3.yAxisCalloutData
             });
         }
-        // callout data for the bar
-        YValueHover.push({
-            legend: selectedPoint[0].legend,
-            y: selectedPoint[0].y,
-            color: !useSingleColor ? selectedPoint[0].color ? selectedPoint[0].color : _createColors()(selectedPoint[0].y) : _createColors()(1),
-            data: selectedPoint[0].yAxisCalloutData,
-            yAxisCalloutData: selectedPoint[0].yAxisCalloutData
-        });
+        // Check if the bar legend is highlighted or no legend is highlighted
+        if (selectedPoint[0].legend && (selectedLegends.includes(selectedPoint[0].legend) || _noLegendHighlighted())) {
+            // Add callout data for the bar
+            YValueHover.push({
+                legend: selectedPoint[0].legend,
+                y: selectedPoint[0].y,
+                color: !useSingleColor ? selectedPoint[0].color ? selectedPoint[0].color : _createColors()(selectedPoint[0].y) : _createColors()(1),
+                data: selectedPoint[0].yAxisCalloutData,
+                yAxisCalloutData: selectedPoint[0].yAxisCalloutData
+            });
+        }
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const hoverXValue = point.x instanceof Date ? point.x.toLocaleString() : point.x.toString();
         return {
@@ -306,7 +330,7 @@ const MIN_DOMAIN_MARGIN = 8;
         if (_calloutAnchorPoint !== point) {
             _calloutAnchorPoint = point;
             /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ updatePosition(mouseEvent.clientX, mouseEvent.clientY);
-            setPopoverOpen(selectedLegend === '' || selectedLegend === point.legend);
+            setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(point.legend));
             setDataForHoverCard(point.y);
             setCalloutLegend(point.legend);
             setColor(point.color || color);
@@ -335,7 +359,7 @@ const MIN_DOMAIN_MARGIN = 8;
         const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
         _refArray.forEach((obj, index)=>{
             if (obj.index === point.legend && refArrayIndexNumber === index) {
-                /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ setPopoverOpen(selectedLegend === '' || selectedLegend === point.legend);
+                /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(point.legend));
                 setDataForHoverCard(point.y);
                 setCalloutLegend(point.legend);
                 setColor(point.color || color);
@@ -362,7 +386,7 @@ const MIN_DOMAIN_MARGIN = 8;
     }
     function _lineHoverFocus(point, _refSelected) {
         const { lineLegendText = '', lineLegendColor = tokens.colorPaletteYellowBackground1 } = props;
-        setPopoverOpen(false);
+        setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(lineLegendText));
         setCalloutLegend(lineLegendText);
         setDataForHoverCard(point.lineData.y);
         setColor(lineLegendColor);
@@ -376,7 +400,7 @@ const MIN_DOMAIN_MARGIN = 8;
         let xBarScale;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const yBarScale = d3ScaleLinear().domain([
-            0,
+            _yMin,
             _yMax
         ]).range([
             0,
@@ -423,31 +447,40 @@ const MIN_DOMAIN_MARGIN = 8;
         };
     }
     const classes = useVerticalBarChartStyles(props);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function _calculateMinBarHeight(yMin, yMax, yReferencePoint, yBarScale) {
+        const maxHeightFromBaseline = yMax < 0 ? Math.abs(yMin - yReferencePoint) : Math.max(Math.abs(yMax - yReferencePoint), Math.abs(yMin - yReferencePoint));
+        return Math.ceil(yBarScale(maxHeightFromBaseline) / 100.0);
+    }
     function _createNumericBars(containerHeight, containerWidth, xElement) {
         const { useSingleColor = false } = props;
         const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
         const colorScale = _createColors();
+        const yReferencePoint = _yMax < 0 ? _yMax : 0;
         const bars = _points.map((point, index)=>{
             const shouldHighlight = _legendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
-            const barHeight = Math.max(yBarScale(point.y), 0);
-            let adjustedBarHeight = 0;
-            if (barHeight <= 0) {
+            let barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            const isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            const minBarHeight = _calculateMinBarHeight(_yMin, _yMax, yReferencePoint, yBarScale);
+            let adjustedBarHeight = barHeight;
+            if (barHeight === 0) {
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
                     key: point.x
                 }, " ");
-            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
-            } else {
-                adjustedBarHeight = barHeight;
+            } else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             const xPoint = xBarScale(point.x) - _barWidth / 2;
-            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            const yPoint = containerHeight - margins.bottom - (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) - yBarScale(yReferencePoint);
+            const baselineHeight = containerHeight - margins.bottom - yBarScale(yReferencePoint);
             return /*#__PURE__*/ React.createElement("g", {
-                key: point.x
+                key: `${point.x}_${index}`
             }, /*#__PURE__*/ React.createElement("rect", {
                 id: `${_vbcBarId}-${index}`,
                 x: xPoint,
-                y: yPoint,
+                y: !isHeightNegative ? yPoint : baselineHeight,
                 width: _barWidth,
                 "data-is-focusable": !props.hideTooltip && shouldHighlight,
                 height: adjustedBarHeight,
@@ -463,8 +496,9 @@ const MIN_DOMAIN_MARGIN = 8;
                 onBlur: _onBarLeave,
                 fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
                 tabIndex: point.legend !== '' ? 0 : undefined,
-                opacity: shouldHighlight ? '1' : '0.1'
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+                opacity: shouldHighlight ? 1 : 0.1,
+                rx: props.roundCorners ? 3 : 0
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!props.showXAxisLablesTooltip) {
@@ -494,30 +528,35 @@ const MIN_DOMAIN_MARGIN = 8;
     function _createStringBars(containerHeight, containerWidth, xElement) {
         const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
         const colorScale = _createColors();
+        const yReferencePoint = _yMax < 0 ? _yMax : 0;
         const bars = _points.map((point, index)=>{
-            const barHeight = Math.max(yBarScale(point.y), 0);
-            let adjustedBarHeight = 0;
-            if (barHeight <= 0) {
+            const shouldHighlight = _legendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
+            let barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            const isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            const minBarHeight = _calculateMinBarHeight(_yMin, _yMax, yReferencePoint, yBarScale);
+            let adjustedBarHeight = barHeight;
+            if (barHeight === 0) {
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
-                    key: point.x instanceof Date ? point.x.getTime() : point.x
+                    key: point.x
                 }, " ");
-            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
-            } else {
-                adjustedBarHeight = barHeight;
+            } else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             const xPoint = xBarScale(point.x);
-            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            const yPoint = containerHeight - margins.bottom - (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) - yBarScale(yReferencePoint);
+            const baselineHeight = containerHeight - margins.bottom - yBarScale(yReferencePoint);
             // Setting the bar width here is safe because there are no dependencies earlier in the code
             // that rely on the width of bars in vertical bar charts with string x-axis.
             _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
             return /*#__PURE__*/ React.createElement("g", {
-                key: point.x instanceof Date ? point.x.getTime() : point.x,
+                key: point.x instanceof Date ? `${point.x.getTime()}_${index}` : `${point.x}_${index}`,
                 transform: `translate(${0.5 * (xBarScale.bandwidth() - _barWidth)}, 0)`
             }, /*#__PURE__*/ React.createElement("rect", {
                 id: `${_vbcBarId}-${index}`,
                 x: xPoint,
-                y: yPoint,
+                y: !isHeightNegative ? yPoint : baselineHeight,
                 width: _barWidth,
                 height: adjustedBarHeight,
                 "aria-label": _getAriaLabel(point),
@@ -529,11 +568,13 @@ const MIN_DOMAIN_MARGIN = 8;
                 onMouseOver: (event)=>_onBarHover(point, colorScale(point.y), event),
                 onMouseLeave: _onBarLeave,
                 onBlur: _onBarLeave,
-                "data-is-focusable": !props.hideTooltip,
+                "data-is-focusable": !props.hideTooltip && shouldHighlight,
                 onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
                 fill: point.color ? point.color : colorScale(point.y),
-                tabIndex: point.legend !== '' ? 0 : undefined
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+                tabIndex: point.legend !== '' ? 0 : undefined,
+                rx: props.roundCorners ? 3 : 0,
+                opacity: shouldHighlight ? 1 : 0.1
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!props.showXAxisLablesTooltip) {
@@ -565,28 +606,32 @@ const MIN_DOMAIN_MARGIN = 8;
         const { useSingleColor = false } = props;
         const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
         const colorScale = _createColors();
+        const yReferencePoint = _yMax < 0 ? _yMax : 0;
         const bars = _points.map((point, index)=>{
             const shouldHighlight = _legendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
-            const barHeight = Math.max(yBarScale(point.y), 0);
-            let adjustedBarHeight = 0;
-            if (barHeight <= 0) {
+            let barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            const isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            const minBarHeight = _calculateMinBarHeight(_yMin, _yMax, yReferencePoint, yBarScale);
+            let adjustedBarHeight = barHeight;
+            if (barHeight === 0) {
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
-                    key: point.x instanceof Date ? point.x.getTime() : point.x
+                    key: point.x
                 }, " ");
-            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
-            } else {
-                adjustedBarHeight = barHeight;
+            } else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             const xPoint = xBarScale(point.x) - _barWidth / 2;
-            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            const yPoint = containerHeight - margins.bottom - (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) - yBarScale(yReferencePoint);
+            const baselineHeight = containerHeight - margins.bottom - yBarScale(yReferencePoint);
             return /*#__PURE__*/ React.createElement("g", {
-                key: point.x instanceof Date ? point.x.getTime() : point.x
+                key: point.x instanceof Date ? `${point.x.getTime()}_${index}` : `${point.x}_${index}`
             }, /*#__PURE__*/ React.createElement("rect", {
                 id: `${_vbcBarId}-${index}`,
                 x: xPoint,
                 className: classes.opacityChangeOnHover,
-                y: yPoint,
+                y: !isHeightNegative ? yPoint : baselineHeight,
                 width: _barWidth,
                 "data-is-focusable": !props.hideTooltip && shouldHighlight,
                 height: adjustedBarHeight,
@@ -601,8 +646,10 @@ const MIN_DOMAIN_MARGIN = 8;
                 onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
                 onBlur: _onBarLeave,
                 fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
-                tabIndex: point.legend !== '' ? 0 : undefined
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+                tabIndex: point.legend !== '' ? 0 : undefined,
+                rx: props.roundCorners ? 3 : 0,
+                opacity: shouldHighlight ? 1 : 0.1
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!props.showXAxisLablesTooltip) {
@@ -629,36 +676,30 @@ const MIN_DOMAIN_MARGIN = 8;
         }
         return bars;
     }
-    function _onLegendClick(legendTitle) {
-        if (selectedLegend === legendTitle) {
-            setSelectedLegend('');
-        } else {
-            setSelectedLegend(legendTitle);
-        }
-    }
     function _onLegendHover(legendTitle) {
         setActiveLegend(legendTitle);
     }
     function _onLegendLeave() {
-        setActiveLegend('');
+        setActiveLegend(undefined);
     }
     function _getLegendData(data) {
         const { useSingleColor } = props;
         const { lineLegendText, lineLegendColor = tokens.colorPaletteYellowForeground1 } = props;
         const actions = [];
+        const mapLegendToColor = {};
         data.forEach((point, _index)=>{
             // eslint-disable-next-line @typescript-eslint/no-shadow
             const color = !useSingleColor ? point.color : _createColors()(1);
+            mapLegendToColor[point.legend] = color;
+        });
+        Object.entries(mapLegendToColor).forEach(([legendTitle, color])=>{
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
+                title: legendTitle,
                 color,
-                action: ()=>{
-                    _onLegendClick(point.legend);
-                },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    _onLegendHover(point.legend);
+                    _onLegendHover(legendTitle);
                 },
                 onMouseOutAction: ()=>{
                     _onLegendLeave();
@@ -670,9 +711,6 @@ const MIN_DOMAIN_MARGIN = 8;
             const lineLegend = {
                 title: lineLegendText,
                 color: lineLegendColor,
-                action: ()=>{
-                    _onLegendClick(lineLegendText);
-                },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
                     _onLegendHover(lineLegendText);
@@ -688,14 +726,28 @@ const MIN_DOMAIN_MARGIN = 8;
             legends: actions,
             enabledWrapLines: props.enabledLegendsWrapLines,
             overflowText: props.legendsOverflowText,
-            ...props.legendProps
+            ...props.legendProps,
+            selectedLegends: selectedLegends,
+            onChange: _onLegendSelectionChange
         });
         return legends;
     }
+    function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
+        var _props_legendProps, _props_legendProps1;
+        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
+            setSelectedLegends(legendsSelected);
+        } else {
+            setSelectedLegends(legendsSelected.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(legendsSelected, event, currentLegend);
+        }
+    }
     function _getAxisData(yAxisData) {
         if (yAxisData && yAxisData.yAxisDomainValues.length) {
             const { yAxisDomainValues: domainValue } = yAxisData;
             _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || 0);
+            _yMin = Math.min(domainValue[0], props.yMinValue || 0);
         }
     }
     /**
@@ -704,12 +756,17 @@ const MIN_DOMAIN_MARGIN = 8;
    * 1. selection: if the user clicks on it
    * 2. hovering: if there is no selected legend and the user hovers over it
    */ function _legendHighlighted(legendTitle) {
-        return selectedLegend === legendTitle || selectedLegend === '' && activeLegend === legendTitle;
+        return _getHighlightedLegend().includes(legendTitle);
     }
     /**
    * This function checks if none of the legends is selected or hovered.
    */ function _noLegendHighlighted() {
-        return selectedLegend === '' && activeLegend === '';
+        return _getHighlightedLegend().length === 0;
+    }
+    function _getHighlightedLegend() {
+        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
+            activeLegend
+        ] : [];
     }
     function _getAriaLabel(point) {
         var _point_lineData, _point_lineData1, _point_callOutAccessibilityData;
@@ -720,13 +777,13 @@ const MIN_DOMAIN_MARGIN = 8;
         const lineYValue = ((_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.yAxisCalloutData) || ((_point_lineData1 = point.lineData) === null || _point_lineData1 === void 0 ? void 0 : _point_lineData1.y);
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ` + (legend ? `${legend}, ` : '') + `${yValue}.` + (typeof lineYValue !== 'undefined' ? ` ${lineLegend}, ${lineYValue}.` : '');
     }
-    function _renderBarLabel(xPoint, yPoint, barValue, legend) {
+    function _renderBarLabel(xPoint, yPoint, barValue, legend, isNegativeBar) {
         if (props.hideLabels || _barWidth < 16 || !(_legendHighlighted(legend) || _noLegendHighlighted())) {
             return null;
         }
         return /*#__PURE__*/ React.createElement("text", {
             x: xPoint + _barWidth / 2,
-            y: yPoint - 6,
+            y: isNegativeBar ? yPoint + 12 : yPoint - 6,
             textAnchor: "middle",
             className: classes.barLabel,
             "aria-hidden": true
@@ -735,13 +792,13 @@ const MIN_DOMAIN_MARGIN = 8;
     function _getDomainMargins(containerWidth) {
         _domainMargin = MIN_DOMAIN_MARGIN;
         /** Total width available to render the bars */ const totalWidth = containerWidth - (margins.left + MIN_DOMAIN_MARGIN) - (margins.right + MIN_DOMAIN_MARGIN);
+        /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
         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') {
-                /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
                 // 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);
@@ -750,10 +807,29 @@ const MIN_DOMAIN_MARGIN = 8;
                     // 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 = totalWidth / (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate);
+                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
+                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                const margin1 = (totalWidth - reqWidth) / 2;
+                // 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;
+                const 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.x)) || [];
+            const uniqueX = {};
+            (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.forEach((point)=>{
+                if (point.x instanceof Date) {
+                    uniqueX[point.x.getTime()] = point.x;
+                } else {
+                    uniqueX[point.x] = point.x;
+                }
+            });
+            const data = Object.values(uniqueX);
             _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calculateAppropriateBarWidth(data, totalWidth));
             _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
         }
@@ -764,7 +840,7 @@ const MIN_DOMAIN_MARGIN = 8;
         };
     }
     function _isChartEmpty() {
-        return _points.length === 0 || d3Max(_points, (point)=>point.y) <= 0 && !_isHavingLine;
+        return _points.length === 0 || _points.every((point)=>point.y === 0) && !_isHavingLine;
     }
     function updatePosition(newX, newY) {
         const threshold = 1; // Set a threshold for movement
@@ -783,11 +859,12 @@ const MIN_DOMAIN_MARGIN = 8;
     _adjustProps();
     _xAxisLabels = _points.map((point)=>point.x);
     _yMax = Math.max(d3Max(_points, (point)=>point.y), props.yMaxValue || 0);
+    _yMin = Math.min(d3Min(_points, (point)=>point.y), props.yMinValue || 0);
     const legendBars = _getLegendData(_points);
     var _props_culture;
     const calloutProps = {
         ..._isHavingLine && {
-            YValueHover: YValueHover,
+            YValueHover: hoveredYValues,
             hoverXValue: hoverXValue
         },
         color: color,
@@ -798,7 +875,7 @@ const MIN_DOMAIN_MARGIN = 8;
         ...getAccessibleDataObject(callOutAccessibilityData),
         clickPosition: clickPosition,
         isPopoverOpen: isPopoverOpen,
-        isCalloutForStack: _isHavingLine && _noLegendHighlighted(),
+        isCalloutForStack: _isHavingLine && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
         culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
         isCartesian: true,
         customCallout: {