@fluentui/react-charting 5.24.20 → 5.24.22

package/lib-amd/components/LineChart/LineChart.base.d.ts

@@ -44,12 +44,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _isRTL;
     private _cartesianChartRef;
     private _legendsRef;
-    private _xMin;
-    private _xMax;
-    private _xPadding;
-    private _yPaddingPrimary;
     private _yScaleSecondary;
-    private _yPaddingSecondary;
     private _hasMarkersMode;
     private _isXAxisDateType;
     private _isScatterPolar;
@@ -71,7 +66,6 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _getBoxWidthOfShape;
     private _getPath;
     private _getPointFill;
-    private _getRangeForScatterMarkerSize;
     private _createLines;
     private _createColorFillBars;
     private _getStripePattern;
@@ -104,10 +98,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _noLegendHighlighted;
     private _getColorFillBarOpacity;
     private _getAriaLabel;
-    private _getDomainNRangeValuesOfDateWithPadding;
-    private _getDomainNRangeValuesWithPadding;
     private _isChartEmpty;
     private _getChartTitle;
-    private _setXMinMaxValues;
 }
 export {};

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

@@ -52,11 +52,6 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._yScalePrimary = '';
             _this_1.eventLabelHeight = 36;
             _this_1._isRTL = (0, Utilities_1.getRTL)();
-            _this_1._xMin = Number.NEGATIVE_INFINITY;
-            _this_1._xMax = Number.POSITIVE_INFINITY;
-            _this_1._xPadding = 0;
-            _this_1._yPaddingPrimary = 0;
-            _this_1._yPaddingSecondary = 0;
             _this_1._hasMarkersMode = false;
             _this_1._isXAxisDateType = false;
             _this_1._isScatterPolar = false;
@@ -66,17 +61,11 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             };
             _this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
                 var domainNRangeValue;
