@fluentui/react-charting 5.24.31 → 5.24.32

package/lib-amd/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-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js

@@ -16,6 +16,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._isRtl = (0, Utilities_1.getRTL)();
             _this._legendColorMap = {};
             _this.Y_ORIGIN = 0;
+            _this._uniqDotId = (0, Utilities_1.getId)('gvbc_dot_');
             _this.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.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);
@@ -47,8 +48,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 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 = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, (0, index_1.calcBandwidth)(xScale0.bandwidth(), _this._legends.length, X1_INNER_PADDING));
-                _this._groupWidth = (0, index_1.calcRequiredWidth)(_this._barWidth, _this._legends.length, X1_INNER_PADDING);
+                _this._barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, (0, index_1.calcBandwidth)(xScale0.bandwidth(), _this._barLegends.length, X1_INNER_PADDING));
+                _this._groupWidth = (0, index_1.calcRequiredWidth)(_this._barWidth, _this._barLegends.length, X1_INNER_PADDING);
                 var xScale1 = _this._createX1Scale();
                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                 var allGroupsBars = [];
@@ -58,17 +59,19 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 _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,
                 };
@@ -84,22 +87,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 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 () {
@@ -112,22 +100,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _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) : '';
@@ -144,7 +117,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 // 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 = (0, index_1.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
@@ -152,7 +125,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     .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) {
@@ -220,10 +193,21 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     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(tslib_1.__assign(tslib_1.__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 = {};
@@ -239,9 +223,18 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     });
                     singleDatasetPointForBars.xAxisPoint = point.name;
                     singleDatasetPointForBars.indexNum = index;
-                    singleDatasetPointForBars.groupSeries = Object.values(legendToBarPoint);
+                    singleDatasetPointForBars.groupSeries = tslib_1.__spreadArray(tslib_1.__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;
             };
@@ -260,7 +253,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._createX1Scale = function () {
                 return ((0, d3_scale_1.scaleBand)()
-                    .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.
@@ -275,10 +268,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // 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);
@@ -288,7 +282,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         },
                     };
                     actions.push(legend);
-                });
+                };
+                _this._lineLegends.forEach(function (legendTitle) { return addLegendButton(legendTitle, true); });
+                _this._barLegends.forEach(function (legendTitle) { return addLegendButton(legendTitle); });
                 return (React.createElement(index_2.Legends, tslib_1.__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) {
@@ -333,7 +329,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         // Update the bar width so that when CartesianChart rerenders,
                         // the following calculations don't use the previous bar width.
                         _this._barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth);
-                        var groupWidth = (0, index_1.calcRequiredWidth)(_this._barWidth, _this._legends.length, X1_INNER_PADDING);
+                        var groupWidth = (0, index_1.calcRequiredWidth)(_this._barWidth, _this._barLegends.length, X1_INNER_PADDING);
                         /** Total width required to render the groups. Directly proportional to group width */
                         var reqWidth = (0, index_1.calcRequiredWidth)(groupWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                         if (totalWidth >= reqWidth) {
@@ -344,9 +340,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     else if (_this.props.mode === 'plotly' && _this._xAxisLabels.length > 1) {
                         // Calculate the remaining width after rendering groups at their maximum allowable width
                         var groupBandwidth = (0, index_1.calcBandwidth)(totalWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
-                        var barBandwidth = (0, index_1.calcBandwidth)(groupBandwidth, _this._legends.length, X1_INNER_PADDING);
+                        var barBandwidth = (0, index_1.calcBandwidth)(groupBandwidth, _this._barLegends.length, X1_INNER_PADDING);
                         var barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, barBandwidth);
-                        var groupWidth = (0, index_1.calcRequiredWidth)(barWidth, _this._legends.length, X1_INNER_PADDING);
+                        var groupWidth = (0, index_1.calcRequiredWidth)(barWidth, _this._barLegends.length, X1_INNER_PADDING);
                         var reqWidth = (0, index_1.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
@@ -361,7 +357,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _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) {
@@ -369,48 +366,71 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var colorInterpolator = (0, d3_scale_1.scaleLinear)().domain([0, 1]).range([color, targetColor]);
                 return (0, d3_color_1.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 tslib_1.__assign(tslib_1.__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
-                                : (0, index_1.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 tslib_1.__assign(tslib_1.__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
+                                    : (0, index_1.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 = (0, index_1.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 = (0, index_1.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 tslib_1.__assign(tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__assign(tslib_1.__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 = (0, index_1.getNextColor)(colorIndex, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                        }
+                        else {
+                            color = (0, index_1.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 tslib_1.__assign(tslib_1.__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 !== index_1.XAxisTypes.StringAxis) {
                     return [];
                 }
-                return (0, index_1.sortAxisCategories)(_this._mapCategoryToValues(points), _this.props.xAxisCategoryOrder);
+                return (0, index_1.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] = [];
                     }
@@ -418,10 +438,143 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         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 = (0, d3_selection_1.pointer)(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 = tslib_1.__assign(tslib_1.__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 };
+            };
             (0, Utilities_1.initializeComponentRef)(_this);
-            _this._createSet = (0, Utilities_1.memoizeFunction)(function (data) { return _this._createDataSetOfGVBC(data); });
+            _this._createSet = (0, Utilities_1.memoizeFunction)(function (barData, lineData) {
+                return _this._createDataSetOfGVBC(barData, lineData);
+            });
             _this.state = {
                 color: '',
                 dataForHoverCard: 0,
@@ -434,6 +587,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 hoverXValue: '',
                 calloutLegend: '',
                 activeLegend: '',
+                activeLinePoint: '',
             };
             (0, Utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
                 showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -448,6 +602,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._domainMargin = MIN_DOMAIN_MARGIN;
             _this._cartesianChartRef = React.createRef();
             _this._legendsRef = React.createRef();
+            _this._rectRef = React.createRef();
             return _this;
         }
         GroupedVerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
@@ -460,10 +615,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         };
         GroupedVerticalBarChartBase.prototype.render = function () {
             var _this = this;
-            var points = this._addDefaultColors(this.props.data);
-            this._xAxisType = (0, index_1.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 = (0, index_1.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
@@ -483,15 +639,18 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legendBars, xAxisType: this._xAxisType, createYAxis: index_1.createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: index_1.createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
+            return !this._isChartEmpty(barData, lineData) ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legendBars, xAxisType: this._xAxisType, createYAxis: index_1.createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: index_1.createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
                     direction: react_focus_1.FocusZoneDirection.horizontal,
                 }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_1.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", {
@@ -531,17 +690,18 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     ? [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 = (0, index_1.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 = (0, index_1.getScalePadding)(this.props.xAxisInnerPadding, undefined, 2 / (2 + (0, index_1.calcTotalBandUnits)(this._legends.length, X1_INNER_PADDING)));
+            this._xAxisInnerPadding = (0, index_1.getScalePadding)(this.props.xAxisInnerPadding, undefined, 2 / (2 + (0, index_1.calcTotalBandUnits)(this._barLegends.length, X1_INNER_PADDING)));
             this._xAxisOuterPadding = (0, index_1.getScalePadding)(this.props.xAxisOuterPadding);
         };
         GroupedVerticalBarChartBase.defaultProps = {