@fluentui/react-charts 0.0.0-nightly-20250828-0408.1 → 0.0.0-nightly-20250829-0406.1

package/lib/components/LineChart/LineChart.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 { useId } from '@fluentui/react-utilities';
 import { find } from '../../utilities/index';
 import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, useRtl, formatDate, getCurveFactory, isScatterPolarSeries } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, formatDate, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 var PointSize = /*#__PURE__*/ function(PointSize) {
@@ -122,11 +122,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const _isRTL = useRtl();
     let xAxisCalloutAccessibilityData = {};
     const cartesianChartRef = React.useRef(null);
-    let _xMin = Number.NEGATIVE_INFINITY;
-    let _yMin = Number.NEGATIVE_INFINITY;
-    let _xMax = Number.POSITIVE_INFINITY;
-    let _xPadding = 0;
-    let _yPadding = 0;
     let _yScaleSecondary;
     const _legendsRef = React.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -178,14 +173,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
     }, []);
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         let domainNRangeValue;
-        if (_hasMarkersMode && xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = _getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
-        } else if (_hasMarkersMode && xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = _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, props.xScaleType, _hasMarkersMode);
         } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
         } else {
             domainNRangeValue = {
                 dStartValue: 0,
@@ -240,16 +231,19 @@ const PATH_MULTIPLY_SIZE = 2.5;
     function _getCustomizedCallout() {
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
-    function _getNumericMinMaxOfY(points) {
+    function _getNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
         // eslint-disable-next-line @typescript-eslint/no-shadow
-        const { startValue, endValue } = findNumericMinMaxOfY(points);
-        _yMin = startValue;
+        const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
+        let yPadding = {
+            start: 0,
+            end: 0
+        };
         if (_hasMarkersMode) {
-            _yPadding = (endValue - startValue) * 0.1;
+            yPadding = getDomainPaddingForMarkers(startValue, endValue, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
         }
         return {
-            startValue: startValue - _yPadding,
-            endValue: endValue + _yPadding
+            startValue: startValue - yPadding.start,
+            endValue: endValue + yPadding.end
         };
     }
     function _getMargins(_margins) {
@@ -411,11 +405,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
             }
         }
     }
-    function _getRangeForScatterMarkerSize(yScale, yPadding) {
-        const extraXPixels = _isRTL ? _xAxisScale(_xMax - _xPadding) - _xAxisScale(_xMax) : _xAxisScale(_xMin + _xPadding) - _xAxisScale(_xMin);
-        const extraYPixels = yScale(_yMin) - yScale(_yMin + _yPadding);
-        return Math.min(extraXPixels, extraYPixels);
-    }
     function _createLines(xElement, containerHeight) {
         const lines = [];
         if (isSelectedLegend) {
@@ -423,7 +412,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
         } else {
             _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
         }
-        const extraMaxPixels = _hasMarkersMode ? _getRangeForScatterMarkerSize(_yScalePrimary, _yPadding) : 0;
         const maxMarkerSize = d3Max(_points, (point)=>{
             return d3Max(point.data, (item)=>{
                 return item.markerSize;
@@ -437,49 +425,64 @@ const PATH_MULTIPLY_SIZE = 2.5;
             const legendVal = _points[i].legend;
             const lineColor = _points[i].color;
             const verticaLineHeight = containerHeight - margins.bottom + 6;
-            const yScale = _points[i].useSecondaryYScale && _yScaleSecondary ? _yScaleSecondary : _yScalePrimary;
+            const useSecondaryYScale = !!(_points[i].useSecondaryYScale && _yScaleSecondary);
+            const yScale = useSecondaryYScale ? _yScaleSecondary : _yScalePrimary;
+            const extraMaxPixels = _hasMarkersMode ? getRangeForScatterMarkerSize({
+                data: _points,
+                xScale: _xAxisScale,
+                yScalePrimary: _yScalePrimary,
+                yScaleSecondary: _yScaleSecondary,
+                useSecondaryYScale,
+                xScaleType: props.xScaleType,
+                yScaleType: props.yScaleType,
+                secondaryYScaleType: props.secondaryYScaleType
+            }) : 0;
             if (_points[i].data.length === 1) {
-                var _points_i_lineOptions_mode, _points_i_lineOptions1;
                 // eslint-disable-next-line @typescript-eslint/no-shadow
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
-                const circleId = `${_circleId}_${i}`;
-                const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-                const currentMarkerSize = _points[i].data[0].markerSize;
-                const supportsTextMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions1.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
-                const text = _points[i].data[0].text;
-                var _points_i_data__text;
-                pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, {
-                    key: `${circleId}_fragment`
-                }, /*#__PURE__*/ React.createElement("circle", {
-                    id: circleId,
-                    key: circleId,
-                    r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
-                    cx: _xAxisScale(x1),
-                    cy: yScale(y1),
-                    fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
-                    opacity: isLegendSelected ? 1 : 0.1,
-                    tabIndex: isLegendSelected ? 0 : undefined,
-                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                    onMouseOut: _handleMouseOut,
-                    strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
-                    stroke: activePoint === circleId ? lineColor : '',
-                    role: "img",
-                    "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
-                    "data-is-focusable": isLegendSelected,
-                    ref: (e)=>{
-                        _refCallback(e, circleId);
-                    },
-                    onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                    onBlur: _handleMouseOut,
-                    ..._getClickHandler(_points[i].data[0].onDataPointClick)
-                }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
-                    key: `${circleId}-label`,
-                    x: _xAxisScale(x1),
-                    y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
-                    className: classes.markerLabel,
-                    opacity: isLegendSelected ? 1 : 0.1
-                }, text))));
+                const xPoint = _xAxisScale(x1);
+                const yPoint = yScale(y1);
+                if (isPlottable(xPoint, yPoint)) {
+                    var _points_i_lineOptions_mode, _points_i_lineOptions1;
+                    const circleId = `${_circleId}_${i}`;
+                    const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
+                    const currentMarkerSize = _points[i].data[0].markerSize;
+                    const supportsTextMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions1.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
+                    const text = _points[i].data[0].text;
+                    var _points_i_data__text;
+                    pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, {
+                        key: `${circleId}_fragment`
+                    }, /*#__PURE__*/ React.createElement("circle", {
+                        id: circleId,
+                        key: circleId,
+                        r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
+                        cx: xPoint,
+                        cy: yPoint,
+                        fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
+                        opacity: isLegendSelected ? 1 : 0.1,
+                        tabIndex: isLegendSelected ? 0 : undefined,
+                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                        onMouseOut: _handleMouseOut,
+                        strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
+                        stroke: activePoint === circleId ? lineColor : '',
+                        role: "img",
+                        "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
+                        "data-is-focusable": isLegendSelected,
+                        ref: (e)=>{
+                            _refCallback(e, circleId);
+                        },
+                        onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onBlur: _handleMouseOut,
+                        ..._getClickHandler(_points[i].data[0].onDataPointClick)
+                    }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
+                        key: `${circleId}-label`,
+                        x: xPoint,
+                        y: yPoint + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
+                        className: classes.markerLabel,
+                        opacity: isLegendSelected ? 1 : 0.1
+                    }, text))));
+                }
             }
             let gapIndex = 0;
             var _points_i_gaps_sort;
