@fluentui/react-charts 0.0.0-nightly-20250826-0412.1 → 0.0.0-nightly-20250826-2140.1

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

@@ -96,7 +96,6 @@ 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 _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints = (0, _index1.calloutData)(_points) || [];
@@ -150,9 +149,6 @@ 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);
@@ -441,18 +437,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const verticaLineHeight = containerHeight - margins.bottom + 6;
             const yScale = _points[i].useSecondaryYScale && _yScaleSecondary ? _yScaleSecondary : _yScalePrimary;
             if (_points[i].data.length === 1) {
-                var _points_i_lineOptions_mode, _points_i_lineOptions1;
                 // eslint-disable-next-line @typescript-eslint/no-shadow
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
                 const circleId = `${_circleId}_${i}`;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const currentMarkerSize = _points[i].data[0].markerSize;
-                const supportsTextMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions1.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
-                const text = _points[i].data[0].text;
                 var _points_i_data__text;
-                pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_react.Fragment, {
-                    key: `${circleId}_fragment`
-                }, /*#__PURE__*/ _react.createElement("circle", {
+                pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
                     id: circleId,
                     key: circleId,
                     r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
@@ -461,8 +452,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),
+                    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 : '',
@@ -475,13 +466,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                     onBlur: _handleMouseOut,
                     ..._getClickHandler(_points[i].data[0].onDataPointClick)
-                }), supportsTextMode && text && /*#__PURE__*/ _react.createElement("text", {
+                }), _points[i].data[0].text && /*#__PURE__*/ _react.createElement("text", {
                     key: `${circleId}-label`,
                     x: _xAxisScale(x1),
                     y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
                     className: classes.markerLabel,
                     opacity: isLegendSelected ? 1 : 0.1
-                }, text))));
+                }, _points[i].data[0].text)));
             }
             let gapIndex = 0;
             var _points_i_gaps_sort;
@@ -489,13 +480,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_lineOptions1;
                 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));
                 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_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.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++){
@@ -505,19 +496,19 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     ]);
                 }
                 if (isLegendSelected) {
-                    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;
+                    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;
                     if (lineBorderWidth > 0) {
-                        var _points_i_lineOptions5, _points_i_lineOptions6;
+                        var _points_i_lineOptions4, _points_i_lineOptions5;
                         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_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',
+                            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',
                             strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                            stroke: ((_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
+                            stroke: ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
                             opacity: 1
                         }));
                     }
@@ -530,7 +521,7 @@ 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',
+                        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',
                         onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                         onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                         onMouseOut: _handleMouseOut,
@@ -539,7 +530,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         tabIndex: isLegendSelected ? 0 : undefined
                     }));
                 } else {
-                    var _points_i_lineOptions7;
+                    var _points_i_lineOptions6;
                     var _points_i_lineOptions_strokeLinecap2;
                     linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
                         id: lineId,
@@ -549,7 +540,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         "data-is-focusable": false,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        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',
+                        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',
                         opacity: 0.1
                     }));
                 }
@@ -569,7 +560,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_lineOptions8, _points_i_lineOptions_mode1, _points_i_lineOptions9, _points_i_lineOptions_mode2, _points_i_lineOptions10, _points_i_lineOptions_mode3, _points_i_lineOptions11;
+                    var _points_i_lineOptions7, _points_i_lineOptions_mode, _points_i_lineOptions8, _points_i_lineOptions_mode1, _points_i_lineOptions9;
                     const gapResult = _checkInGap(j, gaps, gapIndex);
                     const isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -579,22 +570,20 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     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_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    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 isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                    const supportsTextMode = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions9.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
-                    const text = _points[i].data[j - 1].text;
                     let currentMarkerSize = _points[i].data[j - 1].markerSize;
                     var _points_i_data__text1;
-                    pointsForLine.push(((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) || supportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
+                    pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
                         id: circleId,
                         key: circleId,
                         r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                         cx: _xAxisScale(x1),
                         cy: yScale(y1),
                         "data-is-focusable": isLegendSelected,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                        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,
@@ -605,19 +594,19 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         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)
-                    }), supportsTextMode && text && /*#__PURE__*/ _react.createElement("text", {
+                    }), _points[i].data[j - 1].text && /*#__PURE__*/ _react.createElement("text", {
                         key: `${circleId}-label`,
                         x: _xAxisScale(x1),
-                        y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
-                        className: classes.markerLabel,
-                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01
-                    }, text)) : /*#__PURE__*/ _react.createElement("path", {
+                        y: yScale(y1) + 12,
+                        fontSize: 12,
+                        className: classes.markerLabel
+                    }, _points[i].data[j - 1].text)) : /*#__PURE__*/ _react.createElement("path", {
                         id: circleId,
                         key: circleId,
                         d: path,
                         "data-is-focusable": isLegendSelected,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                        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,
@@ -631,7 +620,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         tabIndex: isLegendSelected ? 0 : undefined
                     }));
                     if (j + 1 === _points[i].data.length) {
-                        var _points_i_lineOptions_mode4, _points_i_lineOptions12, _points_i_lineOptions_mode5, _points_i_lineOptions13;
+                        var _points_i_lineOptions_mode2, _points_i_lineOptions10;
                         // If this is last point of the line segment.
                         const lastCircleId = `${circleId}${j}L`;
                         const hiddenHoverCircleId = `${circleId}${j}D`;
@@ -639,20 +628,18 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                         path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
                         const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
                         currentMarkerSize = _points[i].data[j].markerSize;
-                        const lastSupportsTextMode = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions12.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
-                        const lastText = _points[i].data[j].text;
                         var _points_i_data_j_text;
                         pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
                             key: `${lastCircleId}_container`
-                        }, ((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
+                        }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
                             id: lastCircleId,
                             key: lastCircleId,
                             r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                             cx: _xAxisScale(x2),
                             cy: yScale(y2),
                             "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),
+                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseOut: _handleMouseOut,
                             onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
@@ -663,18 +650,19 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                             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)
-                        }), lastSupportsTextMode && lastText && /*#__PURE__*/ _react.createElement("text", {
+                        }), _points[i].data[j].text && /*#__PURE__*/ _react.createElement("text", {
                             key: `${lastCircleId}-label`,
                             x: _xAxisScale(x2),
-                            y: yScale(y2) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
+                            y: yScale(y2) + 12,
+                            fontSize: 12,
                             className: classes.markerLabel
-                        }, text)) : /*#__PURE__*/ _react.createElement("path", {
+                        }, _points[i].data[j].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),
+                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseOut: _handleMouseOut,
                             onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
@@ -694,8 +682,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                             cy: yScale(y2),
                             opacity: 0,
                             width: 0,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
+                            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,
@@ -703,14 +691,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                             onBlur: _handleMouseOut
                         })));
                     }
-                    if (!_hasMarkersMode || ((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions11.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('lines'))) {
+                    if (!_hasMarkersMode || ((_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('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;
+                                var _points_i_lineOptions11, _points_i_lineOptions12, _points_i_lineOptions13, _points_i_lineOptions14;
+                                const lineBorderWidth = ((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
                                 if (lineBorderWidth > 0) {
-                                    var _points_i_lineOptions18, _points_i_lineOptions19;
+                                    var _points_i_lineOptions15, _points_i_lineOptions16;
                                     var _points_i_lineOptions_strokeLinecap3;
                                     bordersForLine.push(/*#__PURE__*/ _react.createElement("line", {
                                         id: borderId,
@@ -719,9 +707,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                         y1: yScale(y1),
                                         x2: _xAxisScale(x2),
                                         y2: yScale(y2),
-                                        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',
+                                        strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.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,
+                                        stroke: ((_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
                                         opacity: 1
                                     }));
                                 }
@@ -737,20 +725,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),
+                                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                                     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,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.strokeDashoffset,
                                     opacity: 1,
                                     ..._getClickHandler(_points[i].onLineClick)
                                 }));
                             }
                         } else {
                             if (!isInGap) {
-                                var _points_i_lineOptions20, _points_i_lineOptions21, _points_i_lineOptions22;
+                                var _points_i_lineOptions17, _points_i_lineOptions18, _points_i_lineOptions19;
                                 var _points_i_lineOptions_strokeLinecap5;
                                 linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
                                     id: lineId,
@@ -761,9 +749,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                                     y2: yScale(y2),
                                     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,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : '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,
                                     opacity: 0.1
                                 }));
                             }
@@ -968,24 +956,11 @@ 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) {
         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)}`);
@@ -994,11 +969,8 @@ 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(hoverDp);
+                setDataPointCalloutProps(found);
                 setActivePoint(circleId);
                 setNearestCircleToHighlight(null);
             }
@@ -1123,16 +1095,23 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
     function _getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues = [], chartType, barWidth) {
-        _setXMinMaxValues(points);
+        let sDate;
+        let lDate;
+        sDate = (0, _d3array.min)(points, (point)=>{
+            return (0, _d3array.min)(point.data, (item)=>item.x);
+        });
+        lDate = (0, _d3array.max)(points, (point)=>{
+            return (0, _d3array.max)(point.data, (item)=>item.x);
+        });
         // Include tickValues if present
-        const sDate = tickValues && tickValues.length > 0 ? (0, _d3array.min)([
+        sDate = (0, _d3array.min)([
             ...tickValues,
-            new Date(_xMin)
-        ]) : new Date(_xMin);
-        const lDate = tickValues && tickValues.length > 0 ? (0, _d3array.max)([
+            sDate
+        ]);
+        lDate = (0, _d3array.max)([
             ...tickValues,
-            new Date(_xMax)
-        ]) : new Date(_xMax);
+            lDate
+        ]);
         // Calculate time-based padding (e.g. 10% of the date range)
         const dateRange = lDate.getTime() - sDate.getTime();
         const datePadding = _hasMarkersMode ? dateRange * 0.1 : 0;
@@ -1153,7 +1132,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         };
     }
     function _getDomainNRangeValuesWithPadding(points, margins, width, isRTL) {
-        _setXMinMaxValues(points);
+        _xMin = (0, _d3array.min)(points, (point)=>{
+            return (0, _d3array.min)(point.data, (item)=>item.x);
+        });
+        _xMax = (0, _d3array.max)(points, (point)=>{
+            return (0, _d3array.max)(point.data, (item)=>{
+                return item.x;
+            });
+        });
         if (_hasMarkersMode) {
             _xPadding = (_xMax - _xMin) * 0.1;
         }
@@ -1174,18 +1160,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _isChartEmpty() {
         return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
     }
-    function _setXMinMaxValues(points) {
-        const getX = (item)=>_isXAxisDateType ? item.x : item.x;
-        const minVal = (0, _d3array.min)(points, (point)=>(0, _d3array.min)(point.data, getX));
-        const maxVal = (0, _d3array.max)(points, (point)=>(0, _d3array.max)(point.data, getX));
-        _xMin = _isXAxisDateType ? minVal.getTime() : minVal;
-        _xMax = _isXAxisDateType ? maxVal.getTime() : maxVal;
-        _xMin = _xMin === Number.NEGATIVE_INFINITY || !_xMin ? 0 : _xMin;
-        _xMax = _xMax === Number.POSITIVE_INFINITY || !_xMax ? 0 : _xMax;
-    }
     const { legendProps, tickValues, tickFormat, eventAnnotationProps } = props;
     _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-    _isXAxisDateType = (0, _index1.getXAxisType)(_points);
+    const isXAxisDateType = (0, _index1.getXAxisType)(_points);
     let points = _points;
     if (legendProps && !!legendProps.canSelectMultipleLegends) {
         points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
@@ -1202,17 +1179,13 @@ 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: props.isCalloutForStack,
+        isCalloutForStack: true,
         culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
         isCartesian: true,
         customCallout: {
@@ -1236,7 +1209,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         getmargins: _getMargins,
         getMinMaxOfYAxis: _getNumericMinMaxOfY,
         getGraphData: _initializeLineChartData,
-        xAxisType: _isXAxisDateType ? _index1.XAxisTypes.DateAxis : _index1.XAxisTypes.NumericAxis,
+        xAxisType: isXAxisDateType ? _index1.XAxisTypes.DateAxis : _index1.XAxisTypes.NumericAxis,
         getDomainNRangeValues: _getDomainNRangeValues,
         createStringYAxis: _index1.createStringYAxis,
         onChartMouseLeave: _handleChartMouseLeave,
@@ -1278,6 +1251,3 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     });
 });
 LineChart.displayName = 'LineChart';
-LineChart.defaultProps = {
-    isCalloutForStack: true
-};