@fluentui/react-charting 5.23.80 → 5.23.82

package/lib/components/AreaChart/AreaChart.base.d.ts

@@ -61,6 +61,8 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
     private _cartesianChartRef;
     private _legendsRef;
     private _containsSecondaryYAxis;
+    private _hasDuplicateXValues;
+    private _hasMissingXValues;
     constructor(props: IAreaChartProps);
     componentDidUpdate(prevProps: IAreaChartProps): void;
     render(): JSX.Element;
@@ -76,6 +78,7 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
     private _handleChartMouseLeave;
     private _getDataPoints;
     private _createDataSet;
+    private _createDatasetForXCoordinateWithMultipleYValues;
     private _getCustomizedCallout;
     private _getGraphData;
     private _onLegendHover;
@@ -87,6 +90,7 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
     private _getLineOpacity;
     private _updateCircleFillColor;
     private _drawGraph;
+    private _getOnClickHandler;
     private _getCircleRadius;
     private _closeCallout;
     /**
@@ -108,6 +112,8 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
     private _getAriaLabel;
     private _isChartEmpty;
     private _getChartTitle;
+    private _xCoordinateContainsMultipleY;
+    private _containsMissingXValues;
     private _shouldFillToZeroY;
 }
 export {};

package/lib/components/AreaChart/AreaChart.base.js

@@ -26,6 +26,8 @@ var AreaChartBase = /** @class */ (function (_super) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this._containsSecondaryYAxis = false;
+        _this._hasDuplicateXValues = false;
+        _this._hasMissingXValues = false;
         _this.toImage = function (opts) {
             var _a, _b;
             return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, getRTL(), opts);
@@ -216,7 +218,7 @@ var AreaChartBase = /** @class */ (function (_super) {
             };
         };
         _this._createDataSet = function (points) {
-            if (_this.props.enablePerfOptimization && _this._enableComputationOptimization) {
+            if (_this.props.enablePerfOptimization && _this._enableComputationOptimization && !_this._hasDuplicateXValues) {
                 var allChartPoints_1 = [];
                 var dataSet_1 = [];
                 var colors_1 = [];
@@ -273,40 +275,58 @@ var AreaChartBase = /** @class */ (function (_super) {
                 var colors_2 = [];
                 var opacity_2 = [];
                 var calloutPoints = calloutData(points);
+                var data = {};
+                var keys = [];
+                var index_1 = 0;
                 points &&
                     points.length &&
                     points.forEach(function (singleChartPoint) {
+                        // if legend is not populated, then assign a legend
+                        if (_this._hasDuplicateXValues && !singleChartPoint.legend) {
+                            singleChartPoint.legend = "chart".concat(index_1);
+                            ++index_1;
+                        }
+                        singleChartPoint.data.forEach(function (point) {
+                            point.legend = singleChartPoint.legend;
+                        });
                         colors_2.push(singleChartPoint.color);
                         opacity_2.push(singleChartPoint.opacity || 1);
                         allChartPoints_2.push.apply(allChartPoints_2, singleChartPoint.data);
                     });
-                var tempArr = allChartPoints_2;
-                var _loop_1 = function () {
-                    var valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                    var filteredChartPoints = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck; });
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var singleDataset = {};
-                    filteredChartPoints.forEach(function (singleDataPoint, index) {
-                        singleDataset.xVal = singleDataPoint.x;
-                        singleDataset["chart".concat(index)] = singleDataPoint.y;
-                    });
-                    dataSet.push(singleDataset);
-                    // removing compared objects from array
-                    var val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                    tempArr = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val; });
-                };
-                while (tempArr.length) {
-                    _loop_1();
+                if (!_this._hasDuplicateXValues) {
+                    var tempArr = allChartPoints_2;
+                    var _loop_1 = function () {
+                        var valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                        var filteredChartPoints = tempArr.filter(function (point) {
+                            return (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck;
+                        });
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var singleDataset = {};
+                        filteredChartPoints.forEach(function (singleDataPoint, id) {
+                            singleDataset.xVal = singleDataPoint.x;
+                            singleDataset["chart".concat(id)] = singleDataPoint.y;
+                        });
+                        dataSet.push(singleDataset);
+                        // removing compared objects from array
+                        var val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                        tempArr = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val; });
+                    };
+                    while (tempArr.length) {
+                        _loop_1();
+                    }
+                    // get keys from dataset, used to create stacked data
+                    var keysLength = dataSet && Object.keys(dataSet[0]).length;
+                    for (var i = 0; i < keysLength - 1; i++) {
+                        var keyVal = "chart".concat(i);
+                        keys.push(keyVal);
+                    }
+                    // Data used to draw graph
+                    data = _this._getDataPoints(keys, dataSet);
                 }
-                // get keys from dataset, used to create stacked data
-                var keysLength = dataSet && Object.keys(dataSet[0]).length;
-                var keys = [];
-                for (var i = 0; i < keysLength - 1; i++) {
-                    var keyVal = "chart".concat(i);
-                    keys.push(keyVal);
+                else {
+                    var datasetForDuplicateValues = _this._createDatasetForXCoordinateWithMultipleYValues(allChartPoints_2);
+                    data = _this._getDataPoints(datasetForDuplicateValues.keys, datasetForDuplicateValues.filteredDataSet);
                 }
-                // Data used to draw graph
-                var data = _this._getDataPoints(keys, dataSet);
                 return {
                     colors: colors_2,
                     opacity: opacity_2,
@@ -316,6 +336,54 @@ var AreaChartBase = /** @class */ (function (_super) {
                 };
             }
         };
+        _this._createDatasetForXCoordinateWithMultipleYValues = function (allChartPoints) {
+            var dataSet = [];
+            // Group data points by x-axis value
+            var groupedData = {};
+            allChartPoints.forEach(function (dataPoint) {
+                var xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
+                if (!groupedData[xValue]) {
+                    groupedData[xValue] = [];
+                }
+                groupedData[xValue].push(dataPoint);
+            });
+            // Aggregate data points for each x-axis value
+            Object.keys(groupedData).forEach(function (xValue) {
+                var dataPoints = groupedData[xValue];
+                dataPoints.forEach(function (dataPoint, id) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var singleDataset = { xVal: dataPoints[0].x };
+                    var key = dataPoint.legend ? dataPoint.legend : "chart".concat(id);
+                    singleDataset[key] = dataPoint.y;
+                    dataSet.push(singleDataset);
+                });
+            });
+            // get all unique keys from each array within the dataSet
+            var allLegends = [];
+            dataSet.forEach(function (item) {
+                Object.keys(item).forEach(function (key) {
+                    if (key !== 'xVal' && !allLegends.includes(key)) {
+                        allLegends.push(key);
+                    }
+                });
+            });
+            dataSet.forEach(function (item) {
+                allLegends.forEach(function (legend) {
+                    if (!item[legend]) {
+                        item[legend] = 0; // Fill with 0 if the legend is missing
+                    }
+                });
+            });
+            // exclude all items within dataset having all legend values 0
+            var filteredDataSet = dataSet.filter(function (item) {
+                return allLegends.some(function (legend) { return item[legend] !== 0; });
+            });
+            var keys = Array.from(new Set(filteredDataSet.flatMap(function (item) { return Object.keys(item).filter(function (key) { return key !== 'xVal'; }); })));
+            return {
+                keys: keys,
+                filteredDataSet: filteredDataSet,
+            };
+        };
         _this._getCustomizedCallout = function () {
             return _this.props.onRenderCalloutPerStack
                 ? _this.props.onRenderCalloutPerStack(_this.state.stackCalloutProps)
@@ -403,9 +471,9 @@ var AreaChartBase = /** @class */ (function (_super) {
             var lineColor;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._data.forEach(function (singleStackedData, index) {
-                var _a, _b, _c, _d, _e, _f;
-                var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
-                var curveFactory = getCurveFactory((_a = points[index].lineOptions) === null || _a === void 0 ? void 0 : _a.curve, d3CurveBasis);
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+                var curveFactory = getCurveFactory((_c = (_b = points[index]) === null || _b === void 0 ? void 0 : _b.lineOptions) === null || _c === void 0 ? void 0 : _c.curve, d3CurveBasis);
                 var area = d3Area()
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     .x(function (d) { return xScale(d.xVal); })
@@ -426,7 +494,7 @@ var AreaChartBase = /** @class */ (function (_super) {
                         React.createElement("linearGradient", { id: "gradient_".concat(index), x1: "0%", x2: "0%", y1: "0%", y2: "100%" },
                             React.createElement("stop", { offset: "0", stopColor: _this._colors[index] }),
                             React.createElement("stop", { offset: "100%", stopColor: "transparent" })))),
-                    React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (_c = (_b = points[index].lineOptions) === null || _b === void 0 ? void 0 : _b.strokeWidth) !== null && _c !== void 0 ? _c : 3, stroke: _this._colors[index], opacity: _this._getLineOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, strokeDasharray: (_d = points[index].lineOptions) === null || _d === void 0 ? void 0 : _d.strokeDasharray, strokeDashoffset: (_e = points[index].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDashoffset, strokeLinecap: (_f = points[index].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeLinecap }),
+                    React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (_f = (_e = (_d = points[index]) === null || _d === void 0 ? void 0 : _d.lineOptions) === null || _e === void 0 ? void 0 : _e.strokeWidth) !== null && _f !== void 0 ? _f : 3, stroke: _this._colors[index], opacity: _this._getLineOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, strokeDasharray: (_h = (_g = points[index]) === null || _g === void 0 ? void 0 : _g.lineOptions) === null || _h === void 0 ? void 0 : _h.strokeDasharray, strokeDashoffset: (_k = (_j = points[index]) === null || _j === void 0 ? void 0 : _j.lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDashoffset, strokeLinecap: (_m = (_l = points[index]) === null || _l === void 0 ? void 0 : _l.lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap }),
                     singleStackedData.length === 1 ? (React.createElement("circle", { id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), cx: xScale(singleStackedData[0].xVal), cy: yScale(singleStackedData[0].values[1]), r: 6, stroke: _this._colors[index], strokeWidth: 3, fill: _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove })) : (React.createElement("path", __assign({ id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), d: area(singleStackedData), fill: _this.props.enableGradient ? "url(#gradient_".concat(index, ")") : _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, (_this.props.optimizeLargeData && {
                         'data-is-focusable': _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(),
                         role: 'img',
@@ -436,10 +504,11 @@ var AreaChartBase = /** @class */ (function (_super) {
             var circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._data.forEach(function (singleStackedData, index) {
+                var _a;
                 if (points.length === index) {
                     return;
                 }
-                var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+                var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
                 if (!_this.props.optimizeLargeData || singleStackedData.length === 1) {
                     // Render circles for all data points
                     graph.push(React.createElement("g", { key: "".concat(index, "-dots-").concat(_this._uniqueIdForGraph), clipPath: "url(#clip)", role: "region", "aria-label": "".concat(points[index].legend, ", series ").concat(index + 1, " of ").concat(points.length, " with ").concat(points[index].data.length, " data points.") }, singleStackedData.map(function (singlePoint, pointIndex) {
@@ -447,7 +516,8 @@ var AreaChartBase = /** @class */ (function (_super) {
                         var xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
                         lineColor = points[index].color;
                         var legend = points[index].legend;
-                        return (React.createElement("circle", __assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick), onFocus: function () { return _this._handleFocus(index, pointIndex, circleId); }, onBlur: _this._handleBlur }, getSecureProps(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend), role: "img", "aria-label": _this._getAriaLabel(index, pointIndex) })));
+                        return (React.createElement("circle", __assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), { onFocus: function () { return _this._handleFocus(index, pointIndex, circleId); }, onBlur: _this._handleBlur }, getSecureProps(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend), role: "img", "aria-label": (!_this._hasDuplicateXValues && !_this._hasMissingXValues && _this._getAriaLabel(index, pointIndex)) ||
+                                undefined })));
                     })));
                 }
                 else {
@@ -458,7 +528,7 @@ var AreaChartBase = /** @class */ (function (_super) {
                             var circleId = "".concat(_this._circleId, "_").concat(index * _this._data[0].length + pointIndex);
                             lineColor = points[index].color;
                             var legend = points[index].legend;
-                            graph.push(React.createElement("circle", __assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick) }, getSecureProps(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend) })));
+                            graph.push(React.createElement("circle", __assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), getSecureProps(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend) })));
                         }
                     });
                 }
@@ -492,6 +562,12 @@ var AreaChartBase = /** @class */ (function (_super) {
             }
             return graph;
         };
+        _this._getOnClickHandler = function (points, index, pointIndex) {
+            return (!_this._hasDuplicateXValues &&
+                !_this._hasMissingXValues && {
+                onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick),
+            });
+        };
         _this._getCircleRadius = function (xDataPoint, circleRadius, circleId, legend) {
             var _a = _this.state, isCircleClicked = _a.isCircleClicked, nearestCircleToHighlight = _a.nearestCircleToHighlight, activePoint = _a.activePoint;
             // Show the circle if no legends are selected or if the point's legend is in the selected legends
@@ -529,6 +605,38 @@ var AreaChartBase = /** @class */ (function (_super) {
             return _this._getHighlightedLegend().length === 0;
         };
         _this._addDefaultColors = function (lineChartData) {
+            if (_this._hasMissingXValues) {
+                // get union of all x values
+                var allXValues_1 = new Set();
+                lineChartData &&
+                    lineChartData.forEach(function (line) {
+                        line.data.forEach(function (point) {
+                            var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                            allXValues_1.add(xValue);
+                        });
+                    });
+                lineChartData &&
+                    lineChartData.forEach(function (line) {
+                        allXValues_1.forEach(function (xValue) {
+                            var point = line.data.find(function (item) {
+                                return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
+                            });
+                            if (!point) {
+                                line.data.push({
+                                    x: typeof xValue === 'string' ? new Date(xValue) : xValue,
+                                    y: 0,
+                                    legend: line.legend,
+                                });
+                            }
+                        });
+                        // sort the data points by x value
+                        line.data.sort(function (a, b) {
+                            var xA = a.x instanceof Date ? a.x.getTime() : a.x;
+                            var xB = b.x instanceof Date ? b.x.getTime() : b.x;
+                            return xA < xB ? -1 : xA > xB ? 1 : 0;
+                        });
+                    });
+            }
             return lineChartData
                 ? lineChartData.map(function (item, index) {
                     var _a, _b;
@@ -603,6 +711,7 @@ var AreaChartBase = /** @class */ (function (_super) {
         warnDeprecations(COMPONENT_NAME, props, {
             showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
         });
+        _this._hasMissingXValues = _this._containsMissingXValues();
         _this._uniqueIdForGraph = getId('areaChart_');
         _this._verticalLineId = getId('verticalLine_');
         _this._circleId = getId('circle');
@@ -635,6 +744,7 @@ var AreaChartBase = /** @class */ (function (_super) {
         if (!this._isChartEmpty()) {
             var lineChartData = this.props.data.lineChartData;
             var points = this._addDefaultColors(lineChartData);
+            this._hasDuplicateXValues = this._xCoordinateContainsMultipleY();
             this._containsSecondaryYAxis =
                 !!this.props.secondaryYScaleOptions && points.some(function (point) { return point.useSecondaryYScale; });
             var _a = this._createSet(points), colors = _a.colors, opacity = _a.opacity, data = _a.data, calloutPoints = _a.calloutPoints;
@@ -648,7 +758,7 @@ var AreaChartBase = /** @class */ (function (_super) {
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            var calloutProps = __assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
+            var calloutProps = __assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible && !this._hasDuplicateXValues && !this._hasMissingXValues, directionalHint: DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
             return (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.AreaChart, calloutProps: calloutProps, legendBars: legends, createYAxis: createNumericYAxis, isCalloutForStack: true, xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, tickParams: tickParams, maxOfYVal: data.maxOfYVal, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findNumericMinMaxOfY, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
                 /* eslint-disable react/jsx-no-bind */
                 // eslint-disable-next-line react/no-children-prop
@@ -722,6 +832,54 @@ var AreaChartBase = /** @class */ (function (_super) {
         // which means chart is not empty
         );
     };
+    AreaChartBase.prototype._xCoordinateContainsMultipleY = function () {
+        var lineChartData = this.props.data.lineChartData;
+        if (!lineChartData) {
+            return false;
+        }
+        for (var _i = 0, lineChartData_1 = lineChartData; _i < lineChartData_1.length; _i++) {
+            var item = lineChartData_1[_i];
+            var xValueMap = {};
+            for (var _a = 0, _b = item.data; _a < _b.length; _a++) {
+                var point = _b[_a];
+                var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                if (!xValueMap[xValue]) {
+                    xValueMap[xValue] = [];
+                }
+                xValueMap[xValue].push(point.y);
+                if (xValueMap[xValue].length > 1) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    AreaChartBase.prototype._containsMissingXValues = function () {
+        var lineChartData = this.props.data.lineChartData;
+        if (!lineChartData) {
+            return false;
+        }
+        var allXValues = new Set();
+        lineChartData.forEach(function (line) {
+            line.data.forEach(function (point) {
+                var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                allXValues.add(xValue);
+            });
+        });
+        // for all x values, check if the x value is present in all series
+        var hasMissingValues = false;
+        lineChartData.forEach(function (line) {
+            allXValues.forEach(function (xValue) {
+                var point = line.data.find(function (item) {
+                    return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
+                });
+                if (!point) {
+                    hasMissingValues = true;
+                }
+            });
+        });
+        return hasMissingValues;
+    };
     AreaChartBase.prototype._shouldFillToZeroY = function () {
         return this.props.mode === 'tozeroy' || this._containsSecondaryYAxis;
     };