@fluentui/react-charts 9.2.2 → 9.2.4

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

@@ -21,6 +21,7 @@ const _index2 = require("../../index");
 const _EventAnnotation = require("./eventAnnotation/EventAnnotation");
 const _reacttheme = require("@fluentui/react-theme");
 const _imageexportutils = require("../../utilities/image-export-utils");
+const _scatterpolarutils = require("../../utilities/scatterpolar-utils");
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -95,6 +96,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
 };
 const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     var _props_legendProps_selectedLegends, _props_legendProps;
+    let _hasMarkersMode = false;
+    let _isXAxisDateType = false;
+    let _isScatterPolar = false;
     let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints = (0, _index1.calloutData)(_points) || [];
@@ -143,6 +147,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
+    const [YValue, setYValue] = _react.useState('');
+    const [legendVal, setLegendVal] = _react.useState('');
+    const [lineColor, setLineColor] = _react.useState('');
     const pointsRef = _react.useRef([]);
     const calloutPointsRef = _react.useRef([]);
     const classes = (0, _useLineChartStylesstyles.useLineChartStyles)(props);
@@ -172,9 +179,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         let domainNRangeValue;
         if (xAxisType === _index1.XAxisTypes.NumericAxis) {
-            domainNRangeValue = (0, _index1.domainRangeOfNumericForAreaChart)(points, margins, width, isRTL);
+            domainNRangeValue = (0, _index1.domainRangeOfNumericForAreaLineScatterCharts)(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode);
         } else if (xAxisType === _index1.XAxisTypes.DateAxis) {
-            domainNRangeValue = (0, _index1.domainRangeOfDateForAreaLineVerticalBarChart)(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            domainNRangeValue = (0, _index1.domainRangeOfDateForAreaLineScatterVerticalBarCharts)(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
         } else {
             domainNRangeValue = {
                 dStartValue: 0,
@@ -192,6 +199,12 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             var _props_legendProps_selectedLegends, _props_legendProps, _props_legendProps1;
             return ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.includes(item.legend)) || ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegend) === item.legend;
         }) : lineChartData;