-                if (_this_1._hasMarkersMode && xAxisType === index_3.XAxisTypes.NumericAxis) {
-                    domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
-                }
-                else if (_this_1._hasMarkersMode && xAxisType === index_3.XAxisTypes.DateAxis) {
-                    domainNRangeValue = _this_1._getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues, chartType, barWidth);
-                }
-                else if (xAxisType === index_3.XAxisTypes.NumericAxis) {
-                    domainNRangeValue = (0, index_3.domainRangeOfNumericForAreaChart)(points, margins, width, isRTL);
+                if (xAxisType === index_3.XAxisTypes.NumericAxis) {
+                    domainNRangeValue = (0, index_3.domainRangeOfNumericForAreaLineScatterCharts)(points, margins, width, isRTL, _this_1.props.xScaleType, _this_1._hasMarkersMode);
                 }
                 else if (xAxisType === index_3.XAxisTypes.DateAxis) {
-                    domainNRangeValue = (0, index_3.domainRangeOfDateForAreaLineVerticalBarChart)(points, margins, width, isRTL, tickValues, chartType, barWidth);
+                    domainNRangeValue = (0, index_3.domainRangeOfDateForAreaLineScatterVerticalBarCharts)(points, margins, width, isRTL, tickValues, chartType, barWidth, _this_1._hasMarkersMode);
                 }
                 else {
                     domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
@@ -122,20 +111,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             };
             _this_1._getNumericMinMaxOfY = function (points, yAxisType, useSecondaryYScale) {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
-                var _a = (0, index_3.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale), startValue = _a.startValue, endValue = _a.endValue;
-                var yPadding = 0;
+                var _a = (0, index_3.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? _this_1.props.secondaryYScaleType : _this_1.props.yScaleType), startValue = _a.startValue, endValue = _a.endValue;
+                var yPadding = { start: 0, end: 0 };
                 if (_this_1._hasMarkersMode) {
-                    yPadding = (endValue - startValue) * 0.1;
-                    if (useSecondaryYScale) {
-                        _this_1._yPaddingSecondary = yPadding;
-                    }
-                    else {
-                        _this_1._yPaddingPrimary = yPadding;
-                    }
+                    yPadding = (0, index_3.getDomainPaddingForMarkers)(startValue, endValue, useSecondaryYScale ? _this_1.props.secondaryYScaleType : _this_1.props.yScaleType);
                 }
                 return {
-                    startValue: startValue - yPadding,
-                    endValue: endValue + yPadding,
+                    startValue: startValue - yPadding.start,
+                    endValue: endValue + yPadding.end,
                 };
             };
             _this_1._getMargins = function (margins) {
@@ -601,71 +584,10 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var yValue = point.yAxisCalloutData || point.y;
                 return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
             };
-            _this_1._getDomainNRangeValuesOfDateWithPadding = function (points, margins, width, isRTL, tickValues, chartType, barWidth) {
-                if (tickValues === void 0) { tickValues = []; }
-                _this_1._setXMinMaxValues(points);
-                // Include tickValues if present
-                var sDate = tickValues && tickValues.length > 0
-                    ? (0, d3_array_2.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMin)], false))
-                    : new Date(_this_1._xMin);
-                var lDate = tickValues && tickValues.length > 0
-                    ? (0, d3_array_2.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMax)], false))
-                    : new Date(_this_1._xMax);
-                // Calculate time-based padding (e.g. 10% of the date range)
-                var dateRange = lDate.getTime() - sDate.getTime();
-                var datePadding = _this_1._hasMarkersMode ? dateRange * 0.1 : 0;
-                var paddedSDate = new Date(sDate.getTime() - datePadding);
-                var paddedLDate = new Date(lDate.getTime() + datePadding);
-                var rStartValue = margins.left;
-                var rEndValue = width - margins.right;
-                return isRTL
-                    ? {
-                        dStartValue: paddedLDate,
-                        dEndValue: paddedSDate,
-                        rStartValue: rStartValue,
-                        rEndValue: rEndValue,
-                    }
-                    : {
-                        dStartValue: paddedSDate,
-                        dEndValue: paddedLDate,
-                        rStartValue: rStartValue,
-                        rEndValue: rEndValue,
-                    };
-            };
-            _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
-                _this_1._setXMinMaxValues(points);
-                if (_this_1._hasMarkersMode) {
-                    _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
-                }
-                var rStartValue = margins.left;
-                var rEndValue = width - margins.right;
-                return isRTL
-                    ? {
-                        dStartValue: _this_1._xMax + _this_1._xPadding,
-                        dEndValue: _this_1._xMin - _this_1._xPadding,
-                        rStartValue: rStartValue,
-                        rEndValue: rEndValue,
-                    }
-                    : {
-                        dStartValue: _this_1._xMin - _this_1._xPadding,
-                        dEndValue: _this_1._xMax + _this_1._xPadding,
-                        rStartValue: rStartValue,
-                        rEndValue: rEndValue,
-                    };
-            };
             _this_1._getChartTitle = function () {
                 var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
                 return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
             };
-            _this_1._setXMinMaxValues = function (points) {
-                var getX = function (item) { return (_this_1._isXAxisDateType ? item.x : item.x); };
-                var minVal = (0, d3_array_2.min)(points, function (point) { return (0, d3_array_2.min)(point.data, getX); });
-                var maxVal = (0, d3_array_2.max)(points, function (point) { return (0, d3_array_2.max)(point.data, getX); });
-                _this_1._xMin = _this_1._isXAxisDateType ? minVal.getTime() : minVal;
-                _this_1._xMax = _this_1._isXAxisDateType ? maxVal.getTime() : maxVal;
-                _this_1._xMin = _this_1._xMin === Number.NEGATIVE_INFINITY || !_this_1._xMin ? 0 : _this_1._xMin;
-                _this_1._xMax = _this_1._xMax === Number.POSITIVE_INFINITY || !_this_1._xMax ? 0 : _this_1._xMax;
-            };
             (0, Utilities_1.initializeComponentRef)(_this_1);
             _this_1.state = {
                 hoverXValue: '',
@@ -844,14 +766,6 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 : [];
             return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps, { ref: this._legendsRef })));
         };
