@fluentui/react-charting 5.23.75 → 5.23.77

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

@@ -49,14 +49,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this_1._xAxisScale = '';
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            _this_1._yAxisScale = '';
+            _this_1._yScalePrimary = '';
             _this_1.eventLabelHeight = 36;
             _this_1._isRTL = (0, Utilities_1.getRTL)();
             _this_1._xMin = Number.NEGATIVE_INFINITY;
-            _this_1._yMin = Number.NEGATIVE_INFINITY;
             _this_1._xMax = Number.POSITIVE_INFINITY;
             _this_1._xPadding = 0;
-            _this_1._yPadding = 0;
+            _this_1._yPaddingPrimary = 0;
+            _this_1._yPaddingSecondary = 0;
             _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);
@@ -110,24 +110,31 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         ? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
                         : null;
             };
-            _this_1._getNumericMinMaxOfY = function (points) {
+            _this_1._getNumericMinMaxOfY = function (points, yAxisType, useSecondaryYScale) {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
-                var _a = (0, index_3.findNumericMinMaxOfY)(points), startValue = _a.startValue, endValue = _a.endValue;
-                _this_1._yMin = startValue;
+                var _a = (0, index_3.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale), startValue = _a.startValue, endValue = _a.endValue;
+                var yPadding = 0;
                 if (_this_1.props.lineMode === 'scatter') {
-                    _this_1._yPadding = (endValue - startValue) * 0.1;
+                    yPadding = (endValue - startValue) * 0.1;
+                    if (useSecondaryYScale) {
+                        _this_1._yPaddingSecondary = yPadding;
+                    }
+                    else {
+                        _this_1._yPaddingPrimary = yPadding;
+                    }
                 }
                 return {
-                    startValue: startValue - _this_1._yPadding,
-                    endValue: endValue + _this_1._yPadding,
+                    startValue: startValue - yPadding,
+                    endValue: endValue + yPadding,
                 };
             };
             _this_1._getMargins = function (margins) {
                 _this_1.margins = margins;
             };
-            _this_1._initializeLineChartData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
+            _this_1._initializeLineChartData = function (xScale, yScalePrimary, containerHeight, containerWidth, xElement, yAxisElement, yScaleSecondary) {
                 _this_1._xAxisScale = xScale;
-                _this_1._yAxisScale = yScale;
+                _this_1._yScalePrimary = yScalePrimary;
+                _this_1._yScaleSecondary = yScaleSecondary;
                 _this_1._renderedColorFillBars = _this_1.props.colorFillBars ? _this_1._createColorFillBars(containerHeight) : [];
                 _this_1.lines = _this_1._createLines(xElement, containerHeight);
             };
@@ -241,7 +248,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var opacity = _this_1._legendHighlighted(colorFillBar.legend) || _this_1._noLegendHighlighted() || _this_1.state.isSelectedLegend
                             ? _this_1._getColorFillBarOpacity(colorFillBar)
                             : 0.1;
-                        colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#".concat(_this_1._colorFillBarPatternId, "_").concat(i, ")") : color, fillOpacity: opacity, x: _this_1._isRTL ? _this_1._xAxisScale(endX) : _this_1._xAxisScale(startX), y: _this_1._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: _this_1._yAxisScale(_this_1.props.yMinValue || 0) - _this_1._yAxisScale(yMinMaxValues.endValue) + FILL_Y_PADDING, key: "".concat(colorFillBarId).concat(j) }));
+                        colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#".concat(_this_1._colorFillBarPatternId, "_").concat(i, ")") : color, fillOpacity: opacity, x: _this_1._isRTL ? _this_1._xAxisScale(endX) : _this_1._xAxisScale(startX), y: _this_1._yScalePrimary(yMinMaxValues.endValue) - FILL_Y_PADDING, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: _this_1._yScalePrimary(_this_1.props.yMinValue || 0) -
+                                _this_1._yScalePrimary(yMinMaxValues.endValue) +
+                                FILL_Y_PADDING, key: "".concat(colorFillBarId).concat(j) }));
                     }
                 }
                 return colorFillBars;
@@ -264,7 +273,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 }
                 return { isInGap: isInGap, gapIndex: gapIndex };
             };
-            _this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, mouseEvent) {
+            _this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, yScale, mouseEvent) {
                 mouseEvent.persist();
                 var data = _this_1.props.data;
                 var lineChartData = data.lineChartData;
@@ -326,12 +335,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     _this_1._uniqueCallOutID = "#".concat(_this_1._staticHighlightCircle, "_").concat(linenumber);
                     (0, d3_selection_1.select)("#".concat(_this_1._staticHighlightCircle, "_").concat(linenumber))
                         .attr('cx', "".concat(_this_1._xAxisScale(pointToHighlight.x)))
-                        .attr('cy', "".concat(_this_1._yAxisScale(pointToHighlight.y)))
+                        .attr('cy', "".concat(yScale(pointToHighlight.y)))
                         .attr('visibility', 'visibility');
                     (0, d3_selection_1.select)("#".concat(_this_1._verticalLine))
-                        .attr('transform', function () { return "translate(".concat(_this_1._xAxisScale(pointToHighlight.x), ", ").concat(_this_1._yAxisScale(pointToHighlight.y), ")"); })
+                        .attr('transform', function () { return "translate(".concat(_this_1._xAxisScale(pointToHighlight.x), ", ").concat(yScale(pointToHighlight.y), ")"); })
                         .attr('visibility', 'visibility')
-                        .attr('y2', "".concat(lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
+                        .attr('y2', "".concat(lineHeight - yScale(pointToHighlight.y)));
                     _this_1.setState({
                         nearestCircleToHighlight: pointToHighlight,
                         isCalloutVisible: true,
@@ -386,7 +395,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     });
                 }
             };
-            _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
+            _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, mouseEvent) {
                 mouseEvent.persist();
                 var formattedData = x instanceof Date ? (0, index_3.formatDate)(x, _this_1.props.useUTC) : x;
                 var xVal = x instanceof Date ? x.getTime() : x;
@@ -395,9 +404,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 // if no points need to be called out then don't show vertical line and callout card
                 if (found) {
                     (0, d3_selection_1.select)("#".concat(_this_1._verticalLine))
-                        .attr('transform', function () { return "translate(".concat(_this._xAxisScale(x), ", ").concat(_this._yAxisScale(y), ")"); })
+                        .attr('transform', function () { return "translate(".concat(_this._xAxisScale(x), ", ").concat(yScale(y), ")"); })
                         .attr('visibility', 'visibility')
-                        .attr('y2', "".concat(lineHeight - _this._yAxisScale(y)));
+                        .attr('y2', "".concat(lineHeight - yScale(y)));
                     if (_this_1._uniqueCallOutID !== circleId) {
                         _this_1._uniqueCallOutID = circleId;
                         _this_1.setState({
@@ -683,7 +692,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 // eslint-disable-next-line react/no-children-prop
                 children: function (props) {
                     _this_1._xAxisScale = props.xScale;
-                    _this_1._yAxisScale = props.yScale;
+                    _this_1._yScalePrimary = props.yScalePrimary;
+                    _this_1._yScaleSecondary = props.yScaleSecondary;
                     return (React.createElement(React.Fragment, null,
                         React.createElement("g", null,
                             React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: props.containerHeight, stroke: '#323130', id: _this_1._verticalLine, visibility: 'hidden', strokeDasharray: '5,5' }),
@@ -760,11 +770,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 : [];
             return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps, { ref: this._legendsRef })));
         };
-        LineChartBase.prototype._getRangeForScatterMarkerSize = function () {
+        LineChartBase.prototype._getRangeForScatterMarkerSize = function (yScale, yPadding) {
             var extraXPixels = this._isRTL
                 ? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
                 : this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
-            var extraYPixels = this._yAxisScale(this._yMin) - this._yAxisScale(this._yMin + this._yPadding);
+            var yMin = yScale.domain()[0];
+            var extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
             return Math.min(extraXPixels, extraYPixels);
         };
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
@@ -777,7 +788,6 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             else {
                 this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
             }
-            var extraMaxPixels = this.props.lineMode === 'scatter' ? this._getRangeForScatterMarkerSize() : 0;
             var maxMarkerSize = (0, d3_array_2.max)(this._points, function (point) {
                 return (0, d3_array_2.max)(point.data, function (item) {
                     return item.markerSize;
@@ -792,6 +802,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var activePoint = this_1.state.activePoint;
                 var theme = this_1.props.theme;
                 var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
+                var yScale = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yScaleSecondary : this_1._yScalePrimary;
+                var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
+                var extraMaxPixels = this_1.props.lineMode === 'scatter' ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
                 if (this_1._points[i].data.length === 1) {
                     var _3 = this_1._points[i].data[0], x1_1 = _3.x, y1 = _3.y, xAxisCalloutData_1 = _3.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
                     var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
@@ -801,7 +814,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
                             : activePoint === circleId_1
                                 ? 5.5
-                                : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(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), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), 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) {
+                                : 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))));
                 }
@@ -814,7 +827,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         .x(function (d) { return _this_1._xAxisScale(d[0]); })
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        .y(function (d) { return _this_1._yAxisScale(d[1]); })
+                        .y(function (d) { return yScale(d[1]); })
                         .curve((0, index_3.getCurveFactory)(lineCurve));
                     var lineId = "".concat(this_1._lineId, "_").concat(i);
                     var borderId = "".concat(this_1._borderId, "_").concat(i);
@@ -836,13 +849,13 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         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 }));
                         }
-                        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), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), 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: (_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 })));
                     }
                     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 }));
                     }
                     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), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }));
+                    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 }));
                 }
                 else if (!this_1.props.optimizeLargeData) {
                     var _loop_2 = function (j) {
@@ -854,27 +867,27 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
                         var _4 = this_1._points[i].data[j - 1], x1 = _4.x, y1 = _4.y, xAxisCalloutData = _4.xAxisCalloutData, xAxisCalloutAccessibilityData = _4.xAxisCalloutAccessibilityData;
                         var _5 = this_1._points[i].data[j], x2 = _5.x, y2 = _5.y;
-                        var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
+                        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 isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
                         var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
-                        pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: this_1._yAxisScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), 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) }))) : (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), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), 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) }))));
+                        pointsForLine.push(this_1.props.lineMode === 'scatter' ? (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 () { 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) }))) : (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) }))));
                         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), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
+                            path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                             var _6 = this_1._points[i].data[j], lastCirlceXCallout_1 = _6.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _6.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
                             pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                this_1.props.lineMode === 'scatter' ? (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 () {
                                         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("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), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), 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": this_1._getAriaLabel(i, j) }))) : (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 () {
                                         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: this_1._yAxisScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), 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), 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 })));
                         }
                         if (this_1.props.lineMode !== 'scatter') {
                             if (isLegendSelected) {
@@ -884,16 +897,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                         ? 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: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.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: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
                                     }
-                                    linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
+                                    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), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeLinecap) !== null && _w !== void 0 ? _w : 'round', strokeDasharray: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDasharray, strokeDashoffset: (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.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), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeLinecap) !== null && _w !== void 0 ? _w : 'round', strokeDasharray: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDasharray, strokeDashoffset: (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.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: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_0 = (_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.strokeLinecap) !== null && _0 !== void 0 ? _0 : 'round', strokeDasharray: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDasharray, strokeDashoffset: (_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.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: (_0 = (_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.strokeLinecap) !== null && _0 !== void 0 ? _0 : 'round', strokeDasharray: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDasharray, strokeDashoffset: (_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.strokeDashoffset, opacity: 0.1 }));
                                 }
                             }
                         }