@fluentui/react-charting 5.24.31 → 5.24.33

package/lib-amd/components/LineChart/LineChart.base.js

@@ -315,11 +315,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var formattedDate = xPointToHighlight instanceof Date
                     ? (0, chart_utilities_1.formatDateToLocaleString)(xPointToHighlight, _this_1.props.culture, _this_1.props.useUTC)
                     : xPointToHighlight;
-                var modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var found = (0, Utilities_1.find)(_this_1._calloutPoints, function (element) {
-                    return element.x === modifiedXVal;
-                });
+                var found = (0, index_3.findCalloutPoints)(_this_1._calloutPoints, xPointToHighlight);
                 var pointToHighlight = lineChartData[linenumber].data[index];
                 var pointToHighlightUpdated = _this_1.state.nearestCircleToHighlight === null ||
                     (_this_1.state.nearestCircleToHighlight !== null &&
@@ -362,8 +358,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._handleFocus = function (lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
                 _this_1._uniqueCallOutID = circleId;
                 var formattedData = x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(x, _this_1.props.culture, _this_1.props.useUTC) : x;
-                var xVal = x instanceof Date ? x.getTime() : x;
-                var found = (0, Utilities_1.find)(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+                var found = (0, index_3.findCalloutPoints)(_this_1._calloutPoints, x);
                 // if no points need to be called out then don't show vertical line and callout card
                 if (found) {
                     var _this_2 = _this_1;
@@ -394,16 +389,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor, mouseEvent) {
                 mouseEvent.persist();
                 var formattedData = x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(x, _this_1.props.culture, _this_1.props.useUTC) : x;
-                var xVal = x instanceof Date ? x.getTime() : x;
-                var yVal = y instanceof Date ? y.getTime() : y;
                 var _this = _this_1;
-                var found = (0, Utilities_1.find)(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+                var found = (0, index_3.findCalloutPoints)(_this_1._calloutPoints, x);
                 var hoverDp = undefined;
                 if (_this_1.props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
-                    var dp = (0, Utilities_1.find)(found.values, function (val) { return (val === null || val === void 0 ? void 0 : val.y) === yVal; });
+                    var dp = (0, Utilities_1.find)(found.values, function (val) { return (val === null || val === void 0 ? void 0 : val.y) === y; });
                     if (dp) {
                         hoverDp = {
-                            x: xVal,
+                            x: x,
                             values: [dp],
                         };
                     }
@@ -421,7 +414,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             refSelected: "#".concat(circleId),
                             hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
                             YValueHover: found.values,
-                            YValue: yVal,
+                            YValue: y,
                             legendVal: legendVal,
                             lineColor: lineColor,
                             stackCalloutProps: found,
@@ -608,7 +601,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._refArray = [];
             _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
             _this_1._colorFillBars = [];
-            _this_1._calloutPoints = (0, index_3.calloutData)(_this_1._points) || [];
+            _this_1._calloutPoints = (0, index_3.calloutData)(_this_1._points) || {};
             _this_1._circleId = (0, Utilities_1.getId)('circle');
             _this_1._lineId = (0, Utilities_1.getId)('lineID');
             _this_1._borderId = (0, Utilities_1.getId)('borderID');
@@ -644,7 +637,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 prevProps.width !== this.props.width ||
                 prevProps.data !== this.props.data) {
                 this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
-                this._calloutPoints = (0, index_3.calloutData)(this._points) || [];
+                this._calloutPoints = (0, index_3.calloutData)(this._points) || {};
             }
         };
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -769,7 +762,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
             var _this_1 = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             var lines = [];
             if (this.state.isSelectedLegend) {
@@ -813,12 +806,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     })
                     : 0;
                 if (this_1._points[i].data.length === 1) {
-                    var _27 = this_1._points[i].data[0], x1_1 = _27.x, y1 = _27.y, xAxisCalloutData_1 = _27.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _27.xAxisCalloutAccessibilityData;
+                    var _28 = this_1._points[i].data[0], x1_1 = _28.x, y1 = _28.y, xAxisCalloutData_1 = _28.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _28.xAxisCalloutAccessibilityData;
                     var xPoint = this_1._xAxisScale(x1_1);
                     var yPoint = yScale(y1);
                     if ((0, index_3.isPlottable)(xPoint, yPoint)) {
                         var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
-                        var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                        var isLegendSelected_1 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentMarkerSize = this_1._points[i].data[0].markerSize;
                         var supportsTextMode = (_b = (_a = this_1._points[i].lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes('text');
                         var text = this_1._points[i].data[0].text;
@@ -827,14 +820,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                     ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
                                     : activePoint === circleId_1
                                         ? 5.5
-                                        : 3.5, cx: xPoint, cy: yPoint, fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
+                                        : 3.5, cx: xPoint, cy: yPoint, fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected_1 ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected_1, ref: function (e) {
                                     _this_1._refCallback(e, circleId_1);
                                 }, onFocus: function () {
                                     return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1);
                                 }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))),
                             !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: xPoint, y: yPoint +
                                     Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
-                                    12, className: classNames.markerLabel, opacity: isLegendSelected ? 1 : 0.1 }, text))));
+                                    12, className: classNames.markerLabel, opacity: isLegendSelected_1 ? 1 : 0.1 }, text))));
                     }
                 }
                 var gapIndex = 0;
@@ -852,7 +845,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     var lineId = "".concat(this_1._lineId, "_").concat(i);
                     var borderId = "".concat(this_1._borderId, "_").concat(i);
                     var strokeWidth = ((_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
-                    var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                    var isLegendSelected_2 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var lineData = [];
                     for (var k = 0; k < this_1._points[i].data.length; k++) {
                         lineData.push([
@@ -865,7 +858,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     // Check if lines should be drawn based on mode
                     var lineMode = (_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.mode;
                     var shouldDrawLines = lineMode !== 'markers';
-                    if (shouldDrawLines && isLegendSelected) {
+                    if (shouldDrawLines && isLegendSelected_2) {
                         var lineBorderWidth = ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.lineBorderWidth)
                             ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                             : 0;
@@ -884,7 +877,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     var showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
                     if (showMarkers) {
                         for (var k = 0; k < this_1._points[i].data.length; k++) {
-                            var _28 = this_1._points[i].data[k], x = _28.x, y = _28.y;
+                            var _29 = this_1._points[i].data[k], x = _29.x, y = _29.y;
                             var xPoint = this_1._xAxisScale(x instanceof Date ? x.getTime() : x);
                             var yPoint = yScale(y);
                             if ((0, index_3.isPlottable)(xPoint, yPoint)) {
@@ -896,7 +889,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                             ? 5.5
                                             : 3.5, cx: xPoint, cy: yPoint, fill: activePoint === this_1._circleId
                                         ? theme.semanticColors.bodyBackground
-                                        : perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity: isLegendSelected ? 1 : 0.1, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
+                                        : perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity: isLegendSelected_2 ? 1 : 0.1, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
                             }
                         }
                     }
@@ -909,14 +902,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
                         var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
-                        var _29 = this_1._points[i].data[j - 1], x1 = _29.x, y1 = _29.y, xAxisCalloutData = _29.xAxisCalloutData, xAxisCalloutAccessibilityData = _29.xAxisCalloutAccessibilityData;
-                        var _30 = this_1._points[i].data[j], x2 = _30.x, y2 = _30.y;
+                        var _30 = this_1._points[i].data[j - 1], x1 = _30.x, y1 = _30.y, xAxisCalloutData = _30.xAxisCalloutData, xAxisCalloutAccessibilityData = _30.xAxisCalloutAccessibilityData;
+                        var _31 = this_1._points[i].data[j], x2 = _31.x, y2 = _31.y;
                         var xPoint1 = this_1._xAxisScale(x1);
                         var yPoint1 = yScale(y1);
                         var xPoint2 = this_1._xAxisScale(x2);
                         var yPoint2 = yScale(y2);
                         var strokeWidth = ((_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
-                        var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                        var isLegendSelected_3 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
                         var supportsTextMode = (_x = (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.mode) === null || _x === void 0 ? void 0 : _x.includes('text');
                         var text = this_1._points[i].data[j - 1].text;
@@ -924,21 +917,21 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         if ((0, index_3.isPlottable)(xPoint1, yPoint1)) {
                             var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
                             pointsForLine.push(((_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('markers')) || supportsTextMode ? (React.createElement(React.Fragment, null,
-                                React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                         return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
-                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: ((_0 = this_1._points[i].data[j - 1]) === null || _0 === void 0 ? void 0 : _0.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_1 = this_1._points[i].data[j - 1]) === null || _1 === void 0 ? void 0 : _1.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j - 1].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j - 1) })),
+                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01, fill: ((_0 = this_1._points[i].data[j - 1]) === null || _0 === void 0 ? void 0 : _0.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_1 = this_1._points[i].data[j - 1]) === null || _1 === void 0 ? void 0 : _1.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j - 1].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j - 1) })),
                                 !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: xPoint1, y: yPoint1 +
                                         Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
-                                        12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                        12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                     return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
-                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: ((_3 = this_1._points[i].data[j - 1]) === null || _3 === void 0 ? void 0 : _3.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_4 = this_1._points[i].data[j - 1]) === null || _4 === void 0 ? void 0 : _4.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
+                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01, fill: ((_3 = this_1._points[i].data[j - 1]) === null || _3 === void 0 ? void 0 : _3.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_4 = this_1._points[i].data[j - 1]) === null || _4 === void 0 ? void 0 : _4.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
                         }
                         if (j + 1 === this_1._points[i].data.length) {
                             // If this is last point of the line segment.
                             var lastCircleId_1 = "".concat(circleId).concat(j, "L");
                             var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
                             var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
-                            var _31 = this_1._points[i].data[j], lastCirlceXCallout_1 = _31.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _31.xAxisCalloutAccessibilityData;
+                            var _32 = this_1._points[i].data[j], lastCirlceXCallout_1 = _32.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _32.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
                             var lastSupportsTextMode = (_6 = (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.mode) === null || _6 === void 0 ? void 0 : _6.includes('text');
                             var lastText = this_1._points[i].data[j].text;
@@ -946,21 +939,21 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                 var path = this_1._getPath(xPoint2, yPoint2, lastCircleId_1, j, true, this_1._points[i].index);
                                 pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
                                     ((_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.mode) === null || _8 === void 0 ? void 0 : _8.includes('markers')) || lastSupportsTextMode ? (React.createElement(React.Fragment, null,
-                                        React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                        React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                                 return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                                            }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_9 = this_1._points[i].data[j].text) !== null && _9 !== void 0 ? _9 : this_1._getAriaLabel(i, j) })),
+                                            }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected_3 && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_9 = this_1._points[i].data[j].text) !== null && _9 !== void 0 ? _9 : this_1._getAriaLabel(i, j) })),
                                         !this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: xPoint2, y: yPoint2 +
                                                 Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
-                                                12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                                12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                             return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                                        }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: ((_10 = this_1._points[i].data[j]) === null || _10 === void 0 ? void 0 : _10.markerColor) || this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: ((_11 = this_1._points[i].data[j]) === null || _11 === void 0 ? void 0 : _11.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
+                                        }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected_3 && !lastPointHidden ? 1 : 0.01, fill: ((_10 = this_1._points[i].data[j]) === null || _10 === void 0 ? void 0 : _10.markerColor) || this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: ((_11 = this_1._points[i].data[j]) === null || _11 === void 0 ? void 0 : _11.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
                                     React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: xPoint2, cy: yPoint2, opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
                             }
                         }
                         if ((0, index_3.isPlottable)(xPoint1, yPoint1) &&
                             (0, index_3.isPlottable)(xPoint2, yPoint2) &&
                             (!this_1._hasMarkersMode || ((_13 = (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.mode) === null || _13 === void 0 ? void 0 : _13.includes('lines')))) {
-                            if (isLegendSelected) {
+                            if (isLegendSelected_3) {
                                 // don't draw line if it is in a gap
                                 if (!isInGap) {
                                     var lineBorderWidth = ((_14 = this_1._points[i].lineOptions) === null || _14 === void 0 ? void 0 : _14.lineBorderWidth)
@@ -985,12 +978,29 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         _loop_2(j);
                     }
                 }
+                // Add filled area for scatterpolar charts
+                var fillMode = (_26 = this_1._points[i].lineOptions) === null || _26 === void 0 ? void 0 : _26.fill;
+                var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
+                if (fillMode === 'toself' && this_1._points[i].data.length >= 3 && isLegendSelected && this_1._isScatterPolar) {
+                    var getScaledXValue_1 = function (dataPoint) {
+                        return _this_1._xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
+                    };
+                    var fillPathGenerator = (0, d3_shape_1.line)()
+                        .x(function (dataPoint) { return getScaledXValue_1(dataPoint); })
+                        .y(function (dataPoint) { return yScale(dataPoint.y); })
+                        .curve((0, index_3.getCurveFactory)(lineCurve))
+                        .defined(function (dataPoint) { return (0, index_3.isPlottable)(getScaledXValue_1(dataPoint), yScale(dataPoint.y)); });
+                    var fillPath = fillPathGenerator(this_1._points[i].data);
+                    if (fillPath) {
+                        linesForLine.push(React.createElement("path", { key: "scatterpolar_fill_".concat(i), d: "".concat(fillPath, "Z"), fill: lineColor, fillOpacity: 0.5, stroke: lineColor, strokeWidth: 2, strokeOpacity: 0.8, pointerEvents: "none" }));
+                    }
+                }
                 if (this_1._isScatterPolar) {
                     pointsForLine.push.apply(pointsForLine, (0, scatterpolar_utils_1.renderScatterPolarCategoryLabels)({
                         xAxisScale: this_1._xAxisScale,
                         yAxisScale: yScale,
                         className: classNames.markerLabel || '',
-                        lineOptions: (_26 = this_1._points[i]) === null || _26 === void 0 ? void 0 : _26.lineOptions,
+                        lineOptions: (_27 = this_1._points[i]) === null || _27 === void 0 ? void 0 : _27.lineOptions,
                     }));
                 }
                 lines.push(React.createElement("g", { key: "line_".concat(i), role: "region", "aria-label": "".concat(legendVal, ", line ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") },