@fluentui/react-charts 9.3.3 → 9.3.4

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Tue, 21 Oct 2025 14:13:08 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Oct 2025 16:17:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.4)
+
+Fri, 31 Oct 2025 16:17:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.3..@fluentui/react-charts_v9.3.4)
+
+### Patches
+
+- fix chart crash issue ([PR #35399](https://github.com/microsoft/fluentui/pull/35399) by anushgupta@microsoft.com)
+- update react version to react 19 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by anushgupta@microsoft.com)
+- fix dark mode styles of chart table ([PR #35377](https://github.com/microsoft/fluentui/pull/35377) by anushgupta@microsoft.com)
+- fix chart exceptions ([PR #35393](https://github.com/microsoft/fluentui/pull/35393) by anushgupta@microsoft.com)
+- feat: map deprecated plotly create_gantt() scatter traces to gantt chart ([PR #35334](https://github.com/microsoft/fluentui/pull/35334) by kumarkshitij@microsoft.com)
+- Bump @fluentui/react-button to v9.6.10 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-overflow to v9.6.3 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-popover to v9.12.10 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.9 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+
 ## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.3)
 
-Tue, 21 Oct 2025 14:13:08 GMT 
+Tue, 21 Oct 2025 14:16:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.2..@fluentui/react-charts_v9.3.3)
 
 ### Patches
@@ -23,11 +43,11 @@ Tue, 21 Oct 2025 14:13:08 GMT
 - fix(react-charts): Show markers only when mode has markers for large data ([PR #35311](https://github.com/microsoft/fluentui/pull/35311) by 120183316+srmukher@users.noreply.github.com)
 - fix popover positioning issue ([PR #35289](https://github.com/microsoft/fluentui/pull/35289) by anushgupta@microsoft.com)
 - fix chart exception issue ([PR #35342](https://github.com/microsoft/fluentui/pull/35342) by anushgupta@microsoft.com)
-- Bump @fluentui/react-button to v9.6.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-overflow to v9.6.2 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-popover to v9.12.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-tooltip to v9.8.8 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-button to v9.6.9 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-overflow to v9.6.2 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-popover to v9.12.9 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.8 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
 
 ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.2)
 

package/dist/index.d.ts

@@ -162,6 +162,10 @@ export declare type AxisProps = {
      *   - Exception: when `tickStep` uses `"L<f>"`, you can specify the raw value directly.
      */
     tick0?: number | Date;
+    /**
+     * Sets the text displayed at each tick position specified by `tickValues`. Used with `tickValues`.
+     */
+    tickText?: string[];
 };
 
 /**

package/lib/components/AreaChart/AreaChart.js

@@ -33,6 +33,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const _firstRenderOptimization = true;
     const _emptyChartId = useId('_AreaChart_empty');
     let _containsSecondaryYAxis = false;
+    let _hasMissingXValues = _containsMissingXValues();
+    let _hasDuplicateXValues = _xCoordinateContainsMultipleY();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints;
     let _createSet;
@@ -268,7 +270,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         };
     }
     function _createDataSet(points) {
-        if (props.enablePerfOptimization && _enableComputationOptimization) {
+        if (props.enablePerfOptimization && _enableComputationOptimization && !_hasDuplicateXValues) {
             const allChartPoints = [];
             const dataSet = [];
             const colors = [];
@@ -323,35 +325,50 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             const colors = [];
             const opacity = [];
             const calloutPoints = calloutData(points);
+            let data = {};
+            const keys = [];
+            let index = 0;
             points && points.length && points.forEach((singleChartPoint)=>{
+                // if legend is not populated, then assign a legend
+                if (_hasDuplicateXValues && !singleChartPoint.legend) {
+                    singleChartPoint.legend = `chart${index}`;
+                    ++index;
+                }
+                singleChartPoint.data.forEach((point)=>{
+                    point.legend = singleChartPoint.legend;
+                });
                 colors.push(singleChartPoint.color);
                 opacity.push(singleChartPoint.opacity || 1);
                 allChartPoints.push(...singleChartPoint.data);
             });
-            let tempArr = allChartPoints;
-            while(tempArr.length){
-                const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                const filteredChartPoints = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const singleDataset = {};
-                filteredChartPoints.forEach((singleDataPoint, index)=>{
-                    singleDataset.xVal = singleDataPoint.x;
-                    singleDataset[`chart${index}`] = singleDataPoint.y;
-                });
-                dataSet.push(singleDataset);
-                // removing compared objects from array
-                const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                tempArr = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val);
-            }
-            // get keys from dataset, used to create stacked data
-            const keysLength = dataSet && Object.keys(dataSet[0]).length;
-            const keys = [];
-            for(let i = 0; i < keysLength - 1; i++){
-                const keyVal = `chart${i}`;
-                keys.push(keyVal);
+            if (!_hasDuplicateXValues) {
+                let tempArr = allChartPoints;
+                while(tempArr.length){
+                    const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    const filteredChartPoints = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const singleDataset = {};
+                    filteredChartPoints.forEach((singleDataPoint, id)=>{
+                        singleDataset.xVal = singleDataPoint.x;
+                        singleDataset[`chart${id}`] = singleDataPoint.y;
+                    });
+                    dataSet.push(singleDataset);
+                    // removing compared objects from array
+                    const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    tempArr = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val);
+                }
+                // get keys from dataset, used to create stacked data
+                const keysLength = dataSet && Object.keys(dataSet[0]).length;
+                for(let i = 0; i < keysLength - 1; i++){
+                    const keyVal = `chart${i}`;
+                    keys.push(keyVal);
+                }
+                // Data used to draw graph
+                data = _getDataPoints(keys, dataSet);
+            } else {
+                const datasetForDuplicateValues = _createDatasetForXCoordinateWithMultipleYValues(allChartPoints);
+                data = _getDataPoints(datasetForDuplicateValues.keys, datasetForDuplicateValues.filteredDataSet);
             }
-            // Data used to draw graph
-            const data = _getDataPoints(keys, dataSet);
             return {
                 colors,
                 opacity,
@@ -361,6 +378,56 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             };
         }
     }
+    function _createDatasetForXCoordinateWithMultipleYValues(allChartPoints) {
+        const dataSet = [];
+        // Group data points by x-axis value
+        const groupedData = {};
+        allChartPoints.forEach((dataPoint)=>{
+            const 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((xValue)=>{
+            const dataPoints = groupedData[xValue];
+            dataPoints.forEach((dataPoint, id)=>{
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const singleDataset = {
+                    xVal: dataPoints[0].x
+                };
+                const key = dataPoint.legend ? dataPoint.legend : `chart${id}`;
+                singleDataset[key] = dataPoint.y;
+                dataSet.push(singleDataset);
+            });
+        });
+        // get all unique keys from each array within the dataSet
+        const allLegends = [];
+        dataSet.forEach((item)=>{
+            Object.keys(item).forEach((key)=>{
+                if (key !== 'xVal' && !allLegends.includes(key)) {
+                    allLegends.push(key);
+                }
+            });
+        });
+        dataSet.forEach((item)=>{
+            allLegends.forEach((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
+        const filteredDataSet = dataSet.filter((item)=>{
+            return allLegends.some((legend)=>item[legend] !== 0);
+        });
+        const keys = Array.from(new Set(filteredDataSet.flatMap((item)=>Object.keys(item).filter((key)=>key !== 'xVal'))));
+        return {
+            keys,
+            filteredDataSet
+        };
+    }
     function _getCustomizedCallout() {
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
@@ -462,9 +529,9 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         let lineColor;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _data.forEach((singleStackedData, index)=>{
-            var _points_index_lineOptions, _points_index_lineOptions1, _points_index_lineOptions2, _points_index_lineOptions3, _points_index_lineOptions4;
-            const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
-            const curveFactory = getCurveFactory((_points_index_lineOptions = points[index].lineOptions) === null || _points_index_lineOptions === void 0 ? void 0 : _points_index_lineOptions.curve, d3CurveBasis);
+            var _points_index, _points_index_lineOptions, _points_index1, _points_index_lineOptions1, _points_index2, _points_index_lineOptions2, _points_index3, _points_index_lineOptions3, _points_index4, _points_index_lineOptions4, _points_index5;
+            const yScale = ((_points_index = points[index]) === null || _points_index === void 0 ? void 0 : _points_index.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            const curveFactory = getCurveFactory((_points_index1 = points[index]) === null || _points_index1 === void 0 ? void 0 : (_points_index_lineOptions = _points_index1.lineOptions) === null || _points_index_lineOptions === void 0 ? void 0 : _points_index_lineOptions.curve, d3CurveBasis);
             const area = d3Area()// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .x((d)=>xScale(d.xVal))// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .y0((d)=>yScale(d.values[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -492,15 +559,15 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                 id: `${index}-line-${_uniqueIdForGraph}`,
                 d: line(singleStackedData),
                 fill: 'transparent',
-                strokeWidth: (_points_index_lineOptions_strokeWidth = (_points_index_lineOptions1 = points[index].lineOptions) === null || _points_index_lineOptions1 === void 0 ? void 0 : _points_index_lineOptions1.strokeWidth) !== null && _points_index_lineOptions_strokeWidth !== void 0 ? _points_index_lineOptions_strokeWidth : 3,
+                strokeWidth: (_points_index_lineOptions_strokeWidth = (_points_index2 = points[index]) === null || _points_index2 === void 0 ? void 0 : (_points_index_lineOptions1 = _points_index2.lineOptions) === null || _points_index_lineOptions1 === void 0 ? void 0 : _points_index_lineOptions1.strokeWidth) !== null && _points_index_lineOptions_strokeWidth !== void 0 ? _points_index_lineOptions_strokeWidth : 3,
                 stroke: _colors[index],
                 opacity: _getLineOpacity(points[index].legend),
                 onMouseMove: (event)=>_onRectMouseMove(event),
                 onMouseOut: _onRectMouseOut,
                 onMouseOver: (event)=>_onRectMouseMove(event),
-                strokeDasharray: (_points_index_lineOptions2 = points[index].lineOptions) === null || _points_index_lineOptions2 === void 0 ? void 0 : _points_index_lineOptions2.strokeDasharray,
-                strokeDashoffset: (_points_index_lineOptions3 = points[index].lineOptions) === null || _points_index_lineOptions3 === void 0 ? void 0 : _points_index_lineOptions3.strokeDashoffset,
-                strokeLinecap: (_points_index_lineOptions4 = points[index].lineOptions) === null || _points_index_lineOptions4 === void 0 ? void 0 : _points_index_lineOptions4.strokeLinecap
+                strokeDasharray: (_points_index3 = points[index]) === null || _points_index3 === void 0 ? void 0 : (_points_index_lineOptions2 = _points_index3.lineOptions) === null || _points_index_lineOptions2 === void 0 ? void 0 : _points_index_lineOptions2.strokeDasharray,
+                strokeDashoffset: (_points_index4 = points[index]) === null || _points_index4 === void 0 ? void 0 : (_points_index_lineOptions3 = _points_index4.lineOptions) === null || _points_index_lineOptions3 === void 0 ? void 0 : _points_index_lineOptions3.strokeDashoffset,
+                strokeLinecap: (_points_index5 = points[index]) === null || _points_index5 === void 0 ? void 0 : (_points_index_lineOptions4 = _points_index5.lineOptions) === null || _points_index_lineOptions4 === void 0 ? void 0 : _points_index_lineOptions4.strokeLinecap
             }), singleStackedData.length === 1 ? /*#__PURE__*/ React.createElement("circle", {
                 id: `${index}-graph-${_uniqueIdForGraph}`,
                 cx: xScale(singleStackedData[0].xVal),
@@ -534,10 +601,11 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         const circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _data.forEach((singleStackedData, index)=>{
+            var _points_index;
             if (points.length === index) {
                 return;
             }
-            const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            const yScale = ((_points_index = points[index]) === null || _points_index === void 0 ? void 0 : _points_index.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
             if (!props.optimizeLargeData || singleStackedData.length === 1) {
                 // Render circles for all data points
                 graph.push(/*#__PURE__*/ React.createElement("g", {
@@ -561,13 +629,13 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                         fill: _updateCircleFillColor(xDataPoint, lineColor, circleId),
                         onMouseOut: _onRectMouseOut,
                         onMouseOver: (event)=>_onRectMouseMove(event),
-                        onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
+                        ..._getOnClickHandler(points, index, pointIndex),
                         onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
                         onBlur: _handleBlur,
                         ...getSecureProps(pointOptions),
                         r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend),
                         role: "img",
-                        "aria-label": _getAriaLabel(index, pointIndex)
+                        "aria-label": !_hasDuplicateXValues && !_hasMissingXValues && _getAriaLabel(index, pointIndex) || undefined
                     });
                 })));
             } else {
@@ -589,7 +657,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                             onMouseOut: _onRectMouseOut,
                             onMouseOver: (event)=>_onRectMouseMove(event),
                             onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
-                            onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
+                            ..._getOnClickHandler(points, index, pointIndex),
                             ...getSecureProps(pointOptions),
                             r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend)
                         }));
@@ -636,6 +704,14 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         }
         return graph;
     }
+    function _getOnClickHandler(points, index, pointIndex) {
+        if (!_hasDuplicateXValues && !_hasMissingXValues) {
+            return {
+                onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick)
+            };
+        }
+        return {};
+    }
     function _getCircleRadius(xDataPoint, circleRadius, circleId, legend) {
         // Show the circle if no legends are selected or if the point's legend is in the selected legends
         if (!_noLegendHighlighted() && !_legendHighlighted(legend)) {
@@ -668,6 +744,36 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         ] : [];
     }
     function _addDefaultColors(lineChartData) {
+        if (_hasMissingXValues) {
+            // get union of all x values
+            const allXValues = new Set();
+            lineChartData && lineChartData.forEach((line)=>{
+                line.data.forEach((point)=>{
+                    const xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                    allXValues.add(xValue);
+                });
+            });
+            lineChartData && lineChartData.forEach((line)=>{
+                allXValues.forEach((xValue)=>{
+                    const point = line.data.find((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((a, b)=>{
+                    const xA = a.x instanceof Date ? a.x.getTime() : a.x;
+                    const xB = b.x instanceof Date ? b.x.getTime() : b.x;
+                    return xA < xB ? -1 : xA > xB ? 1 : 0;
+                });
+            });
+        }
         return lineChartData ? lineChartData.map((item, index)=>{
             let color;
             // isInverted property is applicable to v8 themes only
@@ -740,6 +846,52 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         const { chartTitle, lineChartData } = props.data;
         return (chartTitle ? `${chartTitle}. ` : '') + `Area chart with ${(lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0} data series. `;
     }
+    function _xCoordinateContainsMultipleY() {
+        const { lineChartData } = props.data;
+        if (!lineChartData) {
+            return false;
+        }
+        for (const item of lineChartData){
+            const xValueMap = {};
+            for (const point of item.data){
+                const 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;
+    }
+    function _containsMissingXValues() {
+        const { lineChartData } = props.data;
+        if (!lineChartData) {
+            return false;
+        }
+        const allXValues = new Set();
+        lineChartData.forEach((line)=>{
+            line.data.forEach((point)=>{
+                const 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
+        let hasMissingValues = false;
+        lineChartData.forEach((line)=>{
+            allXValues.forEach((xValue)=>{
+                const point = line.data.find((item)=>{
+                    return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
+                });
+                if (!point) {
+                    hasMissingValues = true;
+                }
+            });
+        });
+        return hasMissingValues;
+    }
     function _shouldFillToZeroY() {
         return props.mode === 'tozeroy' || _containsSecondaryYAxis;
     }
@@ -765,7 +917,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             xAxisCalloutAccessibilityData,
             ...props.calloutProps,
             clickPosition,
-            isPopoverOpen,
+            isPopoverOpen: isPopoverOpen && !_hasDuplicateXValues && !_hasMissingXValues,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,