fix(declarative-chart): negative VSBC fix (microsoft#34481)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charting-81807ca5-d5cd-42eb-ad61-aeb7bb3c403d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(declarative-chart): negative VSBC only lines case fix",
+  "packageName": "@fluentui/react-charting",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -1615,7 +1615,7 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps {
     xAxisInnerPadding?: number;
     xAxisOuterPadding?: number;
     xAxisPadding?: number;
-    yMinValue?: undefined;
+    yMinValue?: number | undefined;
 }
 
 // @public

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -292,6 +292,7 @@ export const transformPlotlyJsonToVSBCProps = (
 ): IVerticalStackedBarChartProps => {
   const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {};
   let yMaxValue = 0;
+  let yMinValue = 0;
   const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
   input.data.forEach((series: PlotData, index1: number) => {
@@ -343,6 +344,7 @@ export const transformPlotlyJsonToVSBCProps = (
         });
         if (!usesSecondaryYScale(series)) {
           yMaxValue = Math.max(yMaxValue, yVal);
+          yMinValue = Math.min(yMinValue, yVal);
         }
       }
     });
@@ -356,6 +358,7 @@ export const transformPlotlyJsonToVSBCProps = (
     height: input.layout?.height ?? 350,
     barWidth: 'auto',
     yMaxValue,
+    yMinValue,
     chartTitle,
     xAxisTitle,
     yAxisTitle,
@@ -364,6 +367,7 @@ export const transformPlotlyJsonToVSBCProps = (
     hideTickOverlap: true,
     hideLegend,
     roundCorners: true,
+    supportNegativeData: true,
   };
 };
 

packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -4994,9 +4994,11 @@ Object {
   "hideTickOverlap": true,
   "mode": "plotly",
   "roundCorners": true,
+  "supportNegativeData": true,
   "width": undefined,
   "xAxisTitle": "",
   "yAxisTitle": "",
   "yMaxValue": 3400,
+  "yMinValue": 0,
 }
 `;

packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts

@@ -88,9 +88,9 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps {
   calloutProps?: Partial<ICalloutProps>;
 
   /**
-   * 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