@fluentui/react-charting 5.24.30 → 5.24.32

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

@@ -10,7 +10,7 @@ import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, areArraysEqual, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize, } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, areArraysEqual, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize, findCalloutPoints, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 var getClassNames = classNamesFunction();
@@ -326,11 +326,7 @@ var LineChartBase = /** @class */ (function (_super) {
             var formattedDate = xPointToHighlight instanceof Date
                 ? formatDateToLocaleString(xPointToHighlight, _this_1.props.culture, _this_1.props.useUTC)
                 : xPointToHighlight;
-            var modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var found = find(_this_1._calloutPoints, function (element) {
-                return element.x === modifiedXVal;
-            });
+            var found = findCalloutPoints(_this_1._calloutPoints, xPointToHighlight);
             var pointToHighlight = lineChartData[linenumber].data[index];
             var pointToHighlightUpdated = _this_1.state.nearestCircleToHighlight === null ||
                 (_this_1.state.nearestCircleToHighlight !== null &&
@@ -373,8 +369,7 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._handleFocus = function (lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
             _this_1._uniqueCallOutID = circleId;
             var formattedData = x instanceof Date ? formatDateToLocaleString(x, _this_1.props.culture, _this_1.props.useUTC) : x;
-            var xVal = x instanceof Date ? x.getTime() : x;
-            var found = find(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+            var found = findCalloutPoints(_this_1._calloutPoints, x);
             // if no points need to be called out then don't show vertical line and callout card
             if (found) {
                 var _this_2 = _this_1;
@@ -405,16 +400,14 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor, mouseEvent) {
             mouseEvent.persist();
             var formattedData = x instanceof Date ? 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 = find(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+            var found = findCalloutPoints(_this_1._calloutPoints, x);
             var hoverDp = undefined;
             if (_this_1.props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
-                var dp = find(found.values, function (val) { return (val === null || val === void 0 ? void 0 : val.y) === yVal; });
+                var dp = find(found.values, function (val) { return (val === null || val === void 0 ? void 0 : val.y) === y; });
                 if (dp) {
                     hoverDp = {
-                        x: xVal,
+                        x: x,
                         values: [dp],
                     };
                 }
@@ -432,7 +425,7 @@ var LineChartBase = /** @class */ (function (_super) {
                         refSelected: "#".concat(circleId),
                         hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
                         YValueHover: found.values,
-                        YValue: yVal,
+                        YValue: y,
                         legendVal: legendVal,
                         lineColor: lineColor,
                         stackCalloutProps: found,
@@ -619,7 +612,7 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._refArray = [];
         _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
         _this_1._colorFillBars = [];
-        _this_1._calloutPoints = calloutData(_this_1._points) || [];
+        _this_1._calloutPoints = calloutData(_this_1._points) || {};
         _this_1._circleId = getId('circle');
         _this_1._lineId = getId('lineID');
         _this_1._borderId = getId('borderID');
@@ -655,7 +648,7 @@ var LineChartBase = /** @class */ (function (_super) {
             prevProps.width !== this.props.width ||
             prevProps.data !== this.props.data) {
             this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
-            this._calloutPoints = calloutData(this._points) || [];
+            this._calloutPoints = calloutData(this._points) || {};
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -780,7 +773,7 @@ var LineChartBase = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     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, _11, _12, _13, _14, _15, _16, _17;
+        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, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26;
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         var lines = [];
         if (this.state.isSelectedLegend) {
@@ -824,7 +817,7 @@ var LineChartBase = /** @class */ (function (_super) {
                 })
                 : 0;
             if (this_1._points[i].data.length === 1) {
-                var _18 = this_1._points[i].data[0], x1_1 = _18.x, y1 = _18.y, xAxisCalloutData_1 = _18.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _18.xAxisCalloutAccessibilityData;
+                var _27 = this_1._points[i].data[0], x1_1 = _27.x, y1 = _27.y, xAxisCalloutData_1 = _27.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _27.xAxisCalloutAccessibilityData;
                 var xPoint = this_1._xAxisScale(x1_1);
                 var yPoint = yScale(y1);
                 if (isPlottable(xPoint, yPoint)) {
@@ -873,20 +866,44 @@ var LineChartBase = /** @class */ (function (_super) {
                         this_1._points[i].data[k].y,
                     ]);
                 }
-                if (isLegendSelected) {
-                    var lineBorderWidth = ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderWidth)
+                // Check if lines should be drawn based on mode
+                var lineMode = (_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.mode;
+                var shouldDrawLines = lineMode !== 'markers';
+                if (shouldDrawLines && isLegendSelected) {
+                    var lineBorderWidth = ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.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: (_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 }));
+                        bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_k = (_j = this_1._points[i].lineOptions) === null || _j === void 0 ? void 0 : _j.strokeLinecap) !== null && _k !== void 0 ? _k : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                     }
-                    linesForLine.push(React.createElement("path", __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 })));
+                    linesForLine.push(React.createElement("path", __assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, 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, 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: (_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 }));
+                else if (shouldDrawLines) {
+                    linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_r = (_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeLinecap) !== null && _r !== void 0 ? _r : 'round', strokeDasharray: (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeDasharray, opacity: 0.1 }));
                 }
                 var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
+                // Always add the highlight circle for large dataset hover
                 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 }));
+                // Add individual markers if mode includes 'markers'
+                var showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
+                if (showMarkers) {
+                    for (var k = 0; k < this_1._points[i].data.length; k++) {
+                        var _28 = this_1._points[i].data[k], x = _28.x, y = _28.y;
+                        var xPoint = this_1._xAxisScale(x instanceof Date ? x.getTime() : x);
+                        var yPoint = yScale(y);
+                        if (isPlottable(xPoint, yPoint)) {
+                            var markerSize = this_1._points[i].data[k].markerSize;
+                            var perPointColor = (_t = this_1._points[i].data[k]) === null || _t === void 0 ? void 0 : _t.markerColor;
+                            pointsForLine.push(React.createElement("circle", { key: "".concat(this_1._circleId, "_").concat(i, "_").concat(k, "_marker"), r: markerSize
+                                    ? (markerSize * extraMaxPixels * 0.3) / maxMarkerSize
+                                    : activePoint === this_1._circleId
+                                        ? 5.5
+                                        : 3.5, cx: xPoint, cy: yPoint, fill: activePoint === this_1._circleId
+                                    ? theme.semanticColors.bodyBackground
+                                    : perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity: isLegendSelected ? 1 : 0.1, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
+                        }
+                    }
+                }
             }
             else if (!this_1.props.optimizeLargeData) {
                 var _loop_2 = function (j) {
@@ -896,74 +913,74 @@ var LineChartBase = /** @class */ (function (_super) {
                     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 _19 = this_1._points[i].data[j - 1], x1 = _19.x, y1 = _19.y, xAxisCalloutData = _19.xAxisCalloutData, xAxisCalloutAccessibilityData = _19.xAxisCalloutAccessibilityData;
-                    var _20 = this_1._points[i].data[j], x2 = _20.x, y2 = _20.y;
+                    var _29 = this_1._points[i].data[j - 1], x1 = _29.x, y1 = _29.y, xAxisCalloutData = _29.xAxisCalloutData, xAxisCalloutAccessibilityData = _29.xAxisCalloutAccessibilityData;
+                    var _30 = this_1._points[i].data[j], x2 = _30.x, y2 = _30.y;
                     var xPoint1 = this_1._xAxisScale(x1);
                     var yPoint1 = yScale(y1);
                     var xPoint2 = this_1._xAxisScale(x2);
                     var yPoint2 = yScale(y2);
-                    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 strokeWidth = ((_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.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 supportsTextMode = (_x = (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.mode) === null || _x === void 0 ? void 0 : _x.includes('text');
                     var text = this_1._points[i].data[j - 1].text;
                     var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
                     if (isPlottable(xPoint1, yPoint1)) {
                         var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
-                        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,
+                        pointsForLine.push(((_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('markers')) || supportsTextMode ? (React.createElement(React.Fragment, null,
                             React.createElement("circle", __assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "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": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : 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: ((_0 = this_1._points[i].data[j - 1]) === null || _0 === void 0 ? void 0 : _0.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_1 = this_1._points[i].data[j - 1]) === null || _1 === void 0 ? void 0 : _1.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j - 1].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j - 1) })),
                             !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: xPoint1, y: yPoint1 +
                                     Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
                                     12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __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) }))));
+                            }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: ((_3 = this_1._points[i].data[j - 1]) === null || _3 === void 0 ? void 0 : _3.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_4 = this_1._points[i].data[j - 1]) === null || _4 === void 0 ? void 0 : _4.markerColor) || 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;
-                        var _21 = this_1._points[i].data[j], lastCirlceXCallout_1 = _21.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _21.xAxisCalloutAccessibilityData;
+                        var _31 = this_1._points[i].data[j], lastCirlceXCallout_1 = _31.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _31.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 lastSupportsTextMode = (_6 = (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.mode) === null || _6 === void 0 ? void 0 : _6.includes('text');
                         var lastText = this_1._points[i].data[j].text;
                         if (isPlottable(xPoint2, yPoint2)) {
                             var path = this_1._getPath(xPoint2, yPoint2, lastCircleId_1, j, true, this_1._points[i].index);
                             pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                ((_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,
+                                ((_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.mode) === null || _8 === void 0 ? void 0 : _8.includes('markers')) || lastSupportsTextMode ? (React.createElement(React.Fragment, null,
                                     React.createElement("circle", __assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "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": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j) })),
+                                        }, 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": (_9 = this_1._points[i].data[j].text) !== null && _9 !== void 0 ? _9 : this_1._getAriaLabel(i, j) })),
                                     !this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: xPoint2, y: yPoint2 +
                                             Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
                                             12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __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) }))),
+                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: ((_10 = this_1._points[i].data[j]) === null || _10 === void 0 ? void 0 : _10.markerColor) || this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: ((_11 = this_1._points[i].data[j]) === null || _11 === void 0 ? void 0 : _11.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
                                 React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: xPoint2, cy: yPoint2, 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 (isPlottable(xPoint1, yPoint1) &&
                         isPlottable(xPoint2, yPoint2) &&
-                        (!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')))) {
+                        (!this_1._hasMarkersMode || ((_13 = (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.mode) === null || _13 === void 0 ? void 0 : _13.includes('lines')))) {
                         if (isLegendSelected) {
                             // don't draw line if it is in a gap
                             if (!isInGap) {
-                                var lineBorderWidth = ((_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.lineBorderWidth)
+                                var lineBorderWidth = ((_14 = this_1._points[i].lineOptions) === null || _14 === void 0 ? void 0 : _14.lineBorderWidth)
                                     ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
                                     : 0;
                                 if (lineBorderWidth > 0) {
-                                    bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, 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 }));
+                                    bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeLinecap: (_16 = (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeLinecap) !== null && _16 !== void 0 ? _16 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_17 = this_1._points[i].lineOptions) === null || _17 === void 0 ? void 0 : _17.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                 }
                                 linesForLine.push(React.createElement("line", __assign({ id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, ref: function (e) {
                                         _this_1._refCallback(e, lineId);
-                                    }, 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))));
+                                    }, 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: (_19 = (_18 = this_1._points[i].lineOptions) === null || _18 === void 0 ? void 0 : _18.strokeLinecap) !== null && _19 !== void 0 ? _19 : 'round', strokeDasharray: (_20 = this_1._points[i].lineOptions) === null || _20 === void 0 ? void 0 : _20.strokeDasharray, strokeDashoffset: (_21 = this_1._points[i].lineOptions) === null || _21 === void 0 ? void 0 : _21.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                             }
                         }
                         else {
                             if (!isInGap) {
-                                linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, 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 }));
+                                linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_23 = (_22 = this_1._points[i].lineOptions) === null || _22 === void 0 ? void 0 : _22.strokeLinecap) !== null && _23 !== void 0 ? _23 : 'round', strokeDasharray: (_24 = this_1._points[i].lineOptions) === null || _24 === void 0 ? void 0 : _24.strokeDasharray, strokeDashoffset: (_25 = this_1._points[i].lineOptions) === null || _25 === void 0 ? void 0 : _25.strokeDashoffset, opacity: 0.1 }));
                             }
                         }
                     }
@@ -977,7 +994,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     xAxisScale: this_1._xAxisScale,
                     yAxisScale: yScale,
                     className: classNames.markerLabel || '',
-                    lineOptions: (_17 = this_1._points[i]) === null || _17 === void 0 ? void 0 : _17.lineOptions,
+                    lineOptions: (_26 = this_1._points[i]) === null || _26 === void 0 ? void 0 : _26.lineOptions,
                 }));
             }
             lines.push(React.createElement("g", { key: "line_".concat(i), role: "region", "aria-label": "".concat(legendVal, ", line ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") },