@fluentui/react-charting 5.24.31 → 5.24.33

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts

@@ -6,11 +6,13 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
     callOutAccessibilityData?: IAccessibilityProps;
     calloutLegend: string;
     selectedLegends: string[];
+    activeLinePoint: string;
 }
 export declare class GroupedVerticalBarChartBase extends React.Component<IGroupedVerticalBarChartProps, IGroupedVerticalBarChartState> implements IChart {
     static defaultProps: Partial<IGroupedVerticalBarChartProps>;
     private _createSet;
-    private _legends;
+    private _barLegends;
+    private _lineLegends;
     private _xAxisLabels;
     private _datasetForBars;
     private margins;
@@ -32,6 +34,8 @@ export declare class GroupedVerticalBarChartBase extends React.Component<IGroupe
     private _legendsRef;
     private _legendColorMap;
     private readonly Y_ORIGIN;
+    private _rectRef;
+    private _uniqDotId;
     constructor(props: IGroupedVerticalBarChartProps);
     componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void;
     render(): React.ReactNode;
@@ -76,7 +80,14 @@ export declare class GroupedVerticalBarChartBase extends React.Component<IGroupe
     private _adjustProps;
     private _getChartTitle;
     private _adjustColor;
-    private _addDefaultColors;
+    private _prepareChartData;
     private _getOrderedXAxisLabels;
     private _mapCategoryToValues;
+    private _createLines;
+    private _onLineHover;
+    private _onLineFocus;
+    private _showCalloutForLines;
+    private _showCallout;
+    private _getDotId;
+    private _processDataV2;
 }

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js

@@ -1,12 +1,12 @@
-import { __assign, __extends } from "tslib";
+import { __assign, __extends, __spreadArray } from "tslib";
 import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
-import { select as d3Select } from 'd3-selection';
+import { select as d3Select, pointer as d3Pointer } from 'd3-selection';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
 import { classNamesFunction, getId, getRTL, initializeComponentRef, memoizeFunction, warnDeprecations, } from '@fluentui/react/lib/Utilities';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, getNextColor, areArraysEqual, calculateLongestLabelWidth, sortAxisCategories, calcTotalWidth, calcBandwidth, calcTotalBandUnits, calcRequiredWidth, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, getNextColor, areArraysEqual, calculateLongestLabelWidth, sortAxisCategories, calcTotalWidth, calcBandwidth, calcTotalBandUnits, calcRequiredWidth, getColorFromToken, } from '../../utilities/index';
 import { CartesianChart, Legends, } from '../../index';
 import { toImage } from '../../utilities/image-export-utils';
 import { rgb } from 'd3-color';
@@ -24,6 +24,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _this._isRtl = getRTL();
         _this._legendColorMap = {};
         _this.Y_ORIGIN = 0;
+        _this._uniqDotId = getId('gvbc_dot_');
         _this.toImage = function (opts) {
             var _a, _b;
             return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
@@ -55,8 +56,8 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             var xScale0 = _this._createX0Scale(containerWidth);
             // 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.
-            _this._barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth, calcBandwidth(xScale0.bandwidth(), _this._legends.length, X1_INNER_PADDING));
-            _this._groupWidth = calcRequiredWidth(_this._barWidth, _this._legends.length, X1_INNER_PADDING);
+            _this._barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth, calcBandwidth(xScale0.bandwidth(), _this._barLegends.length, X1_INNER_PADDING));
+            _this._groupWidth = calcRequiredWidth(_this._barWidth, _this._barLegends.length, X1_INNER_PADDING);
             var xScale1 = _this._createX1Scale();
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             var allGroupsBars = [];
@@ -66,17 +67,19 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             _this._groupedVerticalBarGraph = allGroupsBars;
         };
         _this._getMargins = function (margins) { return (_this.margins = margins); };