@@ -490,7 +493,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 var _points_i_lineOptions2;
                 const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
                 .x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve));
+                .y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve)).defined((d)=>isPlottable(_xAxisScale(d[0]), yScale(d[1])));
                 const lineId = `${_lineId}_${i}`;
                 const borderId = `${_borderId}_${i}`;
                 const strokeWidth = ((_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : _points_i_lineOptions2.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
@@ -567,7 +570,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 }));
             } else if (!props.optimizeLargeData) {
                 for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions8, _points_i_lineOptions_mode1, _points_i_lineOptions9, _points_i_lineOptions_mode2, _points_i_lineOptions10, _points_i_lineOptions_mode3, _points_i_lineOptions11;
+                    var _points_i_lineOptions8, _points_i_lineOptions_mode1, _points_i_lineOptions9, _points_i_lineOptions_mode2, _points_i_lineOptions10;
                     const gapResult = _checkInGap(j, gaps, gapIndex);
                     const isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -576,132 +579,141 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     const circleId = `${_circleId}_${i}_${j}`;
                     const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j - 1];
                     const { x: x2, y: y2 } = _points[i].data[j];
-                    let path = _getPath(_xAxisScale(x1), yScale(y1), circleId, j, false, _points[i].index);
+                    const xPoint1 = _xAxisScale(x1);
+                    const yPoint1 = yScale(y1);
+                    const xPoint2 = _xAxisScale(x2);
+                    const yPoint2 = yScale(y2);
                     const strokeWidth = ((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
                     const supportsTextMode = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions9.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
                     const text = _points[i].data[j - 1].text;
                     let currentMarkerSize = _points[i].data[j - 1].markerSize;
-                    var _points_i_data__text1;
-                    pointsForLine.push(((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) || supportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
-                        id: circleId,
-                        key: circleId,
-                        r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
-                        cx: _xAxisScale(x1),
-                        cy: yScale(y1),
-                        "data-is-focusable": isLegendSelected,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseOut: _handleMouseOut,
-                        onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                        onBlur: _handleMouseOut,
-                        ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
-                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                        fill: _getPointFill(lineColor, circleId, j, false),
-                        stroke: lineColor,
-                        strokeWidth: strokeWidth,
-                        role: "img",
-                        "aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
-                    }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
-                        key: `${circleId}-label`,
-                        x: _xAxisScale(x1),
-                        y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
-                        className: classes.markerLabel,
-                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01
-                    }, text)) : /*#__PURE__*/ React.createElement("path", {
-                        id: circleId,
-                        key: circleId,
-                        d: path,
-                        "data-is-focusable": isLegendSelected,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseOut: _handleMouseOut,
-                        onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                        onBlur: _handleMouseOut,
-                        ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
-                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                        fill: _getPointFill(lineColor, circleId, j, false),
-                        stroke: lineColor,
-                        strokeWidth: strokeWidth,
-                        role: "img",
-                        "aria-label": _getAriaLabel(i, j - 1),
-                        tabIndex: isLegendSelected ? 0 : undefined
-                    }));
-                    if (j + 1 === _points[i].data.length) {
-                        var _points_i_lineOptions_mode4, _points_i_lineOptions12, _points_i_lineOptions_mode5, _points_i_lineOptions13;
-                        // If this is last point of the line segment.
-                        const lastCircleId = `${circleId}${j}L`;
-                        const hiddenHoverCircleId = `${circleId}${j}D`;
-                        const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
-                        path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
-                        const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
-                        currentMarkerSize = _points[i].data[j].markerSize;
-                        const lastSupportsTextMode = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions12.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
-                        const lastText = _points[i].data[j].text;
-                        var _points_i_data_j_text;
-                        pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
-                            key: `${lastCircleId}_container`
-                        }, ((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
-                            id: lastCircleId,
-                            key: lastCircleId,
+                    if (isPlottable(xPoint1, yPoint1)) {
+                        var _points_i_lineOptions_mode3, _points_i_lineOptions11;
+                        const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
+                        var _points_i_data__text1;
+                        pointsForLine.push(((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions11.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('markers')) || supportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
+                            id: circleId,
+                            key: circleId,
                             r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
-                            cx: _xAxisScale(x2),
-                            cy: yScale(y2),
+                            cx: xPoint1,
+                            cy: yPoint1,
                             "data-is-focusable": isLegendSelected,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
                             onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
-                            ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                            opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
-                            fill: _getPointFill(lineColor, lastCircleId, j, true),
+                            ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
+                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
+                            fill: _getPointFill(lineColor, circleId, j, false),
                             stroke: lineColor,
                             strokeWidth: strokeWidth,
                             role: "img",
-                            "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
-                        }), !_isScatterPolar && lastSupportsTextMode && lastText && /*#__PURE__*/ React.createElement("text", {
-                            key: `${lastCircleId}-label`,
-                            x: _xAxisScale(x2),
-                            y: yScale(y2) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
-                            className: classes.markerLabel
+                            "aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
+                        }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
+                            key: `${circleId}-label`,
+                            x: xPoint1,
+                            y: yPoint1 + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
+                            className: classes.markerLabel,
+                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01
                         }, text)) : /*#__PURE__*/ React.createElement("path", {
-                            id: lastCircleId,
-                            key: lastCircleId,
+                            id: circleId,
+                            key: circleId,
                             d: path,
                             "data-is-focusable": isLegendSelected,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
                             onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
-                            ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                            opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
-                            fill: _getPointFill(lineColor, lastCircleId, j, true),
+                            ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
+                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
+                            fill: _getPointFill(lineColor, circleId, j, false),
                             stroke: lineColor,
                             strokeWidth: strokeWidth,
                             role: "img",
-                            "aria-label": _getAriaLabel(i, j),
+                            "aria-label": _getAriaLabel(i, j - 1),
                             tabIndex: isLegendSelected ? 0 : undefined
-                        }), /*#__PURE__*/ React.createElement("circle", {
-                            id: hiddenHoverCircleId,
-                            key: hiddenHoverCircleId,
-                            r: 8,
-                            cx: _xAxisScale(x2),
-                            cy: yScale(y2),
-                            opacity: 0,
-                            width: 0,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                            onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                            onMouseOut: _handleMouseOut,
-                            strokeWidth: 0,
-                            focusable: false,
-                            onBlur: _handleMouseOut
-                        })));
+                        }));
                     }