+        var _filteredData_some;
+        _hasMarkersMode = (_filteredData_some = filteredData === null || filteredData === void 0 ? void 0 : filteredData.some((item)=>{
+            var _item_lineOptions_mode_includes, _item_lineOptions_mode, _item_lineOptions;
+            return (_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : (_item_lineOptions_mode = _item_lineOptions.mode) === null || _item_lineOptions_mode === void 0 ? void 0 : (_item_lineOptions_mode_includes = _item_lineOptions_mode.includes) === null || _item_lineOptions_mode_includes === void 0 ? void 0 : _item_lineOptions_mode_includes.call(_item_lineOptions_mode, 'markers');
+        })) !== null && _filteredData_some !== void 0 ? _filteredData_some : false;
+        _isScatterPolar = (0, _index1.isScatterPolarSeries)(filteredData);
         return filteredData ? filteredData.map((item, index)=>{
             let color;
             if (typeof item.color === 'undefined') {
@@ -223,6 +236,21 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _getCustomizedCallout() {
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
+    function _getNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { startValue, endValue } = (0, _index1.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
+        let yPadding = {
+            start: 0,
+            end: 0
+        };
+        if (_hasMarkersMode) {
+            yPadding = (0, _index1.getDomainPaddingForMarkers)(startValue, endValue, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
+        }
+        return {
+            startValue: startValue - yPadding.start,
+            endValue: endValue + yPadding.end
+        };
+    }
     function _getMargins(_margins) {
         margins = _margins;
     }
@@ -255,17 +283,26 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _createLegends(data) {
         const { legendProps, allowMultipleShapesForPoints = false } = props;
         const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        const legendDataItems = data.map((point)=>{
-            const color = point.color;
+        const mapLegendToPoints = {};
+        data.forEach((point)=>{
+            if (point.legend) {
+                if (!mapLegendToPoints[point.legend]) {
+                    mapLegendToPoints[point.legend] = [];
+                }
+                mapLegendToPoints[point.legend].push(point);
+            }
+        });
+        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
+            const representativePoint = points[0];
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
-                color,
+                title: legendTitle,
+                color: representativePoint.color,
                 action: ()=>{
                     if (isLegendMultiSelectEnabled) {
-                        _handleMultipleLineLegendSelectionAction(point);
+                        points.forEach((p)=>_handleMultipleLineLegendSelectionAction(p));
                     } else {
-                        _handleSingleLegendSelectionAction(point);
+                        points.forEach((p)=>_handleSingleLegendSelectionAction(p));
                     }
                 },
                 onMouseOutAction: ()=>{
@@ -273,13 +310,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    setActiveLegend(point.legend);
+                    setActiveLegend(legendTitle);
                 },
-                ...point.legendShape && {
-                    shape: point.legendShape
+                ...representativePoint.legendShape && {
+                    shape: representativePoint.legendShape
                 },
                 ...allowMultipleShapesForPoints && {
-                    shape: _index1.Points[point.index % Object.keys(_index1.pointTypes).length]
+                    shape: _index1.Points[representativePoint.index % Object.keys(_index1.pointTypes).length]
                 }
             };
             return legend;
@@ -380,6 +417,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         } else {
             _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
         }
+        const maxMarkerSize = (0, _d3array.max)(_points, (point)=>{
+            return (0, _d3array.max)(point.data, (item)=>{
+                return item.markerSize;
+            });
+        });
         for(let i = _points.length - 1; i >= 0; i--){
             var _points_i_gaps, _points_i_lineOptions;
             const linesForLine = [];
@@ -388,36 +430,64 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             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 ? (0, _index1.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) {
                 // 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;
-                pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
-                    id: circleId,
-                    key: circleId,
-                    r: activePoint === circleId ? 5.5 : 3.5,
-                    cx: _xAxisScale(x1),
-                    cy: yScale(y1),
-                    fill: activePoint === circleId ? _reacttheme.tokens.colorNeutralBackground1 : lineColor,
-                    opacity: isLegendSelected ? 1 : 0.1,
-                    tabIndex: isLegendSelected ? 0 : undefined,
-                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                    onMouseOut: _handleMouseOut,
-                    strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
-                    stroke: activePoint === circleId ? lineColor : '',
-                    role: "img",
-                    "aria-label": _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)
-                }));
+                const xPoint = _xAxisScale(x1);
+                const yPoint = yScale(y1);
+                if ((0, _index1.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 ? _reacttheme.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;
@@ -425,13 +495,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
             // Use path rendering technique for larger datasets to optimize performance.
             if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
-                var _points_i_lineOptions1;
+                var _points_i_lineOptions2;
                 const line = (0, _d3shape.line)() // 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((0, _index1.getCurveFactory)(lineCurve));
+                .y((d)=>yScale(d[1])).curve((0, _index1.getCurveFactory)(lineCurve)).defined((d)=>(0, _index1.isPlottable)(_xAxisScale(d[0]), yScale(d[1])));
                 const lineId = `${_lineId}_${i}`;
                 const borderId = `${_borderId}_${i}`;
-                const strokeWidth = ((_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                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;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const lineData = [];
                 for(let k = 0; k < _points[i].data.length; k++){
@@ -441,19 +511,19 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     ]);
                 }
                 if (isLegendSelected) {
-                    var _points_i_lineOptions2, _points_i_lineOptions3;
-                    const lineBorderWidth = ((_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : _points_i_lineOptions2.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                    var _points_i_lineOptions3, _points_i_lineOptions4;
+                    const lineBorderWidth = ((_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
                     if (lineBorderWidth > 0) {
-                        var _points_i_lineOptions4, _points_i_lineOptions5;
+                        var _points_i_lineOptions5, _points_i_lineOptions6;
                         var _points_i_lineOptions_strokeLinecap;
                         bordersForLine.push(/*#__PURE__*/ _react.createElement("path", {
                             id: borderId,
                             key: borderId,
                             d: line(lineData),
                             fill: "transparent",
-                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
+                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
                             strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                            stroke: ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
+                            stroke: ((_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
                             opacity: 1
                         }));
                     }
@@ -466,7 +536,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         "data-is-focusable": true,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
                         onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                         onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                         onMouseOut: _handleMouseOut,
@@ -475,7 +545,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         tabIndex: isLegendSelected ? 0 : undefined
                     }));
                 } else {
-                    var _points_i_lineOptions6;
+                    var _points_i_lineOptions7;
                     var _points_i_lineOptions_strokeLinecap2;
                     linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
                         id: lineId,
@@ -485,7 +555,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         "data-is-focusable": false,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
                         opacity: 0.1
                     }));
                 }
@@ -505,7 +575,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 }));
             } else if (!props.optimizeLargeData) {
                 for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions7;
+                    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;
@@ -514,142 +584,217 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     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 strokeWidth = ((_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    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;
-                    pointsForLine.push(/*#__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),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                        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) {
-                        // 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];
-                        pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
-                            key: `${lastCircleId}_container`
-                        }, /*#__PURE__*/ _react.createElement("path", {
-                            id: lastCircleId,
-                            key: lastCircleId,
+                    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;
+                    if ((0, _index1.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: xPoint1,
+                            cy: yPoint1,
+                            "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: 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: circleId,
+                            key: circleId,
                             d: path,
                             "data-is-focusable": isLegendSelected,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            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),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
-                            onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                            onMouseOut: _handleMouseOut,
-                            strokeWidth: 0,
-                            focusable: false,
-                            onBlur: _handleMouseOut
-                        })));
-                    /* eslint-enable react/jsx-no-bind */ }
-                    if (isLegendSelected) {
-                        // don't draw line if it is in a gap
-                        if (!isInGap) {
-                            var _points_i_lineOptions8, _points_i_lineOptions9, _points_i_lineOptions10, _points_i_lineOptions11;
-                            const lineBorderWidth = ((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
-                            if (lineBorderWidth > 0) {
-                                var _points_i_lineOptions12, _points_i_lineOptions13, _points_i_lineOptions14;
-                                var _points_i_lineOptions_strokeLinecap3;
-                                bordersForLine.push(/*#__PURE__*/ _react.createElement("line", {
-                                    id: borderId,
-                                    key: borderId,
-                                    x1: _xAxisScale(x1),
-                                    y1: yScale(y1),
-                                    x2: _xAxisScale(x2),
-                                    y2: yScale(y2),
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
-                                    strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                                    ...((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.lineBorderColor) && {
-                                        stroke: (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.lineBorderColor
-                                    },
-                                    className: classes.lineBorder,
-                                    opacity: 1
-                                }));
-                            }
-                            var _points_i_lineOptions_strokeLinecap4;
-                            linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
-                                id: lineId,
-                                key: lineId,
-                                x1: _xAxisScale(x1),
-                                y1: yScale(y1),
-                                x2: _xAxisScale(x2),
-                                y2: yScale(y2),
-                                strokeWidth: strokeWidth,
-                                ref: (e)=>{
-                                    _refCallback(e, lineId);
-                                },
-                                onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                                onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                        }));
+                    }
+                    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 ((0, _index1.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,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
-                                strokeDasharray: (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDashoffset,
-                                opacity: 1,
-                                ..._getClickHandler(_points[i].onLineClick)
-                            }));
-                        }
-                    } else {
-                        if (!isInGap) {
-                            var _points_i_lineOptions15, _points_i_lineOptions16, _points_i_lineOptions17;
-                            var _points_i_lineOptions_strokeLinecap5;
-                            linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
-                                id: lineId,
-                                key: lineId,
-                                x1: _xAxisScale(x1),
-                                y1: yScale(y1),
-                                x2: _xAxisScale(x2),
-                                y2: yScale(y2),
                                 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,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
-                                strokeDasharray: (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeDashoffset,
-                                opacity: 0.1
-                            }));
+                                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 ((0, _index1.isPlottable)(xPoint1, yPoint1) && (0, _index1.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) {
+                                var _points_i_lineOptions14, _points_i_lineOptions15, _points_i_lineOptions16, _points_i_lineOptions17;
+                                const lineBorderWidth = ((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                                if (lineBorderWidth > 0) {
+                                    var _points_i_lineOptions18, _points_i_lineOptions19;
+                                    var _points_i_lineOptions_strokeLinecap3;
+                                    bordersForLine.push(/*#__PURE__*/ _react.createElement("line", {
+                                        id: borderId,
+                                        key: borderId,
+                                        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) || _reacttheme.tokens.colorNeutralBackground1,
+                                        opacity: 1
+                                    }));
+                                }
+                                var _points_i_lineOptions_strokeLinecap4;
+                                linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
+                                    id: lineId,
+                                    key: lineId,
+                                    x1: xPoint1,
+                                    y1: yPoint1,
+                                    x2: xPoint2,
+                                    y2: yPoint2,
+                                    strokeWidth: strokeWidth,
+                                    ref: (e)=>{
+                                        _refCallback(e, lineId);
+                                    },
+                                    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,
+                                    stroke: lineColor,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeDashoffset,
+                                    opacity: 1,
+                                    ..._getClickHandler(_points[i].onLineClick)
+                                }));
+                            }
+                        } else {
+                            if (!isInGap) {
+                                var _points_i_lineOptions20, _points_i_lineOptions21, _points_i_lineOptions22;
+                                var _points_i_lineOptions_strokeLinecap5;
+                                linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
+                                    id: lineId,
+                                    key: lineId,
+                                    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',
+                                    strokeDasharray: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeDashoffset,
+                                    opacity: 0.1
+                                }));
+                            }
                         }
                     }
                 }
             }
