@fluentui/react-charts 9.1.9 → 9.2.0

package/lib-commonjs/components/GaugeChart/useGaugeChartStyles.styles.raw.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    gaugeChartClassNames: function() {
+        return gaugeChartClassNames;
+    },
+    useGaugeChartStyles: function() {
+        return useGaugeChartStyles;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const gaugeChartClassNames = {
+    root: 'fui-gc__root',
+    chart: 'fui-gc__chart',
+    limits: 'fui-gc__limits',
+    chartValue: 'fui-gc__chartValue',
+    sublabel: 'fui-gc__sublabel',
+    needle: 'fui-gc__needle',
+    chartTitle: 'fui-gc__chartTitle',
+    segment: 'fui-gc__segment',
+    gradientSegment: 'fui-gc__gradientSegment',
+    calloutContentRoot: 'fui-gc__calloutContentRoot',
+    calloutDateTimeContainer: 'fui-gc__calloutDateTimeContainer',
+    calloutContentX: 'fui-gc__calloutContentX',
+    calloutBlockContainer: 'fui-gc__calloutBlockContainer',
+    shapeStyles: 'fui-gc__shapeStyles',
+    calloutlegendText: 'fui-gc__calloutlegendText',
+    calloutContentY: 'fui-gc__calloutContentY',
+    descriptionMessage: 'fui-gc__descriptionMessage',
+    calloutInfoContainer: '',
+    legendsContainer: 'fui-gc__legendsContainer',
+    chartWrapper: 'fui-gc__chartWrapper'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        ..._reacttheme.typographyStyles.body1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%'
+    },
+    chart: {
+        display: 'block'
+    },
+    limits: {
+        ..._reacttheme.typographyStyles.caption1Strong,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    chartValue: {
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    sublabel: {
+        ..._reacttheme.typographyStyles.caption1Strong,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    needle: {
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        stroke: _reacttheme.tokens.colorNeutralBackground1
+    },
+    chartTitle: {
+        ..._reacttheme.typographyStyles.caption1,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    segment: {
+        outline: 'none',
+        stroke: _reacttheme.tokens.colorNeutralStroke1
+    },
+    gradientSegment: {
+        width: '100%',
+        height: '100%'
+    },
+    calloutContentRoot: {
+        display: 'grid',
+        overflow: 'hidden',
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        backgroundBlendMode: 'normal, luminosity'
+    },
+    calloutDateTimeContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+    },
+    calloutContentX: {
+        ..._reacttheme.typographyStyles.caption1,
+        lineHeight: '16px',
+        opacity: '0.85'
+    },
+    calloutBlockContainer: {
+        ..._reacttheme.typographyStyles.body1Strong,
+        marginTop: '13px',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        paddingLeft: '8px',
+        display: 'block',
+        forcedColorAdjust: 'none'
+    },
+    shapeStyles: {
+        marginRight: '8px'
+    },
+    calloutlegendText: {
+        ..._reacttheme.typographyStyles.caption1,
+        lineHeight: '16px',
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        forcedColorAdjust: 'auto'
+    },
+    calloutContentY: {
+        ..._reacttheme.typographyStyles.body1Strong,
+        lineHeight: '22px',
+        forcedColorAdjust: 'auto'
+    },
+    descriptionMessage: {
+        ..._reacttheme.typographyStyles.caption1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        marginTop: '10px',
+        paddingTop: '10px',
+        borderTop: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`
+    },
+    legendsContainer: {
+        width: '100%'
+    }
+});
+const useGaugeChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12, _props_styles13, _props_styles14, _props_styles15, _props_styles16, _props_styles17, _props_styles18;
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(gaugeChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: (0, _react.mergeClasses)(gaugeChartClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        limits: (0, _react.mergeClasses)(gaugeChartClassNames.limits, baseStyles.limits, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.limits),
+        chartValue: (0, _react.mergeClasses)(gaugeChartClassNames.chartValue, baseStyles.chartValue, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartValue),
+        sublabel: (0, _react.mergeClasses)(gaugeChartClassNames.sublabel, baseStyles.sublabel, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.sublabel),
+        needle: (0, _react.mergeClasses)(gaugeChartClassNames.needle, baseStyles.needle, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.needle),
+        chartTitle: (0, _react.mergeClasses)(gaugeChartClassNames.chartTitle, baseStyles.chartTitle, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitle),
+        segment: (0, _react.mergeClasses)(gaugeChartClassNames.segment, baseStyles.segment, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.segment),
+        gradientSegment: (0, _react.mergeClasses)(gaugeChartClassNames.gradientSegment, baseStyles.gradientSegment, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.gradientSegment),
+        calloutContentRoot: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.calloutContentRoot),
+        calloutDateTimeContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.calloutDateTimeContainer),
+        calloutContentX: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentX, baseStyles.calloutContentX, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.calloutContentX),
+        calloutBlockContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.calloutBlockContainer),
+        shapeStyles: (0, _react.mergeClasses)(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles, (_props_styles13 = props.styles) === null || _props_styles13 === void 0 ? void 0 : _props_styles13.shapeStyles),
+        calloutlegendText: (0, _react.mergeClasses)(gaugeChartClassNames.calloutlegendText, baseStyles.calloutlegendText, (_props_styles14 = props.styles) === null || _props_styles14 === void 0 ? void 0 : _props_styles14.calloutlegendText),
+        calloutContentY: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentY, baseStyles.calloutContentY, (_props_styles15 = props.styles) === null || _props_styles15 === void 0 ? void 0 : _props_styles15.calloutContentY),
+        descriptionMessage: (0, _react.mergeClasses)(gaugeChartClassNames.descriptionMessage, baseStyles.descriptionMessage, (_props_styles16 = props.styles) === null || _props_styles16 === void 0 ? void 0 : _props_styles16.descriptionMessage),
+        chartWrapper: (0, _react.mergeClasses)(gaugeChartClassNames.chartWrapper, (_props_styles17 = props.styles) === null || _props_styles17 === void 0 ? void 0 : _props_styles17.chartWrapper),
+        legendsContainer: (0, _react.mergeClasses)(gaugeChartClassNames.legendsContainer, baseStyles.legendsContainer, (_props_styles18 = props.styles) === null || _props_styles18 === void 0 ? void 0 : _props_styles18.legendsContainer)
+    };
+};

package/lib-commonjs/components/GaugeChart/useGaugeChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/GaugeChart/useGaugeChartStyles.styles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { GaugeChartProps, GaugeChartStyles } from './GaugeChart.types';\n\nexport const gaugeChartClassNames: SlotClassNames<GaugeChartStyles> = {\n  root: 'fui-gc__root',\n  chart: 'fui-gc__chart',\n  limits: 'fui-gc__limits',\n  chartValue: 'fui-gc__chartValue',\n  sublabel: 'fui-gc__sublabel',\n  needle: 'fui-gc__needle',\n  chartTitle: 'fui-gc__chartTitle',\n  segment: 'fui-gc__segment',\n  gradientSegment: 'fui-gc__gradientSegment',\n  calloutContentRoot: 'fui-gc__calloutContentRoot',\n  calloutDateTimeContainer: 'fui-gc__calloutDateTimeContainer',\n  calloutContentX: 'fui-gc__calloutContentX',\n  calloutBlockContainer: 'fui-gc__calloutBlockContainer',\n  shapeStyles: 'fui-gc__shapeStyles',\n  calloutlegendText: 'fui-gc__calloutlegendText',\n  calloutContentY: 'fui-gc__calloutContentY',\n  descriptionMessage: 'fui-gc__descriptionMessage',\n  calloutInfoContainer: '',\n  legendsContainer: 'fui-gc__legendsContainer',\n  chartWrapper: 'fui-gc__chartWrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n    height: '100%',\n  },\n  chart: {\n    display: 'block',\n  },\n  limits: {\n    ...typographyStyles.caption1Strong,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  chartValue: {\n    fontWeight: tokens.fontWeightSemibold,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  sublabel: {\n    ...typographyStyles.caption1Strong,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  needle: {\n    fill: tokens.colorNeutralForeground1,\n    stroke: tokens.colorNeutralBackground1,\n  },\n  chartTitle: {\n    ...typographyStyles.caption1,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  segment: {\n    outline: 'none',\n    stroke: tokens.colorNeutralStroke1,\n  },\n  gradientSegment: {\n    width: '100%',\n    height: '100%',\n  },\n  calloutContentRoot: {\n    display: 'grid',\n    overflow: 'hidden',\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundBlendMode: 'normal, luminosity',\n  },\n  calloutDateTimeContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  calloutContentX: {\n    ...typographyStyles.caption1,\n    lineHeight: '16px',\n    opacity: '0.85',\n  },\n  calloutBlockContainer: {\n    ...typographyStyles.body1Strong,\n    marginTop: '13px',\n    color: tokens.colorNeutralForeground1,\n    paddingLeft: '8px',\n    display: 'block',\n    forcedColorAdjust: 'none',\n  },\n  shapeStyles: {\n    marginRight: '8px',\n  },\n  calloutlegendText: {\n    ...typographyStyles.caption1,\n    lineHeight: '16px',\n    color: tokens.colorNeutralForeground2,\n    forcedColorAdjust: 'auto',\n  },\n  calloutContentY: {\n    ...typographyStyles.body1Strong,\n    lineHeight: '22px',\n    forcedColorAdjust: 'auto',\n  },\n  descriptionMessage: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground1,\n    marginTop: '10px',\n    paddingTop: '10px',\n    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,\n  },\n  legendsContainer: {\n    width: '100%',\n  },\n});\nexport const useGaugeChartStyles = (props: GaugeChartProps): GaugeChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(gaugeChartClassNames.root, baseStyles.root, props.styles?.root),\n    chart: mergeClasses(gaugeChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n    limits: mergeClasses(gaugeChartClassNames.limits, baseStyles.limits, props.styles?.limits),\n    chartValue: mergeClasses(gaugeChartClassNames.chartValue, baseStyles.chartValue, props.styles?.chartValue),\n    sublabel: mergeClasses(gaugeChartClassNames.sublabel, baseStyles.sublabel, props.styles?.sublabel),\n    needle: mergeClasses(gaugeChartClassNames.needle, baseStyles.needle, props.styles?.needle),\n    chartTitle: mergeClasses(gaugeChartClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    segment: mergeClasses(gaugeChartClassNames.segment, baseStyles.segment, props.styles?.segment),\n    gradientSegment: mergeClasses(\n      gaugeChartClassNames.gradientSegment,\n      baseStyles.gradientSegment,\n      props.styles?.gradientSegment,\n    ),\n    calloutContentRoot: mergeClasses(\n      gaugeChartClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot,\n      props.styles?.calloutContentRoot,\n    ),\n    calloutDateTimeContainer: mergeClasses(\n      gaugeChartClassNames.calloutDateTimeContainer,\n      baseStyles.calloutDateTimeContainer,\n      props.styles?.calloutDateTimeContainer,\n    ),\n    calloutContentX: mergeClasses(\n      gaugeChartClassNames.calloutContentX,\n      baseStyles.calloutContentX,\n      props.styles?.calloutContentX,\n    ),\n    calloutBlockContainer: mergeClasses(\n      gaugeChartClassNames.calloutBlockContainer,\n      baseStyles.calloutBlockContainer,\n      props.styles?.calloutBlockContainer,\n    ),\n    shapeStyles: mergeClasses(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles, props.styles?.shapeStyles),\n    calloutlegendText: mergeClasses(\n      gaugeChartClassNames.calloutlegendText,\n      baseStyles.calloutlegendText,\n      props.styles?.calloutlegendText,\n    ),\n    calloutContentY: mergeClasses(\n      gaugeChartClassNames.calloutContentY,\n      baseStyles.calloutContentY,\n      props.styles?.calloutContentY,\n    ),\n    descriptionMessage: mergeClasses(\n      gaugeChartClassNames.descriptionMessage,\n      baseStyles.descriptionMessage,\n      props.styles?.descriptionMessage,\n    ),\n    chartWrapper: mergeClasses(gaugeChartClassNames.chartWrapper, props.styles?.chartWrapper),\n    legendsContainer: mergeClasses(\n      gaugeChartClassNames.legendsContainer,\n      baseStyles.legendsContainer,\n      props.styles?.legendsContainer,\n    ),\n  };\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","gaugeChartClassNames","root","chart","limits","chartValue","sublabel","needle","chartTitle","segment","gradientSegment","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","calloutInfoContainer","legendsContainer","chartWrapper","useStyles","body1","display","flexDirection","alignItems","width","height","caption1Strong","fill","colorNeutralForeground1","forcedColorAdjust","fontWeight","fontWeightSemibold","stroke","colorNeutralBackground1","caption1","outline","colorNeutralStroke1","overflow","backgroundColor","backgroundBlendMode","justifyContent","lineHeight","opacity","body1Strong","marginTop","color","paddingLeft","marginRight","colorNeutralForeground2","paddingTop","borderTop","useGaugeChartStyles","props","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -17,6 +17,7 @@ const _d3scale = require("d3-scale");
 const _reactutilities = require("@fluentui/react-utilities");
 const _index = require("../../utilities/index");
 const _index1 = require("../../index");
+const _imageexportutils = require("../../utilities/image-export-utils");
 const MIN_DOMAIN_MARGIN = 8;
 const X1_INNER_PADDING = 0.1;
 // x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
@@ -51,6 +52,7 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
     let _xAxisOuterPadding = 0;
     const cartesianChartRef = _react.useRef(null);
     const Y_ORIGIN = 0;
+    const _legendsRef = _react.useRef(null);
     const [color, setColor] = _react.useState('');
     const [dataForHoverCard, setDataForHoverCard] = _react.useState(0);
     const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
@@ -80,7 +82,11 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
         return {
-            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
+            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,
+            toImage: (opts)=>{
+                var _cartesianChartRef_current, _legendsRef_current;
+                return (0, _imageexportutils.toImage)((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _useRtl, opts);
+            }
         };
     }, []);
     const _adjustProps = ()=>{
@@ -176,7 +182,8 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
             enabledWrapLines: props.enabledLegendsWrapLines,
             overflowText: props.legendsOverflowText,
             ...props.legendProps,
-            onChange: onLegendSelectionChange
+            onChange: onLegendSelectionChange,
+            legendRef: _legendsRef
         });
     };
     const points = props.data;
@@ -187,7 +194,7 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
     const _xAxisType = (0, _index.getTypeOfAxis)(points[0].name, true);
     const legends = _getLegendData(points);
     _adjustProps();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-anyAdd commentMore actions
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Add commentMore actions
     function _getMinMaxOfYAxis(datasetForBars, yAxisType, useSecondaryYScale) {
         const values = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -297,7 +304,13 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
         _calloutAnchorPoint = null;
         setPopoverOpen(false);
     };
-    const onBarFocus = (pointData, groupData, refArrayIndexNumber)=>{
+    const onBarFocus = (event, pointData, groupData, refArrayIndexNumber)=>{
+        let x = 0;
+        let y = 0;
+        const targetRect = event.target.getBoundingClientRect();
+        x = targetRect.left + targetRect.width / 2;
+        y = targetRect.top + targetRect.height / 2;
+        updatePosition(x, y);
         _refArray.forEach((obj, index)=>{
             if (obj.index === pointData.legend && refArrayIndexNumber === index) {
                 setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
@@ -326,58 +339,59 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
             const refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
             const pointData = singleSet[datasetKey];
             const yBarScale = pointData.useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
-            // To align the centers of the generated bandwidth and the calculated one when they differ,
-            // use the following addend.
-            const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _barWidth) / 2;
-            const startColor = pointData.color ? pointData.color : (0, _index.getNextColor)(index, 0);
-            const yBaseline = yBarScale(Y_ORIGIN);
-            let yPositiveStart = yBaseline;
-            let yNegativeStart = yBaseline;
-            let yPoint = Y_ORIGIN;
-            const barGap = VERTICAL_BAR_GAP / 2 * (index > 0 ? 2 : 0);
-            const height = Math.max(yBarScale(Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
-            if (pointData.data >= Y_ORIGIN) {
-                yPositiveStart -= height + barGap;
-                yPoint = yPositiveStart;
-            } else {
-                yPoint = yNegativeStart + barGap;
-                yNegativeStart = yPoint + height;
-            }
-            // Not rendering data with 0.
-            pointData.data && singleGroup.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
-                key: `${singleSet.indexNum}-${index}`
-            }, /*#__PURE__*/ _react.createElement("rect", {
-                className: classes.opacityChangeOnHover,
-                height: height,
-                width: _barWidth,
-                x: xPoint,
-                y: yPoint,
-                "data-is-focusable": !props.hideTooltip && (_legendHighlighted(pointData.legend) || _noLegendHighlighted()),
-                opacity: _getOpacity(pointData.legend),
-                ref: (e)=>{
-                    _refCallback(e, pointData.legend, refIndexNumber);
-                },
-                fill: startColor,
-                rx: 0,
-                onMouseOver: onBarHover.bind(null, pointData, singleSet),
-                onMouseMove: onBarHover.bind(null, pointData, singleSet),
-                onMouseOut: _onBarLeave,
-                onFocus: onBarFocus.bind(null, pointData, singleSet, refIndexNumber),
-                onBlur: _onBarLeave,
-                onClick: pointData.onClick,
-                "aria-label": getAriaLabel(pointData, singleSet.xAxisPoint),
-                tabIndex: _legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined,
-                role: "img"
-            })));
-            if (pointData.data && !props.hideLabels && _barWidth >= 16 && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())) {
-                barLabelsForGroup.push(/*#__PURE__*/ _react.createElement("text", {
-                    key: `${singleSet.indexNum}-${index}`,
-                    x: xPoint + _barWidth / 2,
-                    y: pointData.data >= Y_ORIGIN ? yPositiveStart - 6 : yNegativeStart + 12,
-                    textAnchor: "middle",
-                    className: classes.barLabel,
-                    "aria-hidden": true
-                }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(pointData.data) : (0, _index.formatScientificLimitWidth)(pointData.data)));
+            if (pointData) {
+                // To align the centers of the generated bandwidth and the calculated one when they differ,
+                // use the following addend.
+                const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _barWidth) / 2;
+                const startColor = pointData.color ? pointData.color : (0, _index.getNextColor)(index, 0);
+                const yBaseline = yBarScale(Y_ORIGIN);
+                let yPositiveStart = yBaseline;
+                let yNegativeStart = yBaseline;
+                let yPoint = Y_ORIGIN;
+                const barGap = VERTICAL_BAR_GAP / 2 * (index > 0 ? 2 : 0);
+                const height = Math.max(yBarScale(Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
+                if (pointData.data >= Y_ORIGIN) {
+                    yPositiveStart -= height + barGap;
+                    yPoint = yPositiveStart;
+                } else {
+                    yPoint = yNegativeStart + barGap;
+                    yNegativeStart = yPoint + height;
+                }
+                // Not rendering data with 0.
+                pointData.data && singleGroup.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
+                    key: `${singleSet.indexNum}-${index}`
+                }, /*#__PURE__*/ _react.createElement("rect", {
+                    className: classes.opacityChangeOnHover,
+                    height: height,
+                    width: _barWidth,
+                    x: xPoint,
+                    y: yPoint,
+                    opacity: _getOpacity(pointData.legend),
+                    ref: (e)=>{
+                        _refCallback(e, pointData.legend, refIndexNumber);
+                    },
+                    fill: startColor,
+                    rx: 0,
+                    onMouseOver: (event)=>onBarHover(pointData, singleSet, event),
+                    onMouseMove: (event)=>onBarHover(pointData, singleSet, event),
+                    onMouseOut: _onBarLeave,
+                    onFocus: (event)=>onBarFocus(event, pointData, singleSet, refIndexNumber),
+                    onBlur: _onBarLeave,
+                    onClick: pointData.onClick,
+                    "aria-label": getAriaLabel(pointData, singleSet.xAxisPoint),
+                    tabIndex: _legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined,
+                    role: "img"
+                })));
+                if (pointData.data && !props.hideLabels && _barWidth >= 16 && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())) {
+                    barLabelsForGroup.push(/*#__PURE__*/ _react.createElement("text", {
+                        key: `${singleSet.indexNum}-${index}`,
+                        x: xPoint + _barWidth / 2,
+                        y: pointData.data >= Y_ORIGIN ? yPositiveStart - 6 : yNegativeStart + 12,
+                        textAnchor: "middle",
+                        className: classes.barLabel,
+                        "aria-hidden": true
+                    }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(pointData.data) : (0, _index.formatScientificLimitWidth)(pointData.data)));
+                }
             }
         });
         // Used to display tooltip at x axis labels.
@@ -489,10 +503,13 @@ const GroupedVerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
                 const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * barWidth;
                 let reqWidth = (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate) * groupWidth;
                 const margin1 = (totalWidth - reqWidth) / 2;
-                // Calculate the remaining width after accounting for the space required to render x-axis labels
-                const step = (0, _index.calculateLongestLabelWidth)(xAxisLabels) + 20;
-                reqWidth = (xAxisLabels.length - _xAxisInnerPadding) * step;
-                const margin2 = (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 = (0, _index.calculateLongestLabelWidth)(_xAxisLabels) + 20;
+                    reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
+                    margin2 = (totalWidth - reqWidth) / 2;
+                }
                 _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
             }
         }