-                    if (!_hasMarkersMode || ((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions11.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('lines'))) {
+                    if (j + 1 === _points[i].data.length) {
+                        var _points_i_lineOptions_mode4, _points_i_lineOptions12;
+                        // If this is last point of the line segment.
+                        const lastCircleId = `${circleId}${j}L`;
+                        const hiddenHoverCircleId = `${circleId}${j}D`;
+                        const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
+                        const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
+                        currentMarkerSize = _points[i].data[j].markerSize;
+                        const lastSupportsTextMode = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions12.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
+                        const lastText = _points[i].data[j].text;
+                        if (isPlottable(xPoint2, yPoint2)) {
+                            var _points_i_lineOptions_mode5, _points_i_lineOptions13;
+                            const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
+                            var _points_i_data_j_text;
+                            pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
+                                key: `${lastCircleId}_container`
+                            }, ((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
+                                id: lastCircleId,
+                                key: lastCircleId,
+                                r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
+                                cx: xPoint2,
+                                cy: yPoint2,
+                                "data-is-focusable": isLegendSelected,
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseOut: _handleMouseOut,
+                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                                onBlur: _handleMouseOut,
+                                ..._getClickHandler(_points[i].data[j].onDataPointClick),
+                                opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
+                                fill: _getPointFill(lineColor, lastCircleId, j, true),
+                                stroke: lineColor,
+                                strokeWidth: strokeWidth,
+                                role: "img",
+                                "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
+                            }), !_isScatterPolar && lastSupportsTextMode && lastText && /*#__PURE__*/ React.createElement("text", {
+                                key: `${lastCircleId}-label`,
+                                x: xPoint2,
+                                y: yPoint2 + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
+                                className: classes.markerLabel
+                            }, text)) : /*#__PURE__*/ React.createElement("path", {
+                                id: lastCircleId,
+                                key: lastCircleId,
+                                d: path,
+                                "data-is-focusable": isLegendSelected,
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseOut: _handleMouseOut,
+                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                                onBlur: _handleMouseOut,
+                                ..._getClickHandler(_points[i].data[j].onDataPointClick),
+                                opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
+                                fill: _getPointFill(lineColor, lastCircleId, j, true),
+                                stroke: lineColor,
+                                strokeWidth: strokeWidth,
+                                role: "img",
+                                "aria-label": _getAriaLabel(i, j),
+                                tabIndex: isLegendSelected ? 0 : undefined
+                            }), /*#__PURE__*/ React.createElement("circle", {
+                                id: hiddenHoverCircleId,
+                                key: hiddenHoverCircleId,
+                                r: 8,
+                                cx: xPoint2,
+                                cy: yPoint2,
+                                opacity: 0,
+                                width: 0,
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                                onMouseOut: _handleMouseOut,
+                                strokeWidth: 0,
+                                focusable: false,
+                                onBlur: _handleMouseOut
+                            })));
+                        }
+                    }
+                    if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
                         if (isLegendSelected) {
                             // don't draw line if it is in a gap
                             if (!isInGap) {
@@ -713,10 +725,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                     bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
                                         id: borderId,
                                         key: borderId,
-                                        x1: _xAxisScale(x1),
-                                        y1: yScale(y1),
-                                        x2: _xAxisScale(x2),
-                                        y2: yScale(y2),
+                                        x1: xPoint1,
+                                        y1: yPoint1,
+                                        x2: xPoint2,
+                                        y2: yPoint2,
                                         strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
                                         strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
                                         stroke: ((_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.lineBorderColor) || tokens.colorNeutralBackground1,
@@ -727,10 +739,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 linesForLine.push(/*#__PURE__*/ React.createElement("line", {
                                     id: lineId,
                                     key: lineId,
-                                    x1: _xAxisScale(x1),
-                                    y1: yScale(y1),
-                                    x2: _xAxisScale(x2),
-                                    y2: yScale(y2),
+                                    x1: xPoint1,
+                                    y1: yPoint1,
+                                    x2: xPoint2,
+                                    y2: yPoint2,
                                     strokeWidth: strokeWidth,
                                     ref: (e)=>{
                                         _refCallback(e, lineId);
@@ -753,10 +765,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 linesForLine.push(/*#__PURE__*/ React.createElement("line", {
                                     id: lineId,
                                     key: lineId,
-                                    x1: _xAxisScale(x1),
-                                    y1: yScale(y1),
-                                    x2: _xAxisScale(x2),
-                                    y2: yScale(y2),
+                                    x1: xPoint1,
+                                    y1: yPoint1,
+                                    x2: xPoint2,
+                                    y2: yPoint2,
                                     strokeWidth: strokeWidth,
                                     stroke: lineColor,
                                     strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
@@ -1129,67 +1141,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const yValue = point.yAxisCalloutData || point.y;
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
-    function _getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues = [], chartType, barWidth) {
-        _setXMinMaxValues(points);
-        // Include tickValues if present
-        const sDate = tickValues && tickValues.length > 0 ? d3Min([
-            ...tickValues,
-            new Date(_xMin)
-        ]) : new Date(_xMin);
-        const lDate = tickValues && tickValues.length > 0 ? d3Max([
-            ...tickValues,
-            new Date(_xMax)
-        ]) : new Date(_xMax);
-        // Calculate time-based padding (e.g. 10% of the date range)
-        const dateRange = lDate.getTime() - sDate.getTime();
-        const datePadding = _hasMarkersMode ? dateRange * 0.1 : 0;
-        const paddedSDate = new Date(sDate.getTime() - datePadding);
-        const paddedLDate = new Date(lDate.getTime() + datePadding);
-        const rStartValue = margins.left;
-        const rEndValue = width - margins.right;
-        return isRTL ? {
-            dStartValue: paddedLDate,
-            dEndValue: paddedSDate,
-            rStartValue,
-            rEndValue
-        } : {
-            dStartValue: paddedSDate,
-            dEndValue: paddedLDate,
-            rStartValue,
-            rEndValue
-        };
-    }
-    function _getDomainNRangeValuesWithPadding(points, margins, width, isRTL) {
-        _setXMinMaxValues(points);
-        if (_hasMarkersMode) {
-            _xPadding = (_xMax - _xMin) * 0.1;
-        }
-        const rStartValue = margins.left;
-        const rEndValue = width - margins.right;
-        return isRTL ? {
-            dStartValue: _xMax + _xPadding,
-            dEndValue: _xMin - _xPadding,
-            rStartValue,
-            rEndValue
-        } : {
-            dStartValue: _xMin - _xPadding,
-            dEndValue: _xMax + _xPadding,
-            rStartValue,
-            rEndValue
-        };
-    }
     function _isChartEmpty() {
         return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
     }
-    function _setXMinMaxValues(points) {
-        const getX = (item)=>_isXAxisDateType ? item.x : item.x;
-        const minVal = d3Min(points, (point)=>d3Min(point.data, getX));
-        const maxVal = d3Max(points, (point)=>d3Max(point.data, getX));
-        _xMin = _isXAxisDateType ? minVal.getTime() : minVal;
-        _xMax = _isXAxisDateType ? maxVal.getTime() : maxVal;
-        _xMin = _xMin === Number.NEGATIVE_INFINITY || !_xMin ? 0 : _xMin;
-        _xMax = _xMax === Number.POSITIVE_INFINITY || !_xMax ? 0 : _xMax;
-    }
     const { legendProps, tickValues, tickFormat, eventAnnotationProps } = props;
     _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     _isXAxisDateType = getXAxisType(_points);