fix(react-charting): Fixing area chart bugs for undefined property access

change/@fluentui-chart-utilities-5ed91c75-d5fa-4bf1-979f-8501857aa88f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(chart-utilities): Fixing area chart bugs for undefined property access",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-979ca52e-befe-4904-a7e3-00c7be4723cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Fixing area chart bugs for undefined property access",
+  "packageName": "@fluentui/react-charting",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-utilities/src/PlotlySchemaConverter.ts

@@ -293,6 +293,11 @@ export const mapFluentChart = (input: any): OutputChartType => {
           const isXNumber = isNumberArray(firstScatterData.x);
           if (isXDate || isXNumber) {
             return { isValid: true, type: isAreaChart ? 'area' : 'line', validTracesInfo: validTraces };
+          } else if (isAreaChart) {
+            return {
+              isValid: false,
+              errorMessage: 'Fallback to VerticalStackedBarChart is not allowed for Area Charts.',
+            };
           }
           return { isValid: true, type: 'fallback', validTracesInfo: validTraces };
         }

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -192,6 +192,9 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     }
     // Unsupported schema, render as VerticalStackedBarChart
     fallbackVSBC = true;
+    if (isAreaChart) {
+      throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');
+    }
     return (
       <ResponsiveVerticalStackedBarChart
         {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}