@fluentui/react-charts 9.3.2 → 9.3.4

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

@@ -103,8 +103,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let _isScatterPolar = false;
     let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let _calloutPoints = (0, _index1.calloutData)(_points) || [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _xAxisScale = '';
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _yScalePrimary = '';
@@ -134,7 +132,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = _react.useState('');
     const [activeLegend, setActiveLegend] = _react.useState('');
-    const [YValueHover, setYValueHover] = _react.useState([]);
+    const [yValueHover, setYValueHover] = _react.useState([]);
     const [selectedLegend, setSelectedLegend] = _react.useState('');
     const [selectedLegendPoints, setSelectedLegendPoints] = _react.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
     const [selectedColorBarLegend, setSelectedColorBarLegend] = _react.useState([]);
@@ -152,8 +150,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const [YValue, setYValue] = _react.useState('');
     const [legendVal, setLegendVal] = _react.useState('');
     const [lineColor, setLineColor] = _react.useState('');
+    const [refSelected, setRefSelected] = _react.useState(null);
     const pointsRef = _react.useRef([]);
-    const calloutPointsRef = _react.useRef([]);
+    const calloutPointsRef = _react.useRef({});
     const classes = (0, _useLineChartStylesstyles.useLineChartStyles)(props);
     _react.useEffect(()=>{
         /** note that height and width are not used to resize or set as dimesions of the chart,
@@ -425,7 +424,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             });
         });
         for(let i = _points.length - 1; i >= 0; i--){
-            var _points_i_gaps, _points_i_lineOptions;
+            var _points_i_gaps, _points_i_lineOptions, _points_i_lineOptions1;
             const linesForLine = [];
             const bordersForLine = [];
             const pointsForLine = [];
@@ -450,12 +449,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 const xPoint = _xAxisScale(x1);
                 const yPoint = yScale(y1);
                 if ((0, _index1.isPlottable)(xPoint, yPoint)) {
-                    var _points_i_lineOptions_mode, _points_i_lineOptions1;
+                    var _points_i_lineOptions_mode, _points_i_lineOptions2;
                     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 supportsTextMode = (_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions2.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
                     const text = _points[i].data[0].text;
+                    const targetElement = document.getElementById(circleId);
                     var _points_i_data__text;
                     pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_react.Fragment, {
                         key: `${circleId}_fragment`
@@ -468,8 +468,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         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),
+                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                         onMouseOut: _handleMouseOut,
                         strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
                         stroke: activePoint === circleId ? lineColor : '',
@@ -479,7 +479,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         ref: (e)=>{
                             _refCallback(e, circleId);
                         },
-                        onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
                         onBlur: _handleMouseOut,
                         ..._getClickHandler(_points[i].data[0].onDataPointClick)
                     }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ _react.createElement("text", {
@@ -497,13 +497,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_lineOptions2;
+                var _points_i_lineOptions3, _points_i_lineOptions4;
                 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)).defined((d)=>(0, _index1.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;
+                const strokeWidth = ((_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.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++){
@@ -512,20 +512,23 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         _points[i].data[k].y
                     ]);
                 }
-                if (isLegendSelected) {
-                    var _points_i_lineOptions3, _points_i_lineOptions4, _points_i_lineOptions5;
-                    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;
+                // Check if lines should be drawn based on mode
+                const lineMode = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.mode;
+                const shouldDrawLines = lineMode !== 'markers';
+                if (shouldDrawLines && isLegendSelected) {
+                    var _points_i_lineOptions5, _points_i_lineOptions6, _points_i_lineOptions7;
+                    const lineBorderWidth = ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
                     if (lineBorderWidth > 0) {
-                        var _points_i_lineOptions6, _points_i_lineOptions7;
+                        var _points_i_lineOptions8, _points_i_lineOptions9;
                         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_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
+                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
                             strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                            stroke: ((_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
+                            stroke: ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
                             opacity: 1
                         }));
                     }
@@ -538,8 +541,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         "data-is-focusable": true,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        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',
-                        strokeDasharray: (_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.strokeDasharray,
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
+                        strokeDasharray: (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeDasharray,
                         onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
                         onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
                         onMouseOut: _handleMouseOut,
@@ -547,8 +550,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         opacity: 1,
                         tabIndex: isLegendSelected ? 0 : undefined
                     }));
-                } else {
-                    var _points_i_lineOptions8, _points_i_lineOptions9;
+                } else if (shouldDrawLines) {
+                    var _points_i_lineOptions10, _points_i_lineOptions11;
                     var _points_i_lineOptions_strokeLinecap2;
                     linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
                         id: lineId,
@@ -558,11 +561,12 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         "data-is-focusable": false,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
-                        strokeDasharray: (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeDasharray,
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
+                        strokeDasharray: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDasharray,
                         opacity: 0.1
                     }));
                 }
+                // Always add the highlight circle for large dataset hover
                 pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
                     id: `${_staticHighlightCircle}_${i}`,
                     key: `${_staticHighlightCircle}_${i}`,
@@ -577,9 +581,36 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
                     onMouseOut: _handleMouseOut
                 }));
+                // Add individual markers if mode includes 'markers'
+                const showMarkers = !!(lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'));
+                if (showMarkers) {
+                    for(let k = 0; k < _points[i].data.length; k++){
+                        const { x, y } = _points[i].data[k];
+                        const xPoint = _xAxisScale(x instanceof Date ? x.getTime() : x);
+                        const yPoint = yScale(y);
+                        if ((0, _index1.isPlottable)(xPoint, yPoint)) {
+                            var _points_i_data_k, _points_i;
+                            const markerSize = _points[i].data[k].markerSize;
+                            const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
+                            pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
+                                key: `${_circleId}_${i}_${k}_marker`,
+                                r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
+                                cx: xPoint,
+                                cy: yPoint,
+                                fill: activePoint === _circleId ? _reacttheme.tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
+                                stroke: perPointColor || lineColor,
+                                strokeWidth: 1,
+                                opacity: isLegendSelected ? 1 : 0.1,
+                                onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
+                                onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
+                                onMouseOut: _handleMouseOut
+                            }));
+                        }
+                    }
+                }
             } else if (!props.optimizeLargeData) {
                 for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions10, _points_i_lineOptions_mode1, _points_i_lineOptions11, _points_i_lineOptions_mode2, _points_i_lineOptions12;
+                    var _points_i_lineOptions12, _points_i_lineOptions_mode1, _points_i_lineOptions13, _points_i_lineOptions_mode2, _points_i_lineOptions14;
                     const gapResult = _checkInGap(j, gaps, gapIndex);
                     const isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -592,32 +623,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     const yPoint1 = yScale(y1);
                     const xPoint2 = _xAxisScale(x2);
                     const yPoint2 = yScale(y2);
-                    const strokeWidth = ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    const strokeWidth = ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                    const supportsTextMode = (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions11.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
+                    const supportsTextMode = (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions13.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_lineOptions13;
+                        var _points_i_lineOptions_mode3, _points_i_lineOptions15, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
                         const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
+                        const targetElement = document.getElementById(circleId);
                         var _points_i_data__text1;
-                        pointsForLine.push(((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions13.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", {
+                        pointsForLine.push(((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions15.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),
+                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
                             ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
                             opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                            fill: _getPointFill(lineColor, circleId, j, false),
-                            stroke: lineColor,
+                            fill: ((_points_i_data_ = _points[i].data[j - 1]) === null || _points_i_data_ === void 0 ? void 0 : _points_i_data_.markerColor) || _getPointFill(lineColor, circleId, j, false),
+                            stroke: ((_points_i_data_1 = _points[i].data[j - 1]) === null || _points_i_data_1 === void 0 ? void 0 : _points_i_data_1.markerColor) || 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)
@@ -632,15 +664,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                             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),
+                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
                             ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
                             opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                            fill: _getPointFill(lineColor, circleId, j, false),
-                            stroke: lineColor,
+                            fill: ((_points_i_data_2 = _points[i].data[j - 1]) === null || _points_i_data_2 === void 0 ? void 0 : _points_i_data_2.markerColor) || _getPointFill(lineColor, circleId, j, false),
+                            stroke: ((_points_i_data_3 = _points[i].data[j - 1]) === null || _points_i_data_3 === void 0 ? void 0 : _points_i_data_3.markerColor) || lineColor,
                             strokeWidth: strokeWidth,
                             role: "img",
                             "aria-label": _getAriaLabel(i, j - 1),
@@ -648,32 +680,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         }));
                     }
                     if (j + 1 === _points[i].data.length) {
-                        var _points_i_lineOptions_mode4, _points_i_lineOptions14;
+                        var _points_i_lineOptions_mode4, _points_i_lineOptions16;
                         // 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_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions14.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
+                        const lastSupportsTextMode = (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions16.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_lineOptions15;
+                            var _points_i_lineOptions_mode5, _points_i_lineOptions17, _points_i_data_j, _points_i_data_j1;
                             const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
+                            const targetElement = document.getElementById(lastCircleId);
                             var _points_i_data_j_text;
                             pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
                                 key: `${lastCircleId}_container`
-                            }, ((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions15.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", {
+                            }, ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions17.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),
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
-                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
                                 onBlur: _handleMouseOut,
                                 ..._getClickHandler(_points[i].data[j].onDataPointClick),
                                 opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
@@ -692,15 +725,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                 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),
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
-                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
                                 onBlur: _handleMouseOut,
                                 ..._getClickHandler(_points[i].data[j].onDataPointClick),
                                 opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
-                                fill: _getPointFill(lineColor, lastCircleId, j, true),
-                                stroke: lineColor,
+                                fill: ((_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.markerColor) || _getPointFill(lineColor, lastCircleId, j, true),
+                                stroke: ((_points_i_data_j1 = _points[i].data[j]) === null || _points_i_data_j1 === void 0 ? void 0 : _points_i_data_j1.markerColor) || lineColor,
                                 strokeWidth: strokeWidth,
                                 role: "img",
                                 "aria-label": _getAriaLabel(i, j),
@@ -713,8 +746,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                 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),
+                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
                                 strokeWidth: 0,
                                 focusable: false,
@@ -722,14 +755,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                             })));
                         }
                     }
-                    if ((0, _index1.isPlottable)(xPoint1, yPoint1) && (0, _index1.isPlottable)(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions12.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
+                    if ((0, _index1.isPlottable)(xPoint1, yPoint1) && (0, _index1.isPlottable)(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions14.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_lineOptions16, _points_i_lineOptions17, _points_i_lineOptions18, _points_i_lineOptions19;
-                                const lineBorderWidth = ((_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                                var _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20, _points_i_lineOptions21;
+                                const lineBorderWidth = ((_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                                const targetElement = document.getElementById(circleId);
                                 if (lineBorderWidth > 0) {
-                                    var _points_i_lineOptions20, _points_i_lineOptions21;
+                                    var _points_i_lineOptions22, _points_i_lineOptions23;
                                     var _points_i_lineOptions_strokeLinecap3;
                                     bordersForLine.push(/*#__PURE__*/ _react.createElement("line", {
                                         id: borderId,
@@ -738,9 +772,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                         y1: yPoint1,
                                         x2: xPoint2,
                                         y2: yPoint2,
-                                        strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
+                                        strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
                                         strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                                        stroke: ((_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
+                                        stroke: ((_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
                                         opacity: 1
                                     }));
                                 }
@@ -756,20 +790,20 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                     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),
+                                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
+                                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                     onMouseOut: _handleMouseOut,
                                     stroke: lineColor,
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
-                                    strokeDasharray: (_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.strokeDasharray,
-                                    strokeDashoffset: (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeDashoffset,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDashoffset,
                                     opacity: 1,
                                     ..._getClickHandler(_points[i].onLineClick)
                                 }));
                             }
                         } else {
                             if (!isInGap) {
-                                var _points_i_lineOptions22, _points_i_lineOptions23, _points_i_lineOptions24;
+                                var _points_i_lineOptions24, _points_i_lineOptions25, _points_i_lineOptions26;
                                 var _points_i_lineOptions_strokeLinecap5;
                                 linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
                                     id: lineId,
@@ -780,9 +814,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                     y2: yPoint2,
                                     strokeWidth: strokeWidth,
                                     stroke: lineColor,
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
-                                    strokeDasharray: (_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.strokeDasharray,
-                                    strokeDashoffset: (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeDashoffset,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions26 = _points[i].lineOptions) === null || _points_i_lineOptions26 === void 0 ? void 0 : _points_i_lineOptions26.strokeDashoffset,
                                     opacity: 0.1
                                 }));
                             }
@@ -790,13 +824,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     }
                 }
             }
+            // Add filled area for scatterpolar charts
+            const fillMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.fill;
+            const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
+            if (fillMode === 'toself' && _points[i].data.length >= 3 && isLegendSelected && _isScatterPolar) {
+                const getScaledXValue = (dataPoint)=>_xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
+                const fillPathGenerator = (0, _d3shape.line)().x((dataPoint)=>getScaledXValue(dataPoint)).y((dataPoint)=>yScale(dataPoint.y)).curve((0, _index1.getCurveFactory)(lineCurve)).defined((dataPoint)=>(0, _index1.isPlottable)(getScaledXValue(dataPoint), yScale(dataPoint.y)));
+                const fillPath = fillPathGenerator(_points[i].data);
+                if (fillPath) {
+                    linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
+                        key: `scatterpolar_fill_${i}`,
+                        d: `${fillPath}Z`,
+                        fill: lineColor,
+                        fillOpacity: 0.5,
+                        stroke: lineColor,
+                        strokeWidth: 2,
+                        strokeOpacity: 0.8,
+                        pointerEvents: "none"
+                    }));
+                }
+            }
             if (_isScatterPolar) {
-                var _points_i;
+                var _points_i1;
                 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
+                    lineOptions: (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
                 }));
             }
             lines.push(/*#__PURE__*/ _react.createElement("g", {
@@ -942,11 +996,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
         const formattedDate = xPointToHighlight instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
-        const modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const found = (0, _index1.find)(_calloutPoints, (element)=>{
-            return element.x === modifiedXVal;
-        });
+        const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, xPointToHighlight);
         const pointToHighlight = lineChartData[linenumber].data[index];
         const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
         // if no points need to be called out then don't show vertical line and callout card
@@ -954,8 +1004,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
             (0, _d3selection.select)(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
             (0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
+            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
+            const rect = targetElement.getBoundingClientRect();
             setNearestCircleToHighlight(pointToHighlight);
-            updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+            updatePosition(rect.x, rect.y);
             setStackCalloutProps(found);
             setYValueHover(found.values);
             setDataPointCalloutProps(found);
@@ -968,17 +1020,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             setActivePoint('');
         }
     };
-    function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
-        let cx = 0;
-        let cy = 0;
-        const targetRect = event.target.getBoundingClientRect();
-        cx = targetRect.left + targetRect.width / 2;
-        cy = targetRect.top + targetRect.height / 2;
-        updatePosition(cx, cy);
+    function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
         _uniqueCallOutID = circleId;
         const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
-        const xVal = x instanceof Date ? x.getTime() : x;
-        const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
+        const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, x);
         // 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)}, 0)`).attr('visibility', 'visibility');
@@ -987,6 +1032,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     setPopoverOpen(true);
                     xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
                     setYValueHover(found.values);
+                    setRefSelected(targetElement);
                     setStackCalloutProps(found);
                     setDataPointCalloutProps(found);
                     setActivePoint(circleId);
@@ -996,18 +1042,16 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             setActivePoint(circleId);
         }
     }
-    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
+    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
         const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, 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);
+        const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, x);
         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);
+            const dp = (0, _index1.find)(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === y);
             if (dp) {
                 hoverDp = {
-                    x: xVal,
+                    x,
                     values: [
                         dp
                     ]
@@ -1019,10 +1063,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             (0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
             if (_uniqueCallOutID !== circleId) {
                 _uniqueCallOutID = circleId;
-                updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+                setRefSelected(targetElement);
+                setPopoverOpen(true);
                 xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
                 setYValueHover(found.values);
-                setYValue(yVal);
+                setYValue(y);
                 setLegendVal(legendVal);
                 setLineColor(lineColor);
                 setStackCalloutProps(found);
@@ -1159,7 +1204,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let points = _points;
     if (legendProps && !!legendProps.canSelectMultipleLegends) {
         points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
-        _calloutPoints = (0, _index1.calloutData)(points);
+        calloutPointsRef.current = (0, _index1.calloutData)(points);
     }
     let legendBars = null;
     // reduce computation cost by only creating legendBars
@@ -1169,7 +1214,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
     }
     const calloutProps = {
-        YValueHover: YValueHover,
+        YValueHover: yValueHover,
         hoverXValue: hoverXValue,
         YValue: YValue,
         legend: legendVal,
@@ -1179,8 +1224,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         'data-is-focusable': true,
         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
         ...props.calloutProps,
-        clickPosition: clickPosition,
         isPopoverOpen: isPopoverOpen,
+        clickPosition: clickPosition,
+        positioning: {
+            target: refSelected
+        },
         isCalloutForStack: props.isCalloutForStack,
         culture: props.culture,
         isCartesian: true,