@fluentui/react-charting 5.24.21 → 5.24.23

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

@@ -4,13 +4,13 @@ import { select as d3Select, pointer } from 'd3-selection';
 import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
 import { line as d3Line } from 'd3-shape';
-import { max as d3Max, min as d3Min } from 'd3-array';
+import { max as d3Max } from 'd3-array';
 import { classNamesFunction, getId, find, memoizeFunction, getRTL, initializeComponentRef, } from '@fluentui/react/lib/Utilities';
 import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, areArraysEqual, getCurveFactory, isScatterPolarSeries, } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, areArraysEqual, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 var getClassNames = classNamesFunction();
@@ -63,11 +63,6 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._yScalePrimary = '';
         _this_1.eventLabelHeight = 36;
         _this_1._isRTL = 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;
@@ -77,17 +72,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 === XAxisTypes.NumericAxis) {
-                domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
-            }
-            else if (_this_1._hasMarkersMode && xAxisType === XAxisTypes.DateAxis) {
-                domainNRangeValue = _this_1._getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues, chartType, barWidth);
-            }
-            else if (xAxisType === XAxisTypes.NumericAxis) {
-                domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
+            if (xAxisType === XAxisTypes.NumericAxis) {
+                domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, _this_1.props.xScaleType, _this_1._hasMarkersMode);
             }
             else if (xAxisType === XAxisTypes.DateAxis) {
-                domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+                domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, _this_1._hasMarkersMode);
             }
             else {
                 domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
@@ -133,20 +122,14 @@ var LineChartBase = /** @class */ (function (_super) {
         };
         _this_1._getNumericMinMaxOfY = function (points, yAxisType, useSecondaryYScale) {
             // eslint-disable-next-line @typescript-eslint/no-shadow
-            var _a = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale), startValue = _a.startValue, endValue = _a.endValue;
-            var yPadding = 0;
+            var _a = 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 = 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) {
@@ -612,71 +595,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
-                ? d3Min(__spreadArray(__spreadArray([], tickValues, true), [new Date(_this_1._xMin)], false))
-                : new Date(_this_1._xMin);
-            var lDate = tickValues && tickValues.length > 0
-                ? d3Max(__spreadArray(__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 = d3Min(points, function (point) { return d3Min(point.data, getX); });
-            var maxVal = d3Max(points, function (point) { return d3Max(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;
-        };
         initializeComponentRef(_this_1);
         _this_1.state = {
             hoverXValue: '',
@@ -855,14 +777,6 @@ var LineChartBase = /** @class */ (function (_super) {
             : [];
         return (React.createElement(Legends, __assign({ legends: __spreadArray(__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;
@@ -895,27 +809,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
+                ? 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", __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 (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", __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 : [];
@@ -927,7 +858,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(getCurveFactory(lineCurve));
+                    .curve(getCurveFactory(lineCurve))
+                    .defined(function (d) { return 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;
@@ -966,43 +898,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", __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 (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", __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", __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", __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", __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 (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", __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", __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", __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 (isPlottable(xPoint1, yPoint1) &&
+                        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) {
@@ -1010,16 +954,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", __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", __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 }));
                             }
                         }
                     }