-        LineChartBase.prototype._getRangeForScatterMarkerSize = function (yScale, yPadding) {
-            var extraXPixels = this._isRTL
-                ? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
-                : this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
-            var yMin = yScale.domain()[0];
-            var extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
-            return Math.min(extraXPixels, extraYPixels);
-        };
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
             var _this_1 = this;
@@ -884,27 +798,44 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var activePoint = this_1.state.activePoint;
                 var theme = this_1.props.theme;
                 var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
-                var yScale = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yScaleSecondary : this_1._yScalePrimary;
-                var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
-                var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
+                var useSecondaryYScale = !!(this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary);
+                var yScale = useSecondaryYScale ? this_1._yScaleSecondary : this_1._yScalePrimary;
+                var extraMaxPixels = this_1._hasMarkersMode
+                    ? (0, index_3.getRangeForScatterMarkerSize)({
+                        data: this_1._points,
+                        xScale: this_1._xAxisScale,
+                        yScalePrimary: this_1._yScalePrimary,
+                        yScaleSecondary: this_1._yScaleSecondary,
+                        useSecondaryYScale: useSecondaryYScale,
+                        xScaleType: this_1.props.xScaleType,
+                        yScaleType: this_1.props.yScaleType,
+                        secondaryYScaleType: this_1.props.secondaryYScaleType,
+                    })
+                    : 0;
                 if (this_1._points[i].data.length === 1) {
                     var _18 = this_1._points[i].data[0], x1_1 = _18.x, y1 = _18.y, xAxisCalloutData_1 = _18.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _18.xAxisCalloutAccessibilityData;
-                    var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
-                    var isLegendSelected = 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;
-                    pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(circleId_1, "_fragment") },
-                        React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
-                                ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
-                                : activePoint === circleId_1
-                                    ? 5.5
-                                    : 3.5, cx: this_1._xAxisScale(x1_1), cy: yScale(y1), 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) {
-                                _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: this_1._xAxisScale(x1_1), y: yScale(y1) +
-                                Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
-                                12, className: classNames.markerLabel, opacity: isLegendSelected ? 1 : 0.1 }, text))));
+                    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 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;
+                        pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(circleId_1, "_fragment") },
+                            React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
+                                    ? (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) {
+                                    _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))));
+                    }
                 }
                 var gapIndex = 0;
                 var gaps = (_d = (_c = this_1._points[i].gaps) === null || _c === void 0 ? void 0 : _c.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _d !== void 0 ? _d : [];
@@ -916,7 +847,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         .x(function (d) { return _this_1._xAxisScale(d[0]); })
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         .y(function (d) { return yScale(d[1]); })
-                        .curve((0, index_3.getCurveFactory)(lineCurve));
+                        .curve((0, index_3.getCurveFactory)(lineCurve))
+                        .defined(function (d) { return (0, index_3.isPlottable)(_this_1._xAxisScale(d[0]), yScale(d[1])); });
                     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;
@@ -955,43 +887,55 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
                         var _19 = this_1._points[i].data[j - 1], x1 = _19.x, y1 = _19.y, xAxisCalloutData = _19.xAxisCalloutData, xAxisCalloutAccessibilityData = _19.xAxisCalloutAccessibilityData;
                         var _20 = this_1._points[i].data[j], x2 = _20.x, y2 = _20.y;
-                        var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
+                        var xPoint1 = this_1._xAxisScale(x1);
+                        var yPoint1 = yScale(y1);
+                        var xPoint2 = this_1._xAxisScale(x2);
+                        var yPoint2 = yScale(y2);
                         var strokeWidth = ((_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                         var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
                         var supportsTextMode = (_u = (_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.mode) === null || _u === void 0 ? void 0 : _u.includes('text');
                         var text = this_1._points[i].data[j - 1].text;
                         var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
-                        pointsForLine.push(((_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.mode) === null || _w === void 0 ? void 0 : _w.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: this_1._xAxisScale(x1), cy: yScale(y1), "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 () {
+                        if ((0, index_3.isPlottable)(xPoint1, yPoint1)) {
+                            var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
+                            pointsForLine.push(((_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.mode) === null || _w === void 0 ? void 0 : _w.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 () {
+                                        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: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : 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 () {
                                     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: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : this_1._getAriaLabel(i, j - 1) })),
-                            !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) +
-                                    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 () { 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: this_1._getPointFill(lineColor, circleId, j, false), stroke: 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 && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: 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;
-                            path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                             var _21 = this_1._points[i].data[j], lastCirlceXCallout_1 = _21.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _21.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
                             var lastSupportsTextMode = (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('text');
                             var lastText = this_1._points[i].data[j].text;
-                            pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                ((_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.mode) === null || _1 === void 0 ? void 0 : _1.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: this_1._xAxisScale(x2), cy: yScale(y2), "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 () {
+                            if ((0, index_3.isPlottable)(xPoint2, yPoint2)) {
+                                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") },
+                                    ((_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.mode) === null || _1 === void 0 ? void 0 : _1.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 () {
+                                                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": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : 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 () {
                                             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": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j) })),
-                                    !this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) +
-                                            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 () {
-                                        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": this_1._getAriaLabel(i, j) }))),
-                                React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), 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 })));
+                                        }, 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": 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 (!this_1._hasMarkersMode || ((_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.mode) === null || _4 === void 0 ? void 0 : _4.includes('lines'))) {
+                        if ((0, index_3.isPlottable)(xPoint1, yPoint1) &&
+                            (0, index_3.isPlottable)(xPoint2, yPoint2) &&
+                            (!this_1._hasMarkersMode || ((_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.mode) === null || _4 === void 0 ? void 0 : _4.includes('lines')))) {
                             if (isLegendSelected) {
                                 // don't draw line if it is in a gap
                                 if (!isInGap) {
@@ -999,16 +943,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                         ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                                         : 0;
                                     if (lineBorderWidth > 0) {
-                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_7 = (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeLinecap) !== null && _7 !== void 0 ? _7 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_8 = this_1._points[i].lineOptions) === null || _8 === void 0 ? void 0 : _8.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeLinecap: (_7 = (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeLinecap) !== null && _7 !== void 0 ? _7 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_8 = this_1._points[i].lineOptions) === null || _8 === void 0 ? void 0 : _8.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                     }
-                                    linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, ref: function (e) {
+                                    linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, ref: function (e) {
                                             _this_1._refCallback(e, lineId);
                                         }, 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, stroke: lineColor, strokeLinecap: (_10 = (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeLinecap) !== null && _10 !== void 0 ? _10 : 'round', strokeDasharray: (_11 = this_1._points[i].lineOptions) === null || _11 === void 0 ? void 0 : _11.strokeDasharray, strokeDashoffset: (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                                 }
                             }
                             else {
                                 if (!isInGap) {
-                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_14 = (_13 = this_1._points[i].lineOptions) === null || _13 === void 0 ? void 0 : _13.strokeLinecap) !== null && _14 !== void 0 ? _14 : 'round', strokeDasharray: (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeDasharray, strokeDashoffset: (_16 = this_1._points[i].lineOptions) === null || _16 === void 0 ? void 0 : _16.strokeDashoffset, opacity: 0.1 }));
+                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_14 = (_13 = this_1._points[i].lineOptions) === null || _13 === void 0 ? void 0 : _13.strokeLinecap) !== null && _14 !== void 0 ? _14 : 'round', strokeDasharray: (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeDasharray, strokeDashoffset: (_16 = this_1._points[i].lineOptions) === null || _16 === void 0 ? void 0 : _16.strokeDashoffset, opacity: 0.1 }));
                                 }
                             }
                         }