+            if (_isScatterPolar) {
+                var _points_i;
+                pointsForLine.push(...(0, _scatterpolarutils.renderScatterPolarCategoryLabels)({
+                    xAxisScale: _xAxisScale,
+                    yAxisScale: yScale,
+                    className: classes.markerLabel || '',
+                    lineOptions: (_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.lineOptions
+                }));
+            }
             lines.push(/*#__PURE__*/ _react.createElement("g", {
                 key: `line_${i}`,
                 role: "region",
@@ -847,11 +992,24 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             setActivePoint(circleId);
         }
     }
-    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale) {
+    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
         const formattedData = x instanceof Date ? (0, _index1.formatDate)(x, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;
+        const yVal = y instanceof Date ? y.getTime() : y;
         const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
+        let hoverDp = undefined;
+        if (props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
+            const dp = (0, _index1.find)(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === yVal);
+            if (dp) {
+                hoverDp = {
+                    x: xVal,
+                    values: [
+                        dp
+                    ]
+                };
+            }
+        }
         // if no points need to be called out then don't show vertical line and callout card
         if (found) {
             (0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
@@ -860,8 +1018,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 updatePosition(mouseEvent.clientX, mouseEvent.clientY);
                 xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
                 setYValueHover(found.values);
+                setYValue(yVal);
+                setLegendVal(legendVal);
+                setLineColor(lineColor);
                 setStackCalloutProps(found);
-                setDataPointCalloutProps(found);
+                setDataPointCalloutProps(hoverDp);
                 setActivePoint(circleId);
                 setNearestCircleToHighlight(null);
             }
@@ -990,7 +1151,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     }
     const { legendProps, tickValues, tickFormat, eventAnnotationProps } = props;
     _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-    const isXAxisDateType = (0, _index1.getXAxisType)(_points);
+    _isXAxisDateType = (0, _index1.getXAxisType)(_points);
     let points = _points;
     if (legendProps && !!legendProps.canSelectMultipleLegends) {
         points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
@@ -1007,13 +1168,17 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const calloutProps = {
         YValueHover: YValueHover,
         hoverXValue: hoverXValue,
+        YValue: YValue,
+        legend: legendVal,
+        color: lineColor,
+        XValue: hoverXValue,
         descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
         'data-is-focusable': true,
         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
         ...props.calloutProps,
         clickPosition: clickPosition,
         isPopoverOpen: isPopoverOpen,
-        isCalloutForStack: true,
+        isCalloutForStack: props.isCalloutForStack,
         culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
         isCartesian: true,
         customCallout: {
@@ -1035,9 +1200,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         legendBars: legendBars,
         createYAxis: _index1.createNumericYAxis,
         getmargins: _getMargins,
-        getMinMaxOfYAxis: _index1.findNumericMinMaxOfY,
+        getMinMaxOfYAxis: _getNumericMinMaxOfY,
         getGraphData: _initializeLineChartData,
-        xAxisType: isXAxisDateType ? _index1.XAxisTypes.DateAxis : _index1.XAxisTypes.NumericAxis,
+        xAxisType: _isXAxisDateType ? _index1.XAxisTypes.DateAxis : _index1.XAxisTypes.NumericAxis,
+        ..._isScatterPolar ? {
+            yMaxValue: 1,
+            yMinValue: -1
+        } : {},
         getDomainNRangeValues: _getDomainNRangeValues,
         createStringYAxis: _index1.createStringYAxis,
         onChartMouseLeave: _handleChartMouseLeave,
@@ -1079,3 +1248,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     });
 });
 LineChart.displayName = 'LineChart';
+LineChart.defaultProps = {
+    isCalloutForStack: true
+};