@fluentui/react-charts 9.0.1 → 9.0.3

package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","scatterChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","calloutContentRoot","calloutContentX","calloutContentY","descriptionMessage","calloutDateTimeContainer","calloutInfoContainer","calloutBlockContainer","calloutlegendText","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","useScatterChartStyles_unstable","props","baseStyles"],"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    calloutContentRoot: 'fui-line__calloutContentRoot',\n    calloutContentX: 'fui-line__calloutContentX',\n    calloutContentY: 'fui-line__calloutContentY',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    calloutDateTimeContainer: 'fui-line__calloutDateTimeContainer',\n    calloutInfoContainer: 'fui-line__calloutInfoContainer',\n    calloutBlockContainer: 'fui-line__calloutBlockContainer',\n    calloutlegendText: 'fui-line__calloutLegendText',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    calloutBlockContainertoDrawShapefalse: '',\n    calloutBlockContainertoDrawShapetrue: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAG;EACtCC,OAAO,EAAE,mBAAmB;EAC5BC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,eAAe,EAAE,2BAA2B;EAC5CC,eAAe,EAAE,2BAA2B;EAC5CC,kBAAkB,EAAE,8BAA8B;EAClDC,wBAAwB,EAAE,oCAAoC;EAC9DC,oBAAoB,EAAE,gCAAgC;EACtDC,qBAAqB,EAAE,iCAAiC;EACxDC,iBAAiB,EAAE,6BAA6B;EAChDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,qCAAqC,EAAE,EAAE;EACzCC,oCAAoC,EAAE;AAC1C,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAG1B,QAAA;EAAAK,OAAA;IAAAsB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,UAAU,GAAGrB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHrB,OAAO,EAAEJ,YAAY,CAACG,sBAAsB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,yBAA0B;EACvG,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/Sparkline/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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: {