-        _this._createDataSetOfGVBC = function (points) {
-            var legends = new Set();
-            var xAxisLabels = _this._getOrderedXAxisLabels(points);
-            points.forEach(function (point) {
+        _this._createDataSetOfGVBC = function (barData, lineData) {
+            var barLegends = new Set();
+            barData.forEach(function (point) {
                 point.series.forEach(function (seriesPoint) {
-                    legends.add(seriesPoint.legend);
+                    barLegends.add(seriesPoint.legend);
                 });
             });
-            var datasetForBars = _this._createDataset(points);
+            var lineLegends = new Set(lineData.map(function (series) { return series.legend; }));
+            var xAxisLabels = _this._getOrderedXAxisLabels(barData, lineData);
+            var datasetForBars = _this._createDataset(barData, lineData);
             return {
-                legends: Array.from(legends),
+                barLegends: Array.from(barLegends),
+                lineLegends: Array.from(lineLegends),
                 xAxisLabels: xAxisLabels,
                 datasetForBars: datasetForBars,
             };
@@ -92,22 +95,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             mouseEvent.persist();
             if (_this._calloutAnchorPoint !== pointData) {
                 _this._calloutAnchorPoint = pointData;
-                _this.setState({
-                    refSelected: mouseEvent,
-                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
-                    isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(pointData.legend),
-                    calloutLegend: pointData.legend,
-                    dataForHoverCard: pointData.data,
-                    color: pointData.color,
-                    xCalloutValue: pointData.xAxisCalloutData,
-                    yCalloutValue: pointData.yAxisCalloutData,
-                    dataPointCalloutProps: pointData,
-                    callOutAccessibilityData: _this.props.isCalloutForStack
-                        ? groupData.stackCallOutAccessibilityData
-                        : pointData.callOutAccessibilityData,
-                    YValueHover: groupData.groupSeries,
-                    hoverXValue: pointData.xAxisCalloutData,
-                });
+                _this._showCallout(mouseEvent, pointData, groupData);
             }
         };
         _this._onBarLeave = function () {
@@ -120,22 +108,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _this._onBarFocus = function (pointData, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         groupData, focusEvent) {
-            _this.setState({
-                refSelected: focusEvent.currentTarget,
-                /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
-                isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(pointData.legend),
-                calloutLegend: pointData.legend,
-                dataForHoverCard: pointData.data,
-                color: pointData.color,
-                xCalloutValue: pointData.xAxisCalloutData,
-                yCalloutValue: pointData.yAxisCalloutData,
-                dataPointCalloutProps: pointData,
-                callOutAccessibilityData: _this.props.isCalloutForStack
-                    ? groupData.stackCallOutAccessibilityData
-                    : pointData.callOutAccessibilityData,
-                YValueHover: groupData.groupSeries,
-                hoverXValue: pointData.xAxisCalloutData,
-            });
+            _this._showCallout(focusEvent.currentTarget, pointData, groupData);
         };
         _this._redirectToUrl = function (href) {
             href ? (window.location.href = href) : '';
@@ -152,7 +125,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             var barLabelsForGroup = [];
             // Get the actual legends present at this x-axis point
-            var presentLegends = Object.keys(singleSet).filter(function (key) { return key in _this._legendColorMap; });
+            var presentLegends = _this._barLegends.filter(function (key) { return key in singleSet; });
             var effectiveGroupWidth = calcRequiredWidth(_this._barWidth, presentLegends.length, X1_INNER_PADDING);
             // For stacked bars, center the single bar group in the available space
             // Instead of using the global legend position, use the local position within present legends
@@ -160,7 +133,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 .domain(presentLegends)
                 .range(_this._isRtl ? [effectiveGroupWidth, 0] : [0, effectiveGroupWidth])
                 .paddingInner(X1_INNER_PADDING);
-            _this._legends.forEach(function (legendTitle, legendIndex) {
+            _this._barLegends.forEach(function (legendTitle, legendIndex) {
                 var _a;
                 var barPoints = singleSet[legendTitle];
                 if (barPoints) {
@@ -228,10 +201,21 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 singleGroup,
                 barLabelsForGroup));
         };
-        _this._createDataset = function (points) {
+        _this._createDataset = function (barData, lineData) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var datasetForBars = [];
-            points.forEach(function (point, index) {
+            var linePointsByX = {};
+            var visitedX = new Set();
+            lineData.forEach(function (series) {
+                series.data.forEach(function (point) {
+                    if (!linePointsByX[point.x]) {
+                        linePointsByX[point.x] = [];
+                    }
+                    linePointsByX[point.x].push(__assign(__assign({}, point), { legend: series.legend, color: series.color, data: point.y, useSecondaryYScale: series.useSecondaryYScale }));
+                });
+            });
+            barData.forEach(function (point, index) {
+                var _a;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var singleDatasetPointForBars = {};
                 var legendToBarPoint = {};
@@ -247,9 +231,18 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 });
                 singleDatasetPointForBars.xAxisPoint = point.name;
                 singleDatasetPointForBars.indexNum = index;
-                singleDatasetPointForBars.groupSeries = Object.values(legendToBarPoint);
+                singleDatasetPointForBars.groupSeries = __spreadArray(__spreadArray([], Object.values(legendToBarPoint), true), ((_a = linePointsByX[point.name]) !== null && _a !== void 0 ? _a : []), true);
                 singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
                 datasetForBars.push(singleDatasetPointForBars);
+                visitedX.add(point.name);
+            });
+            Object.keys(linePointsByX).forEach(function (xPoint) {
+                if (!visitedX.has(xPoint)) {
+                    datasetForBars.push({
+                        xAxisPoint: xPoint,
+                        groupSeries: linePointsByX[xPoint],
+                    });
+                }
             });
             return datasetForBars;
         };
@@ -268,7 +261,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this._createX1Scale = function () {
             return (d3ScaleBand()
-                .domain(_this._legends)
+                .domain(_this._barLegends)
                 // When there is only one group, xScale0 adds padding around it,
                 // causing the bandwidth to become smaller than the actual group width.
                 // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.
@@ -283,10 +276,11 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         _this._getLegendData = function () {
             var actions = [];
-            _this._legends.forEach(function (legendTitle) {
+            var addLegendButton = function (legendTitle, isLineLegendInBarChart) {
                 var legend = {
                     title: legendTitle,
                     color: _this._legendColorMap[legendTitle][0],
+                    isLineLegendInBarChart: isLineLegendInBarChart,
                     hoverAction: function () {
                         _this._handleChartMouseLeave();
                         _this._onLegendHover(legendTitle);
@@ -296,7 +290,9 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                     },
                 };
                 actions.push(legend);
-            });
+            };
+            _this._lineLegends.forEach(function (legendTitle) { return addLegendButton(legendTitle, true); });
+            _this._barLegends.forEach(function (legendTitle) { return addLegendButton(legendTitle); });
             return (React.createElement(Legends, __assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, enabledWrapLines: _this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef })));
         };
         _this._getAxisData = function (yAxisData) {
@@ -341,7 +337,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                     // Update the bar width so that when CartesianChart rerenders,
                     // the following calculations don't use the previous bar width.
                     _this._barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth);
-                    var groupWidth = calcRequiredWidth(_this._barWidth, _this._legends.length, X1_INNER_PADDING);
+                    var groupWidth = calcRequiredWidth(_this._barWidth, _this._barLegends.length, X1_INNER_PADDING);
                     /** Total width required to render the groups. Directly proportional to group width */
                     var reqWidth = calcRequiredWidth(groupWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                     if (totalWidth >= reqWidth) {
@@ -352,9 +348,9 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 else if (_this.props.mode === 'plotly' && _this._xAxisLabels.length > 1) {
                     // Calculate the remaining width after rendering groups at their maximum allowable width
                     var groupBandwidth = calcBandwidth(totalWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
-                    var barBandwidth = calcBandwidth(groupBandwidth, _this._legends.length, X1_INNER_PADDING);
+                    var barBandwidth = calcBandwidth(groupBandwidth, _this._barLegends.length, X1_INNER_PADDING);
                     var barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth, barBandwidth);
-                    var groupWidth = calcRequiredWidth(barWidth, _this._legends.length, X1_INNER_PADDING);
+                    var groupWidth = calcRequiredWidth(barWidth, _this._barLegends.length, X1_INNER_PADDING);
                     var reqWidth = calcRequiredWidth(groupWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                     var margin1 = (totalWidth - reqWidth) / 2;
                     // Calculate the remaining width after accounting for the space required to render x-axis labels
@@ -369,7 +365,8 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _this._getChartTitle = function () {
             var chartTitle = _this.props.chartTitle;
             return ((chartTitle ? "".concat(chartTitle, ". ") : '') +
-                "Vertical bar chart with ".concat(_this._xAxisLabels.length, " groups of ").concat(_this._legends.length, " bars each. "));
+                "Vertical bar chart with ".concat(_this._barLegends.length, " grouped bar series") +
+                (_this._lineLegends.length > 0 ? " and ".concat(_this._lineLegends.length, " line series. ") : '. '));
         };
         // Lighten/Darken a color by a given percentage using d3-scale
         _this._adjustColor = function (color, percentage, lightenColor, isDarkTheme) {
@@ -377,48 +374,71 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             var colorInterpolator = d3ScaleLinear().domain([0, 1]).range([color, targetColor]);
             return rgb(colorInterpolator(percentage)).formatRgb();
         };
-        _this._addDefaultColors = function (data) {
+        _this._prepareChartData = function () {
             var _a;
+            var _b, _c;
+            var barData = _this.props.data;
+            var lineData;
+            if (Array.isArray(_this.props.dataV2) && _this.props.dataV2.length > 0) {
+                (_a = _this._processDataV2(_this.props.dataV2), barData = _a.barData, lineData = _a.lineData);
+            }
             _this._legendColorMap = {};
             var colorIndex = 0;
-            return ((_a = data === null || data === void 0 ? void 0 : data.map(function (point) {
-                var _a, _b;
-                return __assign(__assign({}, point), { series: (_b = (_a = point.series) === null || _a === void 0 ? void 0 : _a.map(function (seriesPoint) {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        var startColor = seriesPoint.color
-                            ? seriesPoint.color
-                            : getNextColor(colorIndex, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
-                        var endColor = startColor;
-                        if (_this.props.enableGradient) {
-                            if (seriesPoint.color) {
-                                // Generate gradient colors based on seriesPoint.color
-                                startColor = _this._adjustColor(seriesPoint.color || endColor, 0.2, false, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
-                                endColor = _this._adjustColor(seriesPoint.color || startColor, 0.2, true, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
+            return {
+                barData: (_b = barData === null || barData === void 0 ? void 0 : barData.map(function (point) {
+                    var _a, _b;
+                    return __assign(__assign({}, point), { series: (_b = (_a = point.series) === null || _a === void 0 ? void 0 : _a.map(function (seriesPoint) {
+                            var _a, _b, _c, _d, _e, _f, _g;
+                            var startColor = seriesPoint.color
+                                ? seriesPoint.color
+                                : getNextColor(colorIndex, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                            var endColor = startColor;
+                            if (_this.props.enableGradient) {
+                                if (seriesPoint.color) {
+                                    // Generate gradient colors based on seriesPoint.color
+                                    startColor = _this._adjustColor(seriesPoint.color || endColor, 0.2, false, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                                    endColor = _this._adjustColor(seriesPoint.color || startColor, 0.2, true, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
+                                }
+                                else {
+                                    var nextGradient = getNextGradient(colorIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted);
+                                    startColor = ((_e = seriesPoint.gradient) === null || _e === void 0 ? void 0 : _e[0]) || nextGradient[0];
+                                    endColor = ((_f = seriesPoint.gradient) === null || _f === void 0 ? void 0 : _f[1]) || nextGradient[1];
+                                }
                             }
-                            else {
-                                var nextGradient = getNextGradient(colorIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted);
-                                startColor = ((_e = seriesPoint.gradient) === null || _e === void 0 ? void 0 : _e[0]) || nextGradient[0];
-                                endColor = ((_f = seriesPoint.gradient) === null || _f === void 0 ? void 0 : _f[1]) || nextGradient[1];
+                            var pointGradient = [startColor, endColor];
+                            if (!_this._legendColorMap[seriesPoint.legend]) {
+                                _this._legendColorMap[seriesPoint.legend] = [startColor, endColor];
                             }
-                        }
-                        var pointGradient = [startColor, endColor];
-                        if (!_this._legendColorMap[seriesPoint.legend]) {
-                            _this._legendColorMap[seriesPoint.legend] = [startColor, endColor];
-                        }
-                        colorIndex += 1;
-                        return __assign(__assign(__assign({}, seriesPoint), { color: (_g = seriesPoint.color) !== null && _g !== void 0 ? _g : _this._legendColorMap[seriesPoint.legend][0] }), (_this.props.enableGradient ? { gradient: pointGradient } : {}));
-                    })) !== null && _b !== void 0 ? _b : [] });
-            })) !== null && _a !== void 0 ? _a : []);
+                            colorIndex += 1;
+                            return __assign(__assign(__assign({}, seriesPoint), { color: (_g = seriesPoint.color) !== null && _g !== void 0 ? _g : _this._legendColorMap[seriesPoint.legend][0] }), (_this.props.enableGradient ? { gradient: pointGradient } : {}));
+                        })) !== null && _b !== void 0 ? _b : [] });
+                })) !== null && _b !== void 0 ? _b : [],
+                lineData: (_c = lineData === null || lineData === void 0 ? void 0 : lineData.map(function (series) {
+                    var _a, _b;
+                    var color;
+                    if (typeof series.color === 'undefined') {
+                        color = getNextColor(colorIndex, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    }
+                    else {
+                        color = getColorFromToken(series.color, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                    }
+                    if (!_this._legendColorMap[series.legend]) {
+                        _this._legendColorMap[series.legend] = [color, color];
+                    }
+                    colorIndex += 1;
+                    return __assign(__assign({}, series), { color: _this._legendColorMap[series.legend][0] });
+                })) !== null && _c !== void 0 ? _c : [],
+            };
         };
-        _this._getOrderedXAxisLabels = function (points) {
+        _this._getOrderedXAxisLabels = function (barData, lineData) {
             if (_this._xAxisType !== XAxisTypes.StringAxis) {
                 return [];
             }
-            return sortAxisCategories(_this._mapCategoryToValues(points), _this.props.xAxisCategoryOrder);
+            return sortAxisCategories(_this._mapCategoryToValues(barData, lineData), _this.props.xAxisCategoryOrder);
         };
-        _this._mapCategoryToValues = function (points) {
+        _this._mapCategoryToValues = function (barData, lineData) {
             var categoryToValues = {};
-            points.forEach(function (point) {
+            barData.forEach(function (point) {
                 if (!categoryToValues[point.name]) {
                     categoryToValues[point.name] = [];
                 }
@@ -426,10 +446,143 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                     categoryToValues[point.name].push(seriesPoint.data);
                 });
             });
+            lineData.forEach(function (series) {
+                series.data.forEach(function (point) {
+                    if (!categoryToValues[point.x]) {
+                        categoryToValues[point.x] = [];
+                    }
+                    categoryToValues[point.x].push(point.y);
+                });
+            });
             return categoryToValues;
         };
+        _this._createLines = function (lineData, xScale, yScalePrimary, yScaleSecondary) {
+            var lineBorders = [];
+            var lines = [];
+            var dots = [];
+            var scaleLineX = function (x) { return xScale(x) + xScale.bandwidth() / 2; };
+            lineData.forEach(function (series, seriesIdx) {
+                var _a;
+                var lineBorderGroup = [];
+                var lineGroup = [];
+                var dotGroup = [];
+                var lineBorderWidth = ((_a = series.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderWidth)
+                    ? Number.parseFloat(series.lineOptions.lineBorderWidth.toString())
+                    : 0;
+                var yScale = series.useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+                var shouldHighlight = _this._legendHighlighted(series.legend) || _this._noLegendHighlighted();
+                series.data.forEach(function (point, pointIdx) {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    var x2 = scaleLineX(point.x);
+                    var y2 = yScale(point.y);
+                    if (pointIdx > 0) {
+                        var x1 = scaleLineX(series.data[pointIdx - 1].x);
+                        var y1 = yScale(series.data[pointIdx - 1].y);
+                        if (lineBorderWidth > 0) {
+                            lineBorderGroup.push(React.createElement("line", { key: "lineBorder-".concat(seriesIdx, "-").concat(pointIdx), x1: x1, y1: y1, x2: x2, y2: y2, fill: "transparent", stroke: (_b = (_a = series.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderColor) !== null && _b !== void 0 ? _b : _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3 + lineBorderWidth * 2, strokeLinecap: "round", opacity: shouldHighlight ? 1 : 0.1 }));
+                        }
+                        lineGroup.push(React.createElement("line", { key: "line-".concat(seriesIdx, "-").concat(pointIdx), x1: x1, y1: y1, x2: x2, y2: y2, stroke: series.color, strokeWidth: (_d = (_c = series.lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) !== null && _d !== void 0 ? _d : 3, strokeLinecap: (_f = (_e = series.lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeDasharray: (_g = series.lineOptions) === null || _g === void 0 ? void 0 : _g.strokeDasharray, opacity: shouldHighlight ? 1 : 0.1, onMouseOver: function (e) { return _this._onLineHover(e, series, seriesIdx, pointIdx, scaleLineX); }, onMouseLeave: _this._onBarLeave }));
+                    }
+                    var dotId = _this._getDotId(seriesIdx, pointIdx);
+                    var activeLinePoint = _this.state.activeLinePoint;
+                    var isLinePointActive = activeLinePoint === point.x || activeLinePoint === dotId;
+                    dotGroup.push(React.createElement("circle", { key: dotId, id: dotId, cx: x2, cy: y2, r: shouldHighlight && isLinePointActive ? 8 : 0.3, fill: _this.props.theme.semanticColors.bodyBackground, stroke: series.color, strokeWidth: 3, opacity: shouldHighlight ? 1 : 0.1, onMouseOver: function (e) { return _this._onLineHover(e, series, seriesIdx, pointIdx, scaleLineX); }, onMouseLeave: _this._onBarLeave, "data-is-focusable": shouldHighlight, onFocus: function (e) { return _this._onLineFocus(e, series, seriesIdx, pointIdx); }, onBlur: _this._onBarLeave, role: "img", "aria-label": _this._getAriaLabel({
+                            xAxisCalloutData: point.xAxisCalloutData,
+                            legend: series.legend,
+                            yAxisCalloutData: point.yAxisCalloutData,
+                            data: point.y,
+                            callOutAccessibilityData: point.callOutAccessibilityData,
+                        }, point.x) }));
+                });
+                lineBorders.push(React.createElement("g", { key: "lineBorderGroup-".concat(seriesIdx) }, lineBorderGroup));
+                lines.push(React.createElement("g", { key: "lineGroup-".concat(seriesIdx) }, lineGroup));
+                dots.push(React.createElement("g", { key: "dotGroup-".concat(seriesIdx) }, dotGroup));
+            });
+            return dots.length > 0 ? (React.createElement("g", null,
+                lineBorders.length > 0 ? React.createElement("g", null, lineBorders) : null,
+                lines.length > 0 ? React.createElement("g", null, lines) : null,
+                React.createElement("g", null, dots))) : null;
+        };
+        _this._onLineHover = function (event, series, seriesIdx, pointIdx, scaleLineX) {
+            var pointerX = d3Pointer(event, _this._rectRef.current)[0];
+            var closestPointIdx = pointIdx;
+            if (pointIdx > 0) {
+                var currPointPos = scaleLineX(series.data[pointIdx].x);
+                var prevPointPos = scaleLineX(series.data[pointIdx - 1].x);
+                if (Math.abs(prevPointPos - pointerX) < Math.abs(currPointPos - pointerX)) {
+                    closestPointIdx = pointIdx - 1;
+                }
+            }
+            event.persist();
+            _this._showCalloutForLines(event, series, seriesIdx, closestPointIdx);
+        };
+        _this._onLineFocus = function (event, series, seriesIdx, pointIdx) {
+            _this._showCalloutForLines(event.currentTarget, series, seriesIdx, pointIdx);
+        };
+        _this._showCalloutForLines = function (target, series, seriesIdx, pointIdx) {
+            var point = series.data[pointIdx];
+            var pointData = __assign(__assign({}, point), { legend: series.legend, color: series.color, key: series.legend, data: point.y, yAxisCalloutData: point.yAxisCalloutData });
+            var groupData = _this._datasetForBars.find(function (singleSet) { return singleSet.xAxisPoint === point.x; });
+            _this._showCallout(target, pointData, groupData, _this._getDotId(seriesIdx, pointIdx));
+        };
+        _this._showCallout = function (target, pointData, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        groupData, activeLinePoint) {
+            var _a, _b;
+            if (activeLinePoint === void 0) { activeLinePoint = ''; }
+            _this.setState({
+                refSelected: target,
+                isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(pointData.legend),
+                calloutLegend: pointData.legend,
+                dataForHoverCard: pointData.data,
+                color: pointData.color,
+                xCalloutValue: (_a = pointData.xAxisCalloutData) !== null && _a !== void 0 ? _a : groupData.xAxisPoint,
+                yCalloutValue: pointData.yAxisCalloutData,
+                dataPointCalloutProps: pointData,
+                callOutAccessibilityData: _this.props.isCalloutForStack
+                    ? groupData.stackCallOutAccessibilityData
+                    : pointData.callOutAccessibilityData,
+                YValueHover: groupData.groupSeries.filter(function (item) { return _this._noLegendHighlighted() || _this._legendHighlighted(item.legend); }),
+                hoverXValue: (_b = pointData.xAxisCalloutData) !== null && _b !== void 0 ? _b : groupData.xAxisPoint,
+                activeLinePoint: _this.props.isCalloutForStack ? groupData.xAxisPoint : activeLinePoint,
+            });
+        };
+        _this._getDotId = function (seriesIdx, pointIdx) {
+            return _this._uniqDotId + "-".concat(seriesIdx, "-").concat(pointIdx);
+        };
+        _this._processDataV2 = function (dataV2) {
+            var barPointsByX = {};
+            var lineData = [];
+            dataV2.forEach(function (series) {
+                if (series.type === 'bar') {
+                    series.data.forEach(function (point) {
+                        var _a, _b;
+                        if (!barPointsByX[point.x]) {
+                            barPointsByX[point.x] = { name: point.x, series: [] };
+                        }
+                        barPointsByX[point.x].series.push({
+                            key: (_a = series.key) !== null && _a !== void 0 ? _a : series.legend,
+                            data: point.y,
+                            color: (_b = point.color) !== null && _b !== void 0 ? _b : series.color,
+                            gradient: series.gradient,
+                            legend: series.legend,
+                            xAxisCalloutData: point.xAxisCalloutData,
+                            yAxisCalloutData: point.yAxisCalloutData,
+                            onClick: point.onClick,
+                            useSecondaryYScale: series.useSecondaryYScale,
+                        });
+                    });
+                }
+                else if (series.type === 'line') {
+                    lineData.push(series);
+                }
+            });
+            return { barData: Object.values(barPointsByX), lineData: lineData };
+        };
         initializeComponentRef(_this);
-        _this._createSet = memoizeFunction(function (data) { return _this._createDataSetOfGVBC(data); });
+        _this._createSet = memoizeFunction(function (barData, lineData) {
+            return _this._createDataSetOfGVBC(barData, lineData);
+        });
         _this.state = {
             color: '',
             dataForHoverCard: 0,
@@ -442,6 +595,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             hoverXValue: '',
             calloutLegend: '',
             activeLegend: '',
+            activeLinePoint: '',
         };
         warnDeprecations(COMPONENT_NAME, props, {
             showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -456,6 +610,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _this._domainMargin = MIN_DOMAIN_MARGIN;
         _this._cartesianChartRef = React.createRef();
         _this._legendsRef = React.createRef();
+        _this._rectRef = React.createRef();
         return _this;
     }
     GroupedVerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
@@ -468,10 +623,11 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
     };
     GroupedVerticalBarChartBase.prototype.render = function () {
         var _this = this;
-        var points = this._addDefaultColors(this.props.data);
-        this._xAxisType = getTypeOfAxis(points[0].name, true);
-        var _a = this._createSet(points), legends = _a.legends, xAxisLabels = _a.xAxisLabels, datasetForBars = _a.datasetForBars;
-        this._legends = legends;
+        var _a = this._prepareChartData(), barData = _a.barData, lineData = _a.lineData;
+        this._xAxisType = getTypeOfAxis(barData[0].name, true);
+        var _b = this._createSet(barData, lineData), barLegends = _b.barLegends, lineLegends = _b.lineLegends, xAxisLabels = _b.xAxisLabels, datasetForBars = _b.datasetForBars;
+        this._barLegends = barLegends;
+        this._lineLegends = lineLegends;
         this._xAxisLabels = xAxisLabels;
         this._datasetForBars = datasetForBars;
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -491,15 +647,18 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             tickValues: this.props.tickValues,
             tickFormat: this.props.tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legendBars, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
+        return !this._isChartEmpty(barData, lineData) ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legendBars, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
                 direction: FocusZoneDirection.horizontal,
             }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
             xAxisInnerPadding: this._xAxisInnerPadding,
             xAxisOuterPadding: this._xAxisOuterPadding,
         }), { barwidth: this._barWidth, ref: this._cartesianChartRef, 
             /* eslint-disable react/jsx-no-bind */
-            children: function () {
-                return React.createElement("g", null, _this._groupedVerticalBarGraph);
+            children: function (props) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("rect", { ref: _this._rectRef, width: "100%", height: "100%", fill: "transparent", style: { pointerEvents: 'none' } }),
+                    React.createElement("g", null, _this._groupedVerticalBarGraph),
+                    _this._createLines(lineData, props.xScale, props.yScalePrimary, props.yScaleSecondary)));
             } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
     Object.defineProperty(GroupedVerticalBarChartBase.prototype, "chartContainer", {
@@ -539,17 +698,18 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 ? [this.state.activeLegend]
                 : [];
     };
-    GroupedVerticalBarChartBase.prototype._isChartEmpty = function () {
-        return !(this.props.data &&
-            this.props.data.length > 0 &&
-            this.props.data.filter(function (item) { return item.series.length; }).length > 0);
+    GroupedVerticalBarChartBase.prototype._isChartEmpty = function (barData, lineData) {
+        return !((barData &&
+            barData.length > 0 &&
+            barData.filter(function (item) { return item.series.length; }).length > 0) ||
+            (lineData && lineData.length > 0 && lineData.some(function (series) { return series.data.length > 0; })));
     };
     GroupedVerticalBarChartBase.prototype._adjustProps = function () {
         this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);
         // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
         // space_between_groups = 2 * bar_width
         // group_width = this._legends.length * bar_width + (this._legends.length - 1) * space_between_bars
-        this._xAxisInnerPadding = getScalePadding(this.props.xAxisInnerPadding, undefined, 2 / (2 + calcTotalBandUnits(this._legends.length, X1_INNER_PADDING)));
+        this._xAxisInnerPadding = getScalePadding(this.props.xAxisInnerPadding, undefined, 2 / (2 + calcTotalBandUnits(this._barLegends.length, X1_INNER_PADDING)));
         this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding);
     };
     GroupedVerticalBarChartBase.defaultProps = {