@fluentui/react-charts 9.3.21 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/LineChart/LineChart.js

@@ -1,1332 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useLineChartStyles } from './useLineChartStyles.styles';
-import { select as d3Select, pointer } from 'd3-selection';
-import { bisector } from 'd3-array';
-import { Legends } from '../Legends/index';
-import { line as d3Line } from 'd3-shape';
-import { max as d3Max } from 'd3-array';
-import { useId } from '@fluentui/react-utilities';
-import { find, findCalloutPoints } from '../../utilities/index';
-import { CartesianChart } from '../../index';
-import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { tokens } from '@fluentui/react-theme';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize, calculateMarkerRadius } from '../../utilities/index';
-import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
-import { formatDateToLocaleString } from '@fluentui/chart-utilities';
-import { useImageExport } from '../../utilities/hooks';
-var PointSize = /*#__PURE__*/ function(PointSize) {
-    PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
-    PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
-    return PointSize;
-}(PointSize || {});
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const bisect = bisector((d)=>d.x).left;
-const DEFAULT_LINE_STROKE_SIZE = 4;
-// The given shape of a icon must be 2.5 times bigger than line width (known as stroke width)
-const PATH_MULTIPLY_SIZE = 2.5;
-/**
- *
- * @param x units from origin
- * @param y units from origin
- * @param w is the legnth of the each side of a shape
- * @param index index to get the shape path
- */ const _getPointPath = (x, y, w, index)=>{
-    const allPointPaths = [
-        // circle path
-        `M${x - w / 2} ${y}
-     A${w / 2} ${w / 2} 0 1 0 ${x + w / 2} ${y}
-     M${x - w / 2} ${y}
-     A ${w / 2} ${w / 2} 0 1 1 ${x + w / 2} ${y}
-     `,
-        //square
-        `M${x - w / 2} ${y - w / 2}
-     L${x + w / 2} ${y - w / 2}
-     L${x + w / 2} ${y + w / 2}
-     L${x - w / 2} ${y + w / 2}
-     Z`,
-        //triangle
-        `M${x - w / 2} ${y - 0.2886 * w}
-     H ${x + w / 2}
-     L${x} ${y + 0.5774 * w} Z`,
-        //diamond
-        `M${x} ${y - w / 2}
-     L${x + w / 2} ${y}
-     L${x} ${y + w / 2}
-     L${x - w / 2} ${y}
-     Z`,
-        //pyramid
-        `M${x} ${y - 0.5774 * w}
-     L${x + w / 2} ${y + 0.2886 * w}
-     L${x - w / 2} ${y + 0.2886 * w} Z`,
-        //hexagon
-        `M${x - 0.5 * w} ${y - 0.866 * w}
-     L${x + 0.5 * w} ${y - 0.866 * w}
-     L${x + w} ${y}
-     L${x + 0.5 * w} ${y + 0.866 * w}
-     L${x - 0.5 * w} ${y + 0.866 * w}
-     L${x - w} ${y}
-     Z`,
-        //pentagon
-        `M${x} ${y - 0.851 * w}
-     L${x + 0.6884 * w} ${y - 0.2633 * w}
-     L${x + 0.5001 * w} ${y + 0.6884 * w}
-     L${x - 0.5001 * w} ${y + 0.6884 * w}
-     L${x - 0.6884 * w} ${y - 0.2633 * w}
-     Z`,
-        //octagon
-        `M${x - 0.5001 * w} ${y - 1.207 * w}
-     L${x + 0.5001 * w} ${y - 1.207 * w}
-     L${x + 1.207 * w} ${y - 0.5001 * w}
-     L${x + 1.207 * w} ${y + 0.5001 * w}
-     L${x + 0.5001 * w} ${y + 1.207 * w}
-     L${x - 0.5001 * w} ${y + 1.207 * w}
-     L${x - 1.207 * w} ${y + 0.5001 * w}
-     L${x - 1.207 * w} ${y - 0.5001 * w}
-     Z`
-    ];
-    return allPointPaths[index];
-};
-// Create a LineChart variant which uses these default styles and this styled subcomponent.
-/**
- * Linechart component
- * {@docCategory LineChart}
- */ export const LineChart = /*#__PURE__*/ React.forwardRef(({ isCalloutForStack = true, ...restProps }, forwardedRef)=>{
-    var _props_legendProps_selectedLegends, _props_legendProps;
-    const props = {
-        isCalloutForStack,
-        ...restProps
-    };
-    let _hasMarkersMode = false;
-    let _isXAxisDateType = false;
-    let _isScatterPolar = false;
-    let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let _xAxisScale = '';
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let _yScalePrimary = '';
-    const _circleId = useId('circle');
-    const _lineId = useId('lineID');
-    const _borderId = useId('borderID');
-    const _verticalLine = useId('verticalLine');
-    const _colorFillBarPatternId = useId('colorFillBarPattern');
-    let _uniqueCallOutID = '';
-    const _refArray = [];
-    let margins;
-    let eventLabelHeight = 36;
-    let lines;
-    let _renderedColorFillBars;
-    const _colorFillBars = React.useRef([]);
-    const _rectId = useId('containerRectLD');
-    const _staticHighlightCircle = useId('staticHighlightCircle');
-    const _firstRenderOptimization = true;
-    const _emptyChartId = useId('_LineChart_empty');
-    const _colorFillBarId = useId('_colorFillBarId');
-    const _isRTL = useRtl();
-    const xAxisCalloutAccessibilityData = {};
-    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
-    let _yScaleSecondary;
-    props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
-    const [hoverXValue, setHoverXValue] = React.useState('');
-    const [activeLegend, setActiveLegend] = React.useState('');
-    const [yValueHover, setYValueHover] = React.useState([]);
-    const [selectedLegend, setSelectedLegend] = React.useState('');
-    const [selectedLegendPoints, setSelectedLegendPoints] = React.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
-    const [selectedColorBarLegend, setSelectedColorBarLegend] = React.useState([]);
-    var _props_legendProps_selectedLegends_length;
-    const [isSelectedLegend, setIsSelectedLegend] = React.useState(((_props_legendProps_selectedLegends_length = (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.length) !== null && _props_legendProps_selectedLegends_length !== void 0 ? _props_legendProps_selectedLegends_length : 0) > 0);
-    const [activePoint, setActivePoint] = React.useState('');
-    const [nearestCircleToHighlight, setNearestCircleToHighlight] = React.useState(null);
-    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
-    const [stackCalloutProps, setStackCalloutProps] = React.useState();
-    const [clickPosition, setClickPosition] = React.useState({
-        x: 0,
-        y: 0
-    });
-    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
-    const [YValue, setYValue] = React.useState('');
-    const [legendVal, setLegendVal] = React.useState('');
-    const [lineColor, setLineColor] = React.useState('');
-    const [refSelected, setRefSelected] = React.useState(null);
-    const pointsRef = React.useRef([]);
-    const calloutPointsRef = React.useRef({});
-    const classes = useLineChartStyles(props);
-    React.useEffect(()=>{
-        /** note that height and width are not used to resize or set as dimesions of the chart,
-       * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
-       */ if (_points !== _injectIndexPropertyInLineChartData(props.data.lineChartData) || props.data !== _points) {
-            pointsRef.current = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-            calloutPointsRef.current = calloutData(pointsRef.current);
-        }
-    }, [
-        props.height,
-        props.width,
-        props.data
-    ]);
-    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
-        let domainNRangeValue;
-        if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode, props.xMinValue, props.xMaxValue);
-        } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
-        } else {
-            domainNRangeValue = {
-                dStartValue: 0,
-                dEndValue: 0,
-                rStartValue: 0,
-                rEndValue: 0
-            };
-        }
-        return domainNRangeValue;
-    }
-    function _injectIndexPropertyInLineChartData(lineChartData, isFilterSelectedLegends = false) {
-        const { allowMultipleShapesForPoints = false } = props;
-        // Apply filter only if isPropChange is true
-        const filteredData = isFilterSelectedLegends ? lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.filter((item)=>{
-            var _props_legendProps_selectedLegends, _props_legendProps, _props_legendProps1;
-            return ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.includes(item.legend)) || ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegend) === item.legend;
-        }) : lineChartData;
-        var _filteredData_some;
-        _hasMarkersMode = (_filteredData_some = filteredData === null || filteredData === void 0 ? void 0 : filteredData.some((item)=>{
-            var _item_lineOptions_mode_includes, _item_lineOptions_mode, _item_lineOptions;
-            return (_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : (_item_lineOptions_mode = _item_lineOptions.mode) === null || _item_lineOptions_mode === void 0 ? void 0 : (_item_lineOptions_mode_includes = _item_lineOptions_mode.includes) === null || _item_lineOptions_mode_includes === void 0 ? void 0 : _item_lineOptions_mode_includes.call(_item_lineOptions_mode, 'markers');
-        })) !== null && _filteredData_some !== void 0 ? _filteredData_some : false;
-        _isScatterPolar = isScatterPolarSeries(filteredData);
-        return filteredData ? filteredData.map((item, index)=>{
-            let color;
-            if (typeof item.color === 'undefined') {
-                color = getNextColor(index, 0);
-            } else {
-                color = getColorFromToken(item.color);
-            }
-            return {
-                ...item,
-                index: allowMultipleShapesForPoints ? index : -1,
-                color
-            };
-        }) : [];
-    }
-    function updatePosition(newX, newY) {
-        const threshold = 1; // Set a threshold for movement
-        const { x, y } = clickPosition;
-        // Calculate the distance moved
-        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
-        // Update the position only if the distance moved is greater than the threshold
-        if (distance > threshold) {
-            setClickPosition({
-                x: newX,
-                y: newY
-            });
-            setPopoverOpen(true);
-        }
-    }
-    function _getCustomizedCallout() {
-        return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
-    }
-    function _getNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
-        const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
-        let yPadding = {
-            start: 0,
-            end: 0
-        };
-        if (_hasMarkersMode) {
-            yPadding = getDomainPaddingForMarkers(startValue, endValue, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
-        }
-        return {
-            startValue: startValue - yPadding.start,
-            endValue: endValue + yPadding.end
-        };
-    }
-    function _getMargins(_margins) {
-        margins = _margins;
-    }
-    function _initializeLineChartData(xScale, yScalePrimary, containerHeight, containerWidth, xElement, yAxisElement, yScaleSecondary) {
-        _xAxisScale = xScale;
-        _yScalePrimary = yScalePrimary;
-        _yScaleSecondary = yScaleSecondary;
-        _renderedColorFillBars = props.colorFillBars ? _createColorFillBars(containerHeight) : [];
-        lines = _createLines(xElement, containerHeight);
-    }
-    function _handleSingleLegendSelectionAction(lineChartItem) {
-        if (selectedLegend === lineChartItem.legend) {
-            setSelectedLegend('');
-            _handleLegendClick(lineChartItem, null);
-        } else {
-            setSelectedLegend(lineChartItem.legend);
-            _handleLegendClick(lineChartItem, lineChartItem.legend);
-        }
-    }
-    function _onHoverCardHide() {
-        setSelectedLegendPoints([]);
-        setSelectedColorBarLegend([]);
-        setIsSelectedLegend(false);
-    }
-    function _handleLegendClick(lineChartItem, selectedLegend) {
-        if (lineChartItem.onLegendClick) {
-            lineChartItem.onLegendClick(selectedLegend);
-        }
-    }
-    function _createLegends(data) {
-        const { legendProps, allowMultipleShapesForPoints = false } = props;
-        const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        const mapLegendToPoints = {};
-        data.forEach((point)=>{
-            if (point.legend) {
-                if (!mapLegendToPoints[point.legend]) {
-                    mapLegendToPoints[point.legend] = [];
-                }
-                mapLegendToPoints[point.legend].push(point);
-            }
-        });
-        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
-            const representativePoint = points[0];
-            // mapping data to the format Legends component needs
-            const legend = {
-                title: legendTitle,
-                color: representativePoint.color,
-                action: ()=>{
-                    if (isLegendMultiSelectEnabled) {
-                        points.forEach((p)=>_handleMultipleLineLegendSelectionAction(p));
-                    } else {
-                        points.forEach((p)=>_handleSingleLegendSelectionAction(p));
-                    }
-                },
-                onMouseOutAction: ()=>{
-                    setActiveLegend('');
-                },
-                hoverAction: ()=>{
-                    _handleChartMouseLeave();
-                    setActiveLegend(legendTitle);
-                },
-                ...representativePoint.legendShape && {
-                    shape: representativePoint.legendShape
-                },
-                ...allowMultipleShapesForPoints && {
-                    shape: Points[representativePoint.index % Object.keys(pointTypes).length]
-                }
-            };
-            return legend;
-        });
-        const colorFillBarsLegendDataItems = props.colorFillBars ? props.colorFillBars.map((colorFillBar, index)=>{
-            const title = colorFillBar.legend;
-            const color = getColorFromToken(colorFillBar.color);
-            const legend = {
-                title,
-                color,
-                action: ()=>{
-                    if (isLegendMultiSelectEnabled) {
-                        _handleMultipleColorFillBarLegendSelectionAction(colorFillBar);
-                    } else {
-                        _handleSingleLegendSelectionAction(colorFillBar);
-                    }
-                },
-                onMouseOutAction: ()=>{
-                    setActiveLegend('');
-                },
-                hoverAction: ()=>{
-                    _handleChartMouseLeave();
-                    setActiveLegend(title);
-                },
-                opacity: _getColorFillBarOpacity(colorFillBar),
-                stripePattern: colorFillBar.applyPattern
-            };
-            return legend;
-        }) : [];
-        return /*#__PURE__*/ React.createElement(Legends, {
-            legends: [
-                ...legendDataItems,
-                ...colorFillBarsLegendDataItems
-            ],
-            enabledWrapLines: props.enabledLegendsWrapLines,
-            overflowText: props.legendsOverflowText,
-            ...isLegendMultiSelectEnabled && {
-                onLegendHoverCardLeave: _onHoverCardHide
-            },
-            ...props.legendProps,
-            legendRef: _legendsRef
-        });
-    }
-    function _getBoxWidthOfShape(pointId, pointIndex, isLastPoint) {
-        const { allowMultipleShapesForPoints = false, strokeWidth = DEFAULT_LINE_STROKE_SIZE } = props;
-        if (allowMultipleShapesForPoints) {
-            if (activePoint === pointId) {
-                return 11;
-            } else if (pointIndex === 1 || isLastPoint) {
-                return strokeWidth * PATH_MULTIPLY_SIZE;
-            } else {
-                return 1;
-            }
-        } else {
-            if (activePoint === pointId) {
-                return 11;
-            } else {
-                return 1;
-            }
-        }
-    }
-    function _getPath(xPos, yPos, pointId, pointIndex, isLastPoint, pointOftheLine) {
-        const { allowMultipleShapesForPoints = false } = props;
-        let w = _getBoxWidthOfShape(pointId, pointIndex, isLastPoint);
-        const index = allowMultipleShapesForPoints ? pointOftheLine % Object.keys(pointTypes).length : 0;
-        const widthRatio = pointTypes[index].widthRatio;
-        w = widthRatio > 1 ? w / widthRatio : w;
-        return _getPointPath(xPos, yPos, w, index);
-    }
-    function _getPointFill(lineColor, pointId, pointIndex, isLastPoint) {
-        const { allowMultipleShapesForPoints = false } = props;
-        if (allowMultipleShapesForPoints) {
-            if (pointIndex === 1 || isLastPoint) {
-                if (activePoint === pointId) {
-                    return tokens.colorNeutralBackground1;
-                } else {
-                    return lineColor;
-                }
-            } else {
-                if (activePoint === pointId) {
-                    return tokens.colorNeutralBackground1;
-                } else {
-                    return lineColor;
-                }
-            }
-        } else {
-            if (activePoint === pointId) {
-                return tokens.colorNeutralBackground1;
-            } else {
-                return lineColor;
-            }
-        }
-    }
-    function _createLines(xElement, containerHeight) {
-        const lines = [];
-        if (isSelectedLegend) {
-            _points = selectedLegendPoints;
-        } else {
-            _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-        }
-        const maxMarkerSize = d3Max(_points, (point)=>{
-            return d3Max(point.data, (item)=>{
-                return item.markerSize;
-            });
-        });
-        for(let i = _points.length - 1; i >= 0; i--){
-            var _points_i_gaps, _points_i_lineOptions, _points_i_lineOptions1;
-            const linesForLine = [];
-            const bordersForLine = [];
-            const pointsForLine = [];
-            const legendVal = _points[i].legend;
-            const lineColor = _points[i].color;
-            const verticaLineHeight = containerHeight - margins.bottom + 6;
-            const useSecondaryYScale = !!(_points[i].useSecondaryYScale && _yScaleSecondary);
-            const yScale = useSecondaryYScale ? _yScaleSecondary : _yScalePrimary;
-            const extraMaxPixels = _hasMarkersMode ? getRangeForScatterMarkerSize({
-                data: _points,
-                xScale: _xAxisScale,
-                yScalePrimary: _yScalePrimary,
-                yScaleSecondary: _yScaleSecondary,
-                useSecondaryYScale,
-                xScaleType: props.xScaleType,
-                yScaleType: props.yScaleType,
-                secondaryYScaleType: props.secondaryYScaleType
-            }) : 0;
-            if (_points[i].data.length === 1) {
-                const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
-                const xPoint = _xAxisScale(x1);
-                const yPoint = yScale(y1);
-                if (isPlottable(xPoint, yPoint)) {
-                    var _points_i_lineOptions_mode, _points_i_lineOptions2;
-                    const circleId = `${_circleId}_${i}`;
-                    const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-                    const currentMarkerSize = _points[i].data[0].markerSize;
-                    const supportsTextMode = (_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions2.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
-                    const text = _points[i].data[0].text;
-                    const targetElement = document.getElementById(circleId);
-                    var _points_i_data__text;
-                    pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, {
-                        key: `${circleId}_fragment`
-                    }, /*#__PURE__*/ React.createElement("circle", {
-                        id: circleId,
-                        key: circleId,
-                        r: calculateMarkerRadius({
-                            pointMarkerSize: currentMarkerSize,
-                            minMarkerSize: 0,
-                            maxMarkerSize,
-                            extraMaxPixels,
-                            isContinuousXY: true,
-                            isActive: activePoint === circleId
-                        }),
-                        cx: xPoint,
-                        cy: yPoint,
-                        fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
-                        opacity: isLegendSelected ? 1 : 0.1,
-                        tabIndex: isLegendSelected ? 0 : undefined,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                        onMouseOut: _handleMouseOut,
-                        strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
-                        stroke: activePoint === circleId ? lineColor : '',
-                        role: "img",
-                        "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
-                        ref: (e)=>{
-                            _refCallback(e, circleId);
-                        },
-                        onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
-                        onBlur: _handleMouseOut,
-                        ..._getClickHandler(_points[i].data[0].onDataPointClick)
-                    }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
-                        key: `${circleId}-label`,
-                        x: xPoint,
-                        y: yPoint + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
-                        className: classes.markerLabel,
-                        opacity: isLegendSelected ? 1 : 0.1
-                    }, text))));
-                }
-            }
-            let gapIndex = 0;
-            var _points_i_gaps_sort;
-            const gaps = (_points_i_gaps_sort = (_points_i_gaps = _points[i].gaps) === null || _points_i_gaps === void 0 ? void 0 : _points_i_gaps.sort((a, b)=>a.startIndex - b.startIndex)) !== null && _points_i_gaps_sort !== void 0 ? _points_i_gaps_sort : [];
-            const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
-            // Use path rendering technique for larger datasets to optimize performance.
-            if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
-                var _points_i_lineOptions3, _points_i_lineOptions4;
-                const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve)).defined((d)=>isPlottable(_xAxisScale(d[0]), yScale(d[1])));
-                const lineId = `${_lineId}_${i}`;
-                const borderId = `${_borderId}_${i}`;
-                const strokeWidth = ((_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
-                const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-                const lineData = [];
-                for(let k = 0; k < _points[i].data.length; k++){
-                    lineData.push([
-                        _points[i].data[k].x instanceof Date ? _points[i].data[k].x.getTime() : _points[i].data[k].x,
-                        _points[i].data[k].y
-                    ]);
-                }
-                // Check if lines should be drawn based on mode
-                const lineMode = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.mode;
-                const shouldDrawLines = lineMode !== 'markers';
-                if (shouldDrawLines && isLegendSelected) {
-                    var _points_i_lineOptions5, _points_i_lineOptions6, _points_i_lineOptions7;
-                    const lineBorderWidth = ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
-                    if (lineBorderWidth > 0) {
-                        var _points_i_lineOptions8, _points_i_lineOptions9;
-                        var _points_i_lineOptions_strokeLinecap;
-                        bordersForLine.push(/*#__PURE__*/ React.createElement("path", {
-                            id: borderId,
-                            key: borderId,
-                            d: line(lineData),
-                            fill: "transparent",
-                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
-                            strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                            stroke: ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.lineBorderColor) || tokens.colorNeutralBackground1,
-                            opacity: 1
-                        }));
-                    }
-                    var _points_i_lineOptions_strokeLinecap1;
-                    linesForLine.push(/*#__PURE__*/ React.createElement("path", {
-                        id: lineId,
-                        key: lineId,
-                        d: line(lineData),
-                        fill: "transparent",
-                        stroke: lineColor,
-                        strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
-                        strokeDasharray: (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeDasharray,
-                        onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                        onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                        onMouseOut: _handleMouseOut,
-                        ..._getClickHandler(_points[i].onLineClick),
-                        opacity: 1,
-                        tabIndex: isLegendSelected ? 0 : undefined
-                    }));
-                } else if (shouldDrawLines) {
-                    var _points_i_lineOptions10, _points_i_lineOptions11;
-                    var _points_i_lineOptions_strokeLinecap2;
-                    linesForLine.push(/*#__PURE__*/ React.createElement("path", {
-                        id: lineId,
-                        key: lineId,
-                        d: line(lineData),
-                        fill: "transparent",
-                        tabIndex: -1,
-                        stroke: lineColor,
-                        strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
-                        strokeDasharray: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDasharray,
-                        opacity: 0.1
-                    }));
-                }
-                // Always add the highlight circle for large dataset hover
-                pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
-                    id: `${_staticHighlightCircle}_${i}`,
-                    key: `${_staticHighlightCircle}_${i}`,
-                    r: 5.5,
-                    cx: 0,
-                    cy: 0,
-                    fill: tokens.colorNeutralBackground1,
-                    strokeWidth: DEFAULT_LINE_STROKE_SIZE,
-                    tabIndex: isLegendSelected ? 0 : undefined,
-                    stroke: lineColor,
-                    visibility: 'hidden',
-                    onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                    onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                    onMouseOut: _handleMouseOut
-                }));
-                // Add individual markers if mode includes 'markers'
-                const showMarkers = !!(lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'));
-                if (showMarkers) {
-                    for(let k = 0; k < _points[i].data.length; k++){
-                        const { x, y } = _points[i].data[k];
-                        const xPoint = _xAxisScale(x instanceof Date ? x.getTime() : x);
-                        const yPoint = yScale(y);
-                        if (isPlottable(xPoint, yPoint)) {
-                            var _points_i_data_k, _points_i;
-                            const markerSize = _points[i].data[k].markerSize;
-                            const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
-                            var _points_i_data_k_text;
-                            pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
-                                key: `${_circleId}_${i}_${k}_marker`,
-                                r: calculateMarkerRadius({
-                                    pointMarkerSize: markerSize,
-                                    minMarkerSize: 0,
-                                    maxMarkerSize,
-                                    extraMaxPixels,
-                                    isContinuousXY: true,
-                                    isActive: activePoint === _circleId
-                                }),
-                                cx: xPoint,
-                                cy: yPoint,
-                                fill: activePoint === _circleId ? tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
-                                tabIndex: isLegendSelected ? 0 : undefined,
-                                stroke: perPointColor || lineColor,
-                                strokeWidth: 1,
-                                opacity: isLegendSelected ? 1 : 0.1,
-                                onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                                onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
-                                onFocus: (event)=>_onFocusLargeDataset(i, verticaLineHeight, event, yScale, k),
-                                onMouseOut: _handleMouseOut,
-                                role: "img",
-                                "aria-label": (_points_i_data_k_text = _points[i].data[k].text) !== null && _points_i_data_k_text !== void 0 ? _points_i_data_k_text : _getAriaLabel(i, k)
-                            }));
-                        }
-                    }
-                }
-            } else if (!props.optimizeLargeData) {
-                for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions12, _points_i_lineOptions_mode1, _points_i_lineOptions13, _points_i_lineOptions_mode2, _points_i_lineOptions14;
-                    const gapResult = _checkInGap(j, gaps, gapIndex);
-                    const isInGap = gapResult.isInGap;
-                    gapIndex = gapResult.gapIndex;
-                    const lineId = `${_lineId}_${i}_${j}`;
-                    const borderId = `${_borderId}_${i}_${j}`;
-                    const circleId = `${_circleId}_${i}_${j}`;
-                    const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j - 1];
-                    const { x: x2, y: y2 } = _points[i].data[j];
-                    const xPoint1 = _xAxisScale(x1);
-                    const yPoint1 = yScale(y1);
-                    const xPoint2 = _xAxisScale(x2);
-                    const yPoint2 = yScale(y2);
-                    const strokeWidth = ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
-                    const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-                    const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                    const supportsTextMode = (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
-                    const text = _points[i].data[j - 1].text;
-                    let currentMarkerSize = _points[i].data[j - 1].markerSize;
-                    if (isPlottable(xPoint1, yPoint1)) {
-                        var _points_i_lineOptions_mode3, _points_i_lineOptions15, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
-                        const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
-                        const targetElement = document.getElementById(circleId);
-                        var _points_i_data__text1;
-                        pointsForLine.push(((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions15.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('markers')) || supportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
-                            id: circleId,
-                            key: circleId,
-                            r: calculateMarkerRadius({
-                                pointMarkerSize: currentMarkerSize,
-                                minMarkerSize: 0,
-                                maxMarkerSize,
-                                extraMaxPixels,
-                                isContinuousXY: true,
-                                isActive: activePoint === circleId
-                            }),
-                            cx: xPoint1,
-                            cy: yPoint1,
-                            tabIndex: isLegendSelected ? 0 : undefined,
-                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                            onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
-                            onBlur: _handleMouseOut,
-                            ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
-                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                            fill: ((_points_i_data_ = _points[i].data[j - 1]) === null || _points_i_data_ === void 0 ? void 0 : _points_i_data_.markerColor) || _getPointFill(lineColor, circleId, j, false),
-                            stroke: ((_points_i_data_1 = _points[i].data[j - 1]) === null || _points_i_data_1 === void 0 ? void 0 : _points_i_data_1.markerColor) || lineColor,
-                            strokeWidth: strokeWidth,
-                            role: "img",
-                            "aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
-                        }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
-                            key: `${circleId}-label`,
-                            x: xPoint1,
-                            y: yPoint1 + calculateMarkerRadius({
-                                pointMarkerSize: currentMarkerSize,
-                                minMarkerSize: 0,
-                                maxMarkerSize,
-                                extraMaxPixels,
-                                isContinuousXY: true
-                            }) + 12,
-                            className: classes.markerLabel,
-                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01
-                        }, text)) : /*#__PURE__*/ React.createElement("path", {
-                            id: circleId,
-                            key: circleId,
-                            d: path,
-                            onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                            onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                            onMouseOut: _handleMouseOut,
-                            onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
-                            onBlur: _handleMouseOut,
-                            ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
-                            opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
-                            fill: ((_points_i_data_2 = _points[i].data[j - 1]) === null || _points_i_data_2 === void 0 ? void 0 : _points_i_data_2.markerColor) || _getPointFill(lineColor, circleId, j, false),
-                            stroke: ((_points_i_data_3 = _points[i].data[j - 1]) === null || _points_i_data_3 === void 0 ? void 0 : _points_i_data_3.markerColor) || lineColor,
-                            strokeWidth: strokeWidth,
-                            role: "img",
-                            "aria-label": _getAriaLabel(i, j - 1),
-                            tabIndex: isLegendSelected ? 0 : undefined
-                        }));
-                    }
-                    if (j + 1 === _points[i].data.length) {
-                        var _points_i_lineOptions_mode4, _points_i_lineOptions16;
-                        // If this is last point of the line segment.
-                        const lastCircleId = `${circleId}${j}L`;
-                        const hiddenHoverCircleId = `${circleId}${j}D`;
-                        const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
-                        const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
-                        currentMarkerSize = _points[i].data[j].markerSize;
-                        const lastSupportsTextMode = (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions16.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
-                        const lastText = _points[i].data[j].text;
-                        if (isPlottable(xPoint2, yPoint2)) {
-                            var _points_i_lineOptions_mode5, _points_i_lineOptions17, _points_i_data_j, _points_i_data_j1;
-                            const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
-                            const targetElement = document.getElementById(lastCircleId);
-                            var _points_i_data_j_text;
-                            pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
-                                key: `${lastCircleId}_container`
-                            }, ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions17.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
-                                id: lastCircleId,
-                                key: lastCircleId,
-                                r: calculateMarkerRadius({
-                                    pointMarkerSize: currentMarkerSize,
-                                    minMarkerSize: 0,
-                                    maxMarkerSize,
-                                    extraMaxPixels,
-                                    isContinuousXY: true,
-                                    isActive: activePoint === lastCircleId
-                                }),
-                                cx: xPoint2,
-                                cy: yPoint2,
-                                tabIndex: isLegendSelected ? 0 : undefined,
-                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseOut: _handleMouseOut,
-                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
-                                onBlur: _handleMouseOut,
-                                ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                                opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
-                                fill: _getPointFill(lineColor, lastCircleId, j, true),
-                                stroke: lineColor,
-                                strokeWidth: strokeWidth,
-                                role: "img",
-                                "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
-                            }), !_isScatterPolar && lastSupportsTextMode && lastText && /*#__PURE__*/ React.createElement("text", {
-                                key: `${lastCircleId}-label`,
-                                x: xPoint2,
-                                y: yPoint2 + calculateMarkerRadius({
-                                    pointMarkerSize: currentMarkerSize,
-                                    minMarkerSize: 0,
-                                    maxMarkerSize,
-                                    extraMaxPixels,
-                                    isContinuousXY: true
-                                }) + 12,
-                                className: classes.markerLabel
-                            }, text)) : /*#__PURE__*/ React.createElement("path", {
-                                id: lastCircleId,
-                                key: lastCircleId,
-                                d: path,
-                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseOut: _handleMouseOut,
-                                onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
-                                onBlur: _handleMouseOut,
-                                ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                                opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
-                                fill: ((_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.markerColor) || _getPointFill(lineColor, lastCircleId, j, true),
-                                stroke: ((_points_i_data_j1 = _points[i].data[j]) === null || _points_i_data_j1 === void 0 ? void 0 : _points_i_data_j1.markerColor) || lineColor,
-                                strokeWidth: strokeWidth,
-                                role: "img",
-                                "aria-label": _getAriaLabel(i, j),
-                                tabIndex: isLegendSelected ? 0 : undefined
-                            }), /*#__PURE__*/ React.createElement("circle", {
-                                id: hiddenHoverCircleId,
-                                key: hiddenHoverCircleId,
-                                r: 8,
-                                cx: xPoint2,
-                                cy: yPoint2,
-                                opacity: 0,
-                                width: 0,
-                                onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                onMouseOut: _handleMouseOut,
-                                strokeWidth: 0,
-                                focusable: false,
-                                onBlur: _handleMouseOut
-                            })));
-                        }
-                    }
-                    if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions14.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
-                        if (isLegendSelected) {
-                            // don't draw line if it is in a gap
-                            if (!isInGap) {
-                                var _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20, _points_i_lineOptions21;
-                                const lineBorderWidth = ((_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
-                                const targetElement = document.getElementById(circleId);
-                                if (lineBorderWidth > 0) {
-                                    var _points_i_lineOptions22, _points_i_lineOptions23;
-                                    var _points_i_lineOptions_strokeLinecap3;
-                                    bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                        id: borderId,
-                                        key: borderId,
-                                        x1: xPoint1,
-                                        y1: yPoint1,
-                                        x2: xPoint2,
-                                        y2: yPoint2,
-                                        strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
-                                        strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                                        stroke: ((_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.lineBorderColor) || tokens.colorNeutralBackground1,
-                                        opacity: 1
-                                    }));
-                                }
-                                var _points_i_lineOptions_strokeLinecap4;
-                                linesForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                    id: lineId,
-                                    key: lineId,
-                                    x1: xPoint1,
-                                    y1: yPoint1,
-                                    x2: xPoint2,
-                                    y2: yPoint2,
-                                    strokeWidth: strokeWidth,
-                                    ref: (e)=>{
-                                        _refCallback(e, lineId);
-                                    },
-                                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
-                                    onMouseOut: _handleMouseOut,
-                                    stroke: lineColor,
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
-                                    strokeDasharray: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDasharray,
-                                    strokeDashoffset: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDashoffset,
-                                    opacity: 1,
-                                    ..._getClickHandler(_points[i].onLineClick)
-                                }));
-                            }
-                        } else {
-                            if (!isInGap) {
-                                var _points_i_lineOptions24, _points_i_lineOptions25, _points_i_lineOptions26;
-                                var _points_i_lineOptions_strokeLinecap5;
-                                linesForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                    id: lineId,
-                                    key: lineId,
-                                    x1: xPoint1,
-                                    y1: yPoint1,
-                                    x2: xPoint2,
-                                    y2: yPoint2,
-                                    strokeWidth: strokeWidth,
-                                    stroke: lineColor,
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
-                                    strokeDasharray: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDasharray,
-                                    strokeDashoffset: (_points_i_lineOptions26 = _points[i].lineOptions) === null || _points_i_lineOptions26 === void 0 ? void 0 : _points_i_lineOptions26.strokeDashoffset,
-                                    opacity: 0.1
-                                }));
-                            }
-                        }
-                    }
-                }
-            }
-            // Add filled area for scatterpolar charts
-            const fillMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.fill;
-            const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-            if (fillMode === 'toself' && _points[i].data.length >= 3 && isLegendSelected && _isScatterPolar) {
-                const getScaledXValue = (dataPoint)=>_xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
-                const fillPathGenerator = d3Line().x((dataPoint)=>getScaledXValue(dataPoint)).y((dataPoint)=>yScale(dataPoint.y)).curve(getCurveFactory(lineCurve)).defined((dataPoint)=>isPlottable(getScaledXValue(dataPoint), yScale(dataPoint.y)));
-                const fillPath = fillPathGenerator(_points[i].data);
-                if (fillPath) {
-                    linesForLine.push(/*#__PURE__*/ React.createElement("path", {
-                        key: `scatterpolar_fill_${i}`,
-                        d: `${fillPath}Z`,
-                        fill: lineColor,
-                        fillOpacity: 0.5,
-                        stroke: lineColor,
-                        strokeWidth: 2,
-                        strokeOpacity: 0.8,
-                        pointerEvents: "none"
-                    }));
-                }
-            }
-            if (_isScatterPolar) {
-                var _points_i1;
-                pointsForLine.push(...renderScatterPolarCategoryLabels({
-                    xAxisScale: _xAxisScale,
-                    yAxisScale: yScale,
-                    className: classes.markerLabel || '',
-                    lineOptions: (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
-                }));
-            }
-            lines.push(/*#__PURE__*/ React.createElement("g", {
-                key: `line_${i}`,
-                role: "region",
-                "aria-label": `${legendVal}, line ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`
-            }, bordersForLine, linesForLine, pointsForLine));
-        }
-        return lines;
-    }
-    function _createColorFillBars(containerHeight) {
-        const colorFillBars = [];
-        if (isSelectedLegend) {
-            _colorFillBars.current = selectedColorBarLegend;
-        } else {
-            _colorFillBars.current = props.colorFillBars;
-        }
-        const yMinMaxValues = findNumericMinMaxOfY(_points);
-        const FILL_Y_PADDING = 3;
-        for(let i = 0; i < _colorFillBars.current.length; i++){
-            const colorFillBar = _colorFillBars.current[i];
-            const colorFillBarId = `${_colorFillBarId}-${i}`;
-            const color = getColorFromToken(colorFillBar.color);
-            if (colorFillBar.applyPattern) {
-                // Using a pattern element because CSS was unable to render diagonal stripes for rect elements
-                colorFillBars.push(_getStripePattern(color, i));
-            }
-            for(let j = 0; j < colorFillBar.data.length; j++){
-                const startX = colorFillBar.data[j].startX;
-                const endX = colorFillBar.data[j].endX;
-                const opacity = _legendHighlighted(colorFillBar.legend) || _noLegendHighlighted() || isSelectedLegend ? _getColorFillBarOpacity(colorFillBar) : 0.1;
-                colorFillBars.push(/*#__PURE__*/ React.createElement("rect", {
-                    fill: colorFillBar.applyPattern ? `url(#${_colorFillBarPatternId}_${i})` : color,
-                    fillOpacity: opacity,
-                    x: _isRTL ? _xAxisScale(endX) : _xAxisScale(startX),
-                    y: _yScalePrimary(yMinMaxValues.endValue) - FILL_Y_PADDING,
-                    width: Math.abs(_xAxisScale(endX) - _xAxisScale(startX)),
-                    height: _yScalePrimary(props.yMinValue || 0) - _yScalePrimary(yMinMaxValues.endValue) + FILL_Y_PADDING,
-                    key: `${colorFillBarId}${j}`
-                }));
-            }
-        }
-        return colorFillBars;
-    }
-    function _getStripePattern(color, id) {
-        // This describes a tile pattern that resembles diagonal stripes
-        // For more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
-        const stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
-        return /*#__PURE__*/ React.createElement("pattern", {
-            id: `${_colorFillBarPatternId}_${id}`,
-            width: 16,
-            height: 16,
-            key: `${_colorFillBarPatternId}_${id}`,
-            patternUnits: 'userSpaceOnUse'
-        }, /*#__PURE__*/ React.createElement("path", {
-            d: stripePath,
-            stroke: color,
-            strokeWidth: 1.25
-        }));
-    }
-    function _checkInGap(pointIndex, gaps, currentGapIndex) {
-        let gapIndex = currentGapIndex;
-        let isInGap = false;
-        while(gapIndex < gaps.length && pointIndex > gaps[gapIndex].endIndex){
-            gapIndex++;
-        }
-        if (gapIndex < gaps.length && pointIndex > gaps[gapIndex].startIndex && pointIndex <= gaps[gapIndex].endIndex) {
-            isInGap = true;
-        }
-        return {
-            isInGap,
-            gapIndex
-        };
-    }
-    function _refCallback(element, legendTitle) {
-        _refArray.push({
-            index: legendTitle,
-            refElement: element
-        });
-    }
-    // Helper function to update highlight circle, vertical line, and callout for large datasets
-    const _updateLargeDatasetHighlightAndCallout = (linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale)=>{
-        // Check if this point is plottable. If not, close the popover and return.
-        const xPoint = _xAxisScale(pointToHighlight.x);
-        const yPoint = yScale(pointToHighlight.y);
-        if (!isPlottable(xPoint, yPoint)) {
-            return;
-        }
-        const found = findCalloutPoints(calloutPointsRef.current, pointToHighlight.x);
-        const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
-        // if no points need to be called out then don't show vertical line and callout card
-        if (found && pointToHighlightUpdated) {
-            _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
-            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${xPoint}, ${yPoint})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yPoint}`);
-            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
-            const rect = targetElement.getBoundingClientRect();
-            setNearestCircleToHighlight(pointToHighlight);
-            updatePosition(rect.x, rect.y);
-            setStackCalloutProps(found);
-            setYValueHover(found.values);
-            setDataPointCalloutProps(found);
-            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue(formattedDate);
-            setActivePoint('');
-        }
-        if (!found) {
-            setPopoverOpen(false);
-            setNearestCircleToHighlight(pointToHighlight);
-            setActivePoint('');
-        }
-    };
-    const _onFocusLargeDataset = (linenumber, lineHeight, focusEvent, yScale, pointIndex)=>{
-        focusEvent.persist();
-        const { data } = props;
-        const { lineChartData } = data;
-        // For focus events, we use the provided point index directly
-        const pointToHighlight = lineChartData[linenumber].data[pointIndex];
-        if (!pointToHighlight) {
-            return;
-        }
-        const { xAxisCalloutData } = pointToHighlight;
-        const formattedDate = pointToHighlight.x instanceof Date ? formatDateToLocaleString(pointToHighlight.x, props.culture, props.useUTC) : pointToHighlight.x;
-        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
-    };
-    const _onMouseOverLargeDataset = (linenumber, lineHeight, mouseEvent, yScale)=>{
-        mouseEvent.persist();
-        const { data } = props;
-        const { lineChartData } = data;
-        // This will get the value of the X when mouse is on the chart
-        const xOffset = _xAxisScale.invert(pointer(mouseEvent)[0], document.getElementById(_rectId));
-        const i = bisect(lineChartData[linenumber].data, xOffset);
-        const d0 = lineChartData[linenumber].data[i - 1];
-        const d1 = lineChartData[linenumber].data[i];
-        let axisType = null;
-        let xPointToHighlight = 0;
-        let index = null;
-        if (d0 === undefined && d1 !== undefined) {
-            xPointToHighlight = d1.x;
-            index = i;
-        } else if (d0 !== undefined && d1 === undefined) {
-            xPointToHighlight = d0.x;
-            index = i - 1;
-        } else {
-            axisType = getTypeOfAxis(lineChartData[linenumber].data[0].x, true);
-            let x0;
-            let point0;
-            let point1;
-            switch(axisType){
-                case XAxisTypes.DateAxis:
-                    x0 = new Date(xOffset).getTime();
-                    point0 = d0.x.getTime();
-                    point1 = d1.x.getTime();
-                    xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
-                    index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
-                    break;
-                case XAxisTypes.NumericAxis:
-                    x0 = xOffset;
-                    point0 = d0.x;
-                    point1 = d1.x;
-                    xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
-                    index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
-                    break;
-                default:
-                    break;
-            }
-        }
-        const { xAxisCalloutData } = lineChartData[linenumber].data[index];
-        const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
-        const pointToHighlight = lineChartData[linenumber].data[index];
-        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
-    };
-    function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
-        _uniqueCallOutID = circleId;
-        const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-        const found = findCalloutPoints(calloutPointsRef.current, x);
-        // if no points need to be called out then don't show vertical line and callout card
-        if (found) {
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, 0)`).attr('visibility', 'visibility');
-            _refArray.forEach((obj)=>{
-                if (obj.index === lineId) {
-                    setPopoverOpen(true);
-                    xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
-                    setYValueHover(found.values);
-                    setRefSelected(targetElement);
-                    setStackCalloutProps(found);
-                    setDataPointCalloutProps(found);
-                    setActivePoint(circleId);
-                }
-            });
-        } else {
-            setActivePoint(circleId);
-        }
-    }
-    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
-        mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
-        const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-        const found = findCalloutPoints(calloutPointsRef.current, x);
-        let hoverDp = undefined;
-        if (props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
-            const dp = find(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === y);
-            if (dp) {
-                hoverDp = {
-                    x,
-                    values: [
-                        dp
-                    ]
-                };
-            }
-        }
-        // if no points need to be called out then don't show vertical line and callout card
-        if (found) {
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
-            if (_uniqueCallOutID !== circleId) {
-                _uniqueCallOutID = circleId;
-                setRefSelected(targetElement);
-                setPopoverOpen(true);
-                xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
-                setYValueHover(found.values);
-                setYValue(y);
-                setLegendVal(legendVal);
-                setLineColor(lineColor);
-                setStackCalloutProps(found);
-                setDataPointCalloutProps(hoverDp);
-                setActivePoint(circleId);
-                setNearestCircleToHighlight(null);
-            }
-        } else {
-            setActivePoint(circleId);
-            setNearestCircleToHighlight(null);
-        }
-    }
-    /**
-     * Screen readers announce an element as clickable if the onClick attribute is set.
-     * This function sets the attribute only when a click event handler is provided.*/ function _getClickHandler(func) {
-        if (func) {
-            return {
-                onClick: func
-            };
-        }
-        return {};
-    }
-    function _handleMouseOut() {
-        d3Select(`#${_verticalLine}`).attr('visibility', 'hidden');
-    }
-    function _handleChartMouseLeave() {
-        _uniqueCallOutID = null;
-        setActivePoint('');
-        if (isPopoverOpen) {
-            setPopoverOpen(false);
-        }
-    }
-    function _handleMultipleLineLegendSelectionAction(selectedLine) {
-        const selectedLineIndex = selectedLegendPoints.reduce((acc, line, index)=>{
-            if (acc > -1 || line.legend !== selectedLine.legend) {
-                return acc;
-            } else {
-                return index;
-            }
-        }, -1);
-        let selectedLines;
-        if (selectedLineIndex === -1) {
-            selectedLines = [
-                ...selectedLegendPoints,
-                selectedLine
-            ];
-        } else {
-            selectedLines = selectedLegendPoints.slice(0, selectedLineIndex).concat(selectedLegendPoints.slice(selectedLineIndex + 1));
-        }
-        const areAllLineLegendsSelected = props.data && selectedLines.length === props.data.lineChartData.length;
-        if (areAllLineLegendsSelected && (props.colorFillBars && props.colorFillBars.length === selectedColorBarLegend.length || !props.colorFillBars)) {
-            // Clear all legends if all legends including color fill bar legends are selected
-            // Or clear all legends if all legends are selected and there are no color fill bars
-            _clearMultipleLegendSelections();
-        } else if (!selectedLines.length && !selectedColorBarLegend.length) {
-            // Clear all legends if no legends including color fill bar legends are selected
-            _clearMultipleLegendSelections();
-        } else {
-            // Otherwise, set state when one or more legends are selected, including color fill bar legends
-            setSelectedLegendPoints(selectedLines);
-            setIsSelectedLegend(true);
-        }
-        const selectedLegendTitlesToPass = selectedLines.map((line)=>line.legend);
-        _handleLegendClick(selectedLine, selectedLegendTitlesToPass);
-    }
-    function _handleMultipleColorFillBarLegendSelectionAction(selectedColorFillBar) {
-        const selectedColorFillBarIndex = selectedColorBarLegend.reduce((acc, colorFillBar, index)=>{
-            if (acc > -1 || colorFillBar.legend !== selectedColorFillBar.legend) {
-                return acc;
-            } else {
-                return index;
-            }
-        }, -1);
-        let selectedColorFillBars;
-        if (selectedColorFillBarIndex === -1) {
-            selectedColorFillBars = [
-                ...selectedColorBarLegend,
-                selectedColorFillBar
-            ];
-        } else {
-            selectedColorFillBars = selectedColorBarLegend.slice(0, selectedColorFillBarIndex).concat(selectedColorBarLegend.slice(selectedColorFillBarIndex + 1));
-        }
-        const areAllColorFillBarLegendsSelected = selectedColorFillBars.length === (props.colorFillBars && props.colorFillBars.length);
-        if (areAllColorFillBarLegendsSelected && (props.data && props.data.lineChartData.length === selectedLegendPoints.length || !props.data)) {
-            // Clear all legends if all legends, including line legends, are selected
-            // Or clear all legends if all legends are selected and there is no line data
-            _clearMultipleLegendSelections();
-        } else if (!selectedColorFillBars.length && !selectedLegendPoints.length) {
-            // Clear all legends if no legends are selected, including line legends
-            _clearMultipleLegendSelections();
-        } else {
-            // set state when one or more legends are selected, including line legends
-            setSelectedColorBarLegend(selectedColorFillBars);
-            setIsSelectedLegend(true);
-        }
-        const selectedLegendTitlesToPass = selectedColorFillBars.map((colorFillBar)=>colorFillBar.legend);
-        _handleLegendClick(selectedColorFillBar, selectedLegendTitlesToPass);
-    }
-    function _clearMultipleLegendSelections() {
-        setSelectedColorBarLegend([]);
-        setSelectedLegendPoints([]);
-        setIsSelectedLegend(false);
-    }
-    /**
-     * This function checks if the given legend is highlighted or not.
-     * A legend can be highlighted in 2 ways:
-     * 1. selection: if the user clicks on it
-     * 2. hovering: if there is no selected legend and the user hovers over it*/ function _legendHighlighted(legend) {
-        return selectedLegend === legend || selectedLegend === '' && activeLegend === legend;
-    }
-    /**
-     * This function checks if none of the legends is selected or hovered.*/ function _noLegendHighlighted() {
-        return selectedLegend === '' && activeLegend === '';
-    }
-    function _getColorFillBarOpacity(colorFillBar) {
-        return colorFillBar.applyPattern ? 1 : 0.4;
-    }
-    function _getAriaLabel(lineIndex, pointIndex) {
-        var _point_callOutAccessibilityData;
-        const line = _points[lineIndex];
-        const point = line.data[pointIndex];
-        const formattedDate = point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC) : point.x;
-        const xValue = point.xAxisCalloutData || formattedDate;
-        const legend = line.legend;
-        const yValue = point.yAxisCalloutData || point.y;
-        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
-    }
-    function _getChartTitle() {
-        const { chartTitle, lineChartData } = props.data;
-        return (chartTitle ? `${chartTitle}. ` : '') + `Line chart with ${(lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0} lines. `;
-    }
-    function _isChartEmpty() {
-        return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
-    }
-    const { legendProps, tickValues, tickFormat, eventAnnotationProps } = props;
-    _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
-    _isXAxisDateType = getXAxisType(_points);
-    let points = _points;
-    if (legendProps && !!legendProps.canSelectMultipleLegends) {
-        points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
-        calloutPointsRef.current = calloutData(points);
-    }
-    let legendBars = null;
-    // reduce computation cost by only creating legendBars
-    // if when hideLegend is false.
-    // NOTE: they are rendered only when hideLegend is false in CartesianChart.
-    if (!props.hideLegend) {
-        legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
-    }
-    const calloutProps = {
-        YValueHover: yValueHover,
-        hoverXValue,
-        YValue,
-        legend: legendVal,
-        color: lineColor,
-        XValue: hoverXValue,
-        descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
-        tabIndex: 0,
-        xAxisCalloutAccessibilityData,
-        ...props.calloutProps,
-        isPopoverOpen,
-        clickPosition,
-        positioning: {
-            target: refSelected
-        },
-        isCalloutForStack: props.isCalloutForStack,
-        culture: props.culture,
-        isCartesian: true,
-        customCallout: {
-            customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
-            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
-        }
-    };
-    const tickParams = {
-        tickValues,
-        tickFormat
-    };
-    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
-        ...props,
-        chartTitle: _getChartTitle(),
-        points: points,
-        chartType: ChartTypes.LineChart,
-        calloutProps: calloutProps,
-        tickParams: tickParams,
-        legendBars: legendBars,
-        createYAxis: createNumericYAxis,
-        getmargins: _getMargins,
-        getMinMaxOfYAxis: _getNumericMinMaxOfY,
-        getGraphData: _initializeLineChartData,
-        xAxisType: _isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis,
-        ..._isScatterPolar ? {
-            yMaxValue: 1,
-            yMinValue: -1
-        } : {},
-        getDomainNRangeValues: _getDomainNRangeValues,
-        createStringYAxis: createStringYAxis,
-        onChartMouseLeave: _handleChartMouseLeave,
-        enableFirstRenderOptimization: props.enablePerfOptimization && _firstRenderOptimization,
-        componentRef: cartesianChartRef,
-        children: (props)=>{
-            _xAxisScale = props.xScale;
-            _yScalePrimary = props.yScalePrimary;
-            _yScaleSecondary = props.yScaleSecondary;
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("line", {
-                x1: 0,
-                y1: 0,
-                x2: 0,
-                y2: props.containerHeight,
-                stroke: '#323130',
-                id: _verticalLine,
-                visibility: 'hidden',
-                strokeDasharray: '5,5'
-            }), props.optimizeLargeData ? /*#__PURE__*/ React.createElement("rect", {
-                id: _rectId,
-                width: props.containerWidth,
-                height: props.containerHeight,
-                fill: 'transparent'
-            }) : /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("g", null, _renderedColorFillBars, lines), eventAnnotationProps && /*#__PURE__*/ React.createElement(EventsAnnotation, {
-                ...eventAnnotationProps,
-                scale: props.xScale,
-                chartYTop: margins.top + eventLabelHeight,
-                chartYBottom: props.containerHeight - 35
-            })));
-        }
-    }) : /*#__PURE__*/ React.createElement("div", {
-        id: _emptyChartId,
-        role: 'alert',
-        style: {
-            opacity: '0'
-        },
-        "aria-label": 'Graph has no data to display'
-    });
-});
-LineChart.displayName = 'LineChart';