@fluentui/react-charting 5.24.8 → 5.24.10

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

@@ -58,6 +58,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._yPaddingPrimary = 0;
             _this_1._yPaddingSecondary = 0;
             _this_1._hasMarkersMode = false;
+            _this_1._isXAxisDateType = false;
             _this_1.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.toImage)((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
@@ -404,10 +405,11 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     });
                 }
             };
-            _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, mouseEvent) {
+            _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor, mouseEvent) {
                 mouseEvent.persist();
                 var formattedData = x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(x, _this_1.props.culture, _this_1.props.useUTC) : x;
                 var xVal = x instanceof Date ? x.getTime() : x;
+                var yVal = y instanceof Date ? y.getTime() : y;
                 var _this = _this_1;
                 var found = (0, Utilities_1.find)(_this_1._calloutPoints, function (element) { return element.x === xVal; });
                 // if no points need to be called out then don't show vertical line and callout card
@@ -423,6 +425,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             refSelected: "#".concat(circleId),
                             hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
                             YValueHover: found.values,
+                            YValue: yVal,
+                            legendVal: legendVal,
+                            lineColor: lineColor,
                             stackCalloutProps: found,
                             dataPointCalloutProps: found,
                             activePoint: circleId,
@@ -585,17 +590,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             };
             _this_1._getDomainNRangeValuesOfDateWithPadding = function (points, margins, width, isRTL, tickValues, chartType, barWidth) {
                 if (tickValues === void 0) { tickValues = []; }
-                var sDate;
-                var lDate;
-                sDate = (0, d3_array_2.min)(points, function (point) {
-                    return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
-                });
-                lDate = (0, d3_array_2.max)(points, function (point) {
-                    return (0, d3_array_2.max)(point.data, function (item) { return item.x; });
-                });
+                _this_1._setXMinMaxValues(points);
                 // Include tickValues if present
-                sDate = (0, d3_array_2.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [sDate], false));
-                lDate = (0, d3_array_2.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [lDate], false));
+                var sDate = tickValues && tickValues.length > 0
+                    ? (0, d3_array_2.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMin)], false))
+                    : new Date(_this_1._xMin);
+                var lDate = tickValues && tickValues.length > 0
+                    ? (0, d3_array_2.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMax)], false))
+                    : new Date(_this_1._xMax);
                 // Calculate time-based padding (e.g. 10% of the date range)
                 var dateRange = lDate.getTime() - sDate.getTime();
                 var datePadding = _this_1._hasMarkersMode ? dateRange * 0.1 : 0;
@@ -618,14 +620,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     };
             };
             _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
-                _this_1._xMin = (0, d3_array_2.min)(points, function (point) {
-                    return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
-                });
-                _this_1._xMax = (0, d3_array_2.max)(points, function (point) {
-                    return (0, d3_array_2.max)(point.data, function (item) {
-                        return item.x;
-                    });
-                });
+                _this_1._setXMinMaxValues(points);
                 if (_this_1._hasMarkersMode) {
                     _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
                 }
@@ -649,11 +644,22 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
                 return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
             };
+            _this_1._setXMinMaxValues = function (points) {
+                var getX = function (item) { return (_this_1._isXAxisDateType ? item.x : item.x); };
+                var minVal = (0, d3_array_2.min)(points, function (point) { return (0, d3_array_2.min)(point.data, getX); });
+                var maxVal = (0, d3_array_2.max)(points, function (point) { return (0, d3_array_2.max)(point.data, getX); });
+                _this_1._xMin = _this_1._isXAxisDateType ? minVal.getTime() : minVal;
+                _this_1._xMax = _this_1._isXAxisDateType ? maxVal.getTime() : maxVal;
+                _this_1._xMin = _this_1._xMin === Number.NEGATIVE_INFINITY || !_this_1._xMin ? 0 : _this_1._xMin;
+                _this_1._xMax = _this_1._xMax === Number.POSITIVE_INFINITY || !_this_1._xMax ? 0 : _this_1._xMax;
+            };
             (0, Utilities_1.initializeComponentRef)(_this_1);
             _this_1.state = {
                 hoverXValue: '',
                 activeLegend: '',
                 YValueHover: [],
+                YValue: '',
+                legendVal: '',
                 refSelected: '',
                 selectedLegend: (_b = (_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== null && _b !== void 0 ? _b : '',
                 isCalloutVisible: false,
@@ -710,7 +716,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             var _this_1 = this;
             var _a = this.props, tickValues = _a.tickValues, tickFormat = _a.tickFormat, eventAnnotationProps = _a.eventAnnotationProps, legendProps = _a.legendProps, data = _a.data;
             this._points = this._injectIndexPropertyInLineChartData(data.lineChartData);
-            var isXAxisDateType = (0, index_3.getXAxisType)(this._points);
+            this._isXAxisDateType = (0, index_3.getXAxisType)(this._points);
             var points = this._points;
             if (legendProps && !!legendProps.canSelectMultipleLegends) {
                 points = this.state.selectedLegendPoints.length >= 1 ? this.state.selectedLegendPoints : this._points;
@@ -723,14 +729,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             if (!this.props.hideLegend) {
                 legendBars = this._createLegendsMemoized(this._points);
             }
-            var calloutProps = tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
+            var calloutProps = tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, YValue: this.state.YValue, legend: this.state.legendVal, color: this.state.lineColor, XValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
                     ? this.props.getCalloutDescriptionMessage(this.state.stackCalloutProps)
                     : undefined, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
             var tickParams = {
                 tickValues: tickValues,
                 tickFormat: tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
+            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: this._isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
                 /* eslint-disable react/jsx-no-bind */
                 // eslint-disable-next-line react/no-children-prop
                 children: function (props) {
@@ -833,7 +839,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
         };
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
             var _this_1 = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
             var lines = [];
             if (this.state.isSelectedLegend) {
                 this._points = this.state.selectedLegendPoints;
@@ -862,21 +868,27 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
                 var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
                 if (this_1._points[i].data.length === 1) {
-                    var _11 = this_1._points[i].data[0], x1_1 = _11.x, y1 = _11.y, xAxisCalloutData_1 = _11.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _11.xAxisCalloutAccessibilityData;
+                    var _17 = this_1._points[i].data[0], x1_1 = _17.x, y1 = _17.y, xAxisCalloutData_1 = _17.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _17.xAxisCalloutAccessibilityData;
                     var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentMarkerSize = this_1._points[i].data[0].markerSize;
-                    pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
-                            ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
-                            : activePoint === circleId_1
-                                ? 5.5
-                                : 3.5, cx: this_1._xAxisScale(x1_1), cy: yScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
-                            _this_1._refCallback(e, circleId_1);
-                        }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
+                    var supportsTextMode = (_b = (_a = this_1._points[i].lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes('text');
+                    var text = this_1._points[i].data[0].text;
+                    pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(circleId_1, "_fragment") },
+                        React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
+                                ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
+                                : activePoint === circleId_1
+                                    ? 5.5
+                                    : 3.5, cx: this_1._xAxisScale(x1_1), cy: yScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
+                                _this_1._refCallback(e, circleId_1);
+                            }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))),
+                        supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: this_1._xAxisScale(x1_1), y: yScale(y1) +
+                                Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
+                                12, className: classNames.markerLabel, opacity: isLegendSelected ? 1 : 0.1 }, text))));
                 }
                 var gapIndex = 0;
-                var gaps = (_b = (_a = this_1._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
-                var lineCurve = (_c = this_1._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.curve;
+                var gaps = (_d = (_c = this_1._points[i].gaps) === null || _c === void 0 ? void 0 : _c.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _d !== void 0 ? _d : [];
+                var lineCurve = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.curve;
                 // Use path rendering technique for larger datasets to optimize performance.
                 if ((this_1.props.optimizeLargeData || lineCurve) && this_1._points[i].data.length > 1) {
                     var line = (0, d3_shape_1.line)()
@@ -887,7 +899,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         .curve((0, index_3.getCurveFactory)(lineCurve));
                     var lineId = "".concat(this_1._lineId, "_").concat(i);
                     var borderId = "".concat(this_1._borderId, "_").concat(i);
-                    var strokeWidth = ((_d = this_1._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    var strokeWidth = ((_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var lineData = [];
                     for (var k = 0; k < this_1._points[i].data.length; k++) {
@@ -899,16 +911,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         ]);
                     }
                     if (isLegendSelected) {
-                        var lineBorderWidth = ((_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.lineBorderWidth)
+                        var lineBorderWidth = ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderWidth)
                             ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                             : 0;
                         if (lineBorderWidth > 0) {
-                            bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_g = (_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeLinecap) !== null && _g !== void 0 ? _g : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                            bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                         }
-                        linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_k = (_j = this_1._points[i].lineOptions) === null || _j === void 0 ? void 0 : _j.strokeLinecap) !== null && _k !== void 0 ? _k : 'round', strokeDasharray: (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeDasharray, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1 })));
+                        linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_m = (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeLinecap) !== null && _m !== void 0 ? _m : 'round', strokeDasharray: (_o = this_1._points[i].lineOptions) === null || _o === void 0 ? void 0 : _o.strokeDasharray, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1 })));
                     }
                     else {
-                        linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_o = (_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap) !== null && _o !== void 0 ? _o : 'round', strokeDasharray: (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeDasharray, opacity: 0.1 }));
+                        linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_q = (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeLinecap) !== null && _q !== void 0 ? _q : 'round', strokeDasharray: (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeDasharray, opacity: 0.1 }));
                     }
                     var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
                     pointsForLine.push(React.createElement("circle", { id: "".concat(this_1._staticHighlightCircle, "_").concat(i), key: "".concat(this_1._staticHighlightCircle, "_").concat(i), r: 5.5, cx: 0, cy: 0, fill: theme.semanticColors.bodyBackground, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
@@ -921,54 +933,62 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
                         var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
-                        var _12 = this_1._points[i].data[j - 1], x1 = _12.x, y1 = _12.y, xAxisCalloutData = _12.xAxisCalloutData, xAxisCalloutAccessibilityData = _12.xAxisCalloutAccessibilityData;
-                        var _13 = this_1._points[i].data[j], x2 = _13.x, y2 = _13.y;
+                        var _18 = this_1._points[i].data[j - 1], x1 = _18.x, y1 = _18.y, xAxisCalloutData = _18.xAxisCalloutData, xAxisCalloutAccessibilityData = _18.xAxisCalloutAccessibilityData;
+                        var _19 = this_1._points[i].data[j], x2 = _19.x, y2 = _19.y;
                         var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
-                        var strokeWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                        var strokeWidth = ((_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                         var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
+                        var supportsTextMode = (_u = (_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.mode) === null || _u === void 0 ? void 0 : _u.includes('text');
+                        var text = this_1._points[i].data[j - 1].text;
                         var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
-                        pointsForLine.push(((_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.mode) === null || _s === void 0 ? void 0 : _s.includes('markers')) ? (React.createElement(React.Fragment, null,
-                            React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                        pointsForLine.push(((_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.mode) === null || _w === void 0 ? void 0 : _w.includes('markers')) || supportsTextMode ? (React.createElement(React.Fragment, null,
+                            React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                     return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
-                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_t = this_1._points[i].data[j - 1].text) !== null && _t !== void 0 ? _t : this_1._getAriaLabel(i, j - 1) })),
-                            this_1._points[i].data[j - 1].text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j - 1].text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
+                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : this_1._getAriaLabel(i, j - 1) })),
+                            supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) +
+                                    Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
+                                    12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
                         if (j + 1 === this_1._points[i].data.length) {
                             // If this is last point of the line segment.
                             var lastCircleId_1 = "".concat(circleId).concat(j, "L");
                             var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
                             var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                             path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
-                            var _14 = this_1._points[i].data[j], lastCirlceXCallout_1 = _14.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _14.xAxisCalloutAccessibilityData;
+                            var _20 = this_1._points[i].data[j], lastCirlceXCallout_1 = _20.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _20.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
+                            var lastSupportsTextMode = (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('text');
+                            var lastText = this_1._points[i].data[j].text;
                             pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                ((_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.mode) === null || _v === void 0 ? void 0 : _v.includes('markers')) ? (React.createElement(React.Fragment, null,
-                                    React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                ((_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.mode) === null || _1 === void 0 ? void 0 : _1.includes('markers')) || lastSupportsTextMode ? (React.createElement(React.Fragment, null,
+                                    React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                             return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                                        }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_w = this_1._points[i].data[j].text) !== null && _w !== void 0 ? _w : this_1._getAriaLabel(i, j) })),
-                                    this_1._points[i].data[j].text && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j].text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                        }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j) })),
+                                    lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) +
+                                            Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
+                                            12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                         return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
                                     }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
-                                React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
+                                React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
                         }
-                        if (!this_1._hasMarkersMode || ((_y = (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.mode) === null || _y === void 0 ? void 0 : _y.includes('lines'))) {
+                        if (!this_1._hasMarkersMode || ((_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.mode) === null || _4 === void 0 ? void 0 : _4.includes('lines'))) {
                             if (isLegendSelected) {
                                 // don't draw line if it is in a gap
                                 if (!isInGap) {
-                                    var lineBorderWidth = ((_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.lineBorderWidth)
+                                    var lineBorderWidth = ((_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.lineBorderWidth)
                                         ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                                         : 0;
                                     if (lineBorderWidth > 0) {
-                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeLinecap) !== null && _1 !== void 0 ? _1 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_7 = (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeLinecap) !== null && _7 !== void 0 ? _7 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_8 = this_1._points[i].lineOptions) === null || _8 === void 0 ? void 0 : _8.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                     }
                                     linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, ref: function (e) {
                                             _this_1._refCallback(e, lineId);
-                                        }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.strokeLinecap) !== null && _4 !== void 0 ? _4 : 'round', strokeDasharray: (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.strokeDasharray, strokeDashoffset: (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
+                                        }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_10 = (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeLinecap) !== null && _10 !== void 0 ? _10 : 'round', strokeDasharray: (_11 = this_1._points[i].lineOptions) === null || _11 === void 0 ? void 0 : _11.strokeDasharray, strokeDashoffset: (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                                 }
                             }
                             else {
                                 if (!isInGap) {
-                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.strokeLinecap) !== null && _8 !== void 0 ? _8 : 'round', strokeDasharray: (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeDasharray, strokeDashoffset: (_10 = this_1._points[i].lineOptions) === null || _10 === void 0 ? void 0 : _10.strokeDashoffset, opacity: 0.1 }));
+                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_14 = (_13 = this_1._points[i].lineOptions) === null || _13 === void 0 ? void 0 : _13.strokeLinecap) !== null && _14 !== void 0 ? _14 : 'round', strokeDasharray: (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeDasharray, strokeDashoffset: (_16 = this_1._points[i].lineOptions) === null || _16 === void 0 ? void 0 : _16.strokeDashoffset, opacity: 0.1 }));
                                 }
                             }
                         }
@@ -1023,6 +1043,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
         LineChartBase.defaultProps = {
             enableReflow: true,
             useUTC: true,
+            isCalloutForStack: false,
         };
         return LineChartBase;
     }(React.Component));