@fluentui/react-charts 9.1.1 → 9.1.3

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Fri, 13 Jun 2025 12:30:21 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Jun 2025 15:47:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.3)
+
+Mon, 23 Jun 2025 15:47:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.2..@fluentui/react-charts_v9.1.3)
+
+### Patches
+
+- Add negative y value support in GVBC ([PR #34687](https://github.com/microsoft/fluentui/pull/34687) by anushgupta@microsoft.com)
+- add support for negative vsbc ([PR #34668](https://github.com/microsoft/fluentui/pull/34668) by anushgupta@microsoft.com)
+- port v8 changes to v9 ([PR #34665](https://github.com/microsoft/fluentui/pull/34665) by anushgupta@microsoft.com)
+- Bump @fluentui/react-overflow to v9.4.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
+- Bump @fluentui/react-popover to v9.11.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
+
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.2)
+
+Wed, 18 Jun 2025 17:33:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.1..@fluentui/react-charts_v9.1.2)
+
+### Patches
+
+- chore (react-charts): Remove enzyme dependency for tests ([PR #34595](https://github.com/microsoft/fluentui/pull/34595) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix (react-charts): Update traceinfo property structure ([PR #34652](https://github.com/microsoft/fluentui/pull/34652) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix(react-charts): Consume y axis tick format for bar labels ([PR #34653](https://github.com/microsoft/fluentui/pull/34653) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix(react-charts): Fix svg tooltip background alignment ([PR #34663](https://github.com/microsoft/fluentui/pull/34663) by 98592573+AtishayMsft@users.noreply.github.com)
+- port v8 fixes to v9 ([PR #34670](https://github.com/microsoft/fluentui/pull/34670) by anushgupta@microsoft.com)
+- Charts made responsive ([PR #34641](https://github.com/microsoft/fluentui/pull/34641) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.5.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-overflow to v9.4.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-popover to v9.11.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-tabster to v9.25.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+
 ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.1)
 
-Fri, 13 Jun 2025 12:30:21 GMT 
+Fri, 13 Jun 2025 12:32:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.0..@fluentui/react-charts_v9.1.1)
 
 ### Patches

package/dist/index.d.ts

@@ -343,6 +343,11 @@ export declare interface CartesianChartProps {
      * props for the svg; use this to include aria-* or other attributes on the tag
      */
     svgProps?: React_2.SVGProps<SVGSVGElement>;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     * @default True for LineChart but False for other charts
+     */
+    enableReflow?: boolean;
     /**
      * Props related to reflow behavior of the chart
      */
@@ -441,6 +446,10 @@ export declare interface CartesianChartStyleProps {
      * boolean flag which determines if shape is drawn in callout
      */
     toDrawShape?: boolean;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     */
+    enableReflow?: boolean;
 }
 
 /**
@@ -644,7 +653,7 @@ declare enum ChartTypes {
 
 export declare interface ChildProps {
     xScale?: any;
-    yScale?: any;
+    yScalePrimary?: any;
     yScaleSecondary?: any;
     containerHeight?: number;
     containerWidth?: number;
@@ -1265,6 +1274,11 @@ export declare interface GroupedVerticalBarChartProps extends CartesianChartProp
      * @default 'default'
      */
     mode?: 'default' | 'plotly';
+    /**
+     * @default false
+     * The prop used to enable rounded corners for the chart.
+     */
+    roundCorners?: boolean;
 }
 
 /**
@@ -1328,6 +1342,11 @@ export declare interface GVBarChartSeriesPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
 }
 
 export declare interface GVDataPoint {
@@ -2224,6 +2243,11 @@ export declare interface LineChartPoints {
      * Defines the function that is executed on clicking  line
      */
     onLineClick?: () => void;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
 }
 
 /**
@@ -2477,6 +2501,13 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      * Used to control the first render cycle Performance optimization code.
      */
     enableFirstRenderOptimization?: boolean;
+    /**
+     * Get the min and max values of the y-axis
+     */
+    getMinMaxOfYAxis?: (points: DataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+        startValue: number;
+        endValue: number;
+    };
 }
 
 declare type NodesInColumns = {
@@ -2536,13 +2567,59 @@ declare interface RenderFunction<P> {
     (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null;
 }
 
+/**
+ * Responsive Child props
+ * {@docCategory ResponsiveContainer}
+ */
+export declare interface ResponsiveChildProps {
+    width?: number;
+    height?: number;
+    shouldResize?: number;
+}
+
+/**
+ * Responsive Container component
+ * {@docCategory ResponsiveContainer}
+ */
 export declare const ResponsiveContainer: React_2.FC<ResponsiveContainerProps>;
 
-declare interface ResponsiveContainerProps {
-    children: React_2.ReactElement;
-    onResize?: (width: number, height: number) => void;
+/**
+ * Responsive Container props
+ * {@docCategory ResponsiveContainer}
+ */
+export declare interface ResponsiveContainerProps {
+    /**
+     * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.
+     */
+    aspect?: number;
+    /**
+     * Width of the container
+     */
     width?: number | string;
+    /**
+     * Height of the container
+     */
     height?: number | string;
+    /**
+     * Minimum width of the container
+     */
+    minWidth?: number | string;
+    /**
+     * Minimum height of the container
+     */
+    minHeight?: number | string;
+    /**
+     * Maximum height of the container
+     */
+    maxHeight?: number;
+    /**
+     * Callback providing the updated chart width and height values when the container is resized
+     */
+    onResize?: (width: number, height: number) => void;
+    /**
+     * Child component to be rendered within the container
+     */
+    children: React_2.ReactElement<ResponsiveChildProps>;
 }
 
 export declare const SankeyChart: React_2.FunctionComponent<SankeyChartProps>;
@@ -3128,9 +3205,9 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
      */
     onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;
     /**
-     * yMinValue is not supported for bar charts, so only allow "undefined"
+     * yMinValue is supported for bar charts that has only lines
      */
-    yMinValue?: undefined;
+    yMinValue?: number | undefined;
     /**
      * Allow hover actions on the legend
      * @default true
@@ -3289,6 +3366,12 @@ export declare interface VSChartDataPoint {
     culture?: string;
 }
 
+/**
+ * An HOC to update wrapped component on container resize.
+ * {@docCategory ResponsiveContainer}
+ */
+export declare function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(WrappedComponent: React_2.ComponentType<TProps>): React_2.FC<TProps>;
+
 declare enum XAxisTypes {
     NumericAxis = 0,
     DateAxis = 1,

package/lib/components/AreaChart/AreaChart.js

@@ -6,7 +6,7 @@ import { select as d3Select } from 'd3-selection';
 import { tokens } from '@fluentui/react-theme';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import { CartesianChart } from '../../index';
-import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, getNextColor, getColorFromToken, formatDate, getSecureProps, areArraysEqual, getCurveFactory, find } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, getNextColor, getColorFromToken, formatDate, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,6 +29,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const _enableComputationOptimization = true;
     const _firstRenderOptimization = true;
     const _emptyChartId = useId('_AreaChart_empty');
+    let _containsSecondaryYAxis = false;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints;
     let _createSet;
@@ -199,7 +200,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         var _props_legendProps;
         const renderPoints = [];
         let maxOfYVal = 0;
-        if (props.mode === 'tozeroy') {
+        if (_shouldFillToZeroY()) {
             keys.forEach((key, index)=>{
                 const currentLayer = [];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -236,7 +237,10 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         _isMultiStackChart = !!(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) ? (renderPoints === null || renderPoints === void 0 ? void 0 : renderPoints.length) >= 1 : (renderPoints === null || renderPoints === void 0 ? void 0 : renderPoints.length) > 1);
         return {
             renderData: renderPoints,
-            maxOfYVal
+            // The maxOfYVal prop is only required for the primary y-axis. When the data includes
+            // a secondary y-axis, the mode defaults to tozeroy, so maxOfYVal should be calculated using
+            // only the data points associated with the primary y-axis.
+            maxOfYVal: _containsSecondaryYAxis ? findNumericMinMaxOfY(props.data.lineChartData).endValue : maxOfYVal
         };
     }
     function _createDataSet(points) {
@@ -338,8 +342,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     }
     function _getGraphData(// eslint-disable-next-line @typescript-eslint/no-explicit-any
     xAxis, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    yAxis, containerHeight, containerWidth, xElement) {
-        _chart = _drawGraph(containerHeight, xAxis, yAxis, xElement);
+    yAxis, containerHeight, containerWidth, xElement, yAxisElement, yScaleSecondary) {
+        _chart = _drawGraph(containerHeight, xAxis, yAxis, yScaleSecondary, xElement);
     }
     function _onLegendHover(legend) {
         setActiveLegend(legend);
@@ -425,8 +429,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         }
         return fillColor;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function _drawGraph(containerHeight, xScale, yScale, xElement) {
+    function _drawGraph(containerHeight, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xScale, yScalePrimary, yScaleSecondary, xElement) {
         const points = _addDefaultColors(props.data.lineChartData);
         const { pointOptions, pointLineOptions } = props.data;
         const graph = [];
@@ -434,6 +438,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         // 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);
             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
@@ -442,7 +447,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .x((d)=>xScale(d.xVal))// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .y((d)=>yScale(d.values[1])).curve(curveFactory);
-            const layerOpacity = props.mode === 'tozeroy' ? 0.8 : _opacity[index];
+            const layerOpacity = _shouldFillToZeroY() ? 0.8 : _opacity[index];
             var _points_index_lineOptions_strokeWidth;
             graph.push(/*#__PURE__*/ React.createElement(React.Fragment, {
                 key: `${index}-graph-${_uniqueIdForGraph}`
@@ -506,6 +511,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             if (points.length === index) {
                 return;
             }
+            const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
             if (!props.optimizeLargeData || singleStackedData.length === 1) {
                 // Render circles for all data points
                 graph.push(/*#__PURE__*/ React.createElement("g", {
@@ -701,9 +707,13 @@ 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 _shouldFillToZeroY() {
+        return props.mode === 'tozeroy' || _containsSecondaryYAxis;
+    }
     if (!_isChartEmpty()) {
         const { lineChartData } = props.data;
         const points = _addDefaultColors(lineChartData);
+        _containsSecondaryYAxis = !!props.secondaryYScaleOptions && points.some((point)=>point.useSecondaryYScale);
         _createSet = _createDataSet;
         const { colors, opacity, data, calloutPoints } = _createSet(points);
         _calloutPoints = calloutPoints;