@fluentui/react-charting 5.24.21 → 5.24.23

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

@@ -66,11 +66,6 @@ var LineChartBase = /** @class */ (function (_super) {
         _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;
@@ -80,17 +75,11 @@ var LineChartBase = /** @class */ (function (_super) {
         };
         _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 };
@@ -136,20 +125,14 @@ var LineChartBase = /** @class */ (function (_super) {
         };
         _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) {
@@ -615,71 +598,10 @@ var LineChartBase = /** @class */ (function (_super) {
             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: '',
@@ -858,14 +780,6 @@ var LineChartBase = /** @class */ (function (_super) {
             : [];
         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;
@@ -898,27 +812,44 @@ var LineChartBase = /** @class */ (function (_super) {
             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 : [];
@@ -930,7 +861,8 @@ var LineChartBase = /** @class */ (function (_super) {
                     .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;
@@ -969,43 +901,55 @@ var LineChartBase = /** @class */ (function (_super) {
                     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) {
@@ -1013,16 +957,16 @@ var LineChartBase = /** @class */ (function (_super) {
                                     ? 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 }));
                             }
                         }
                     }