feat(react-charts): Migrate VSBC to V9

change/@fluentui-react-charts-1780d81e-b440-40b8-898f-9ddeab9e4f0d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Migrate VSBC to v9 ",
+  "packageName": "@fluentui/react-charts",
+  "email": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -840,6 +840,7 @@ export interface LineDataInVerticalStackedBarChart {
     data?: number;
     // (undocumented)
     legend: string;
+    lineOptions?: LineChartLineOptions;
     useSecondaryYScale?: boolean;
     // (undocumented)
     y: number;
@@ -863,13 +864,15 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
     chartType: ChartTypes;
     children(props: ChildProps): React_2.ReactNode;
     culture?: string;
+    customizedCallout?: any;
     datasetForXAxisDomain?: string[];
     enableFirstRenderOptimization?: boolean;
     // (undocumented)
     getAxisData?: any;
     getDomainMargins?: (containerWidth: number) => Margins;
     getGraphData?: any;
     getmargins?: (margins: Margins) => void;
+    isCalloutForStack?: boolean;
     legendBars: JSX.Element | null;
     maxOfYVal?: number;
     onChartMouseLeave?: () => void;
@@ -1059,6 +1062,46 @@ export interface VerticalBarChartStyles extends CartesianChartStyles {
     barLabel: string;
 }
 
+// @public (undocumented)
+export const VerticalStackedBarChart: React_2.FunctionComponent<VerticalStackedBarChartProps>;
+
+// @public
+export interface VerticalStackedBarChartProps extends CartesianChartProps {
+    allowHoverOnLegend?: boolean;
+    barCornerRadius?: number;
+    barGapMax?: number;
+    barMinimumHeight?: number;
+    barWidth?: number | 'default' | 'auto';
+    chartTitle?: string;
+    culture?: string;
+    data: VerticalStackedChartProps[];
+    enableGradient?: boolean;
+    hideLabels?: boolean;
+    isCalloutForStack?: boolean;
+    lineOptions?: LineChartLineOptions;
+    maxBarWidth?: number;
+    mode?: 'default' | 'plotly';
+    onBarClick?: (event: React_2.MouseEvent<SVGElement>, data: VerticalStackedChartProps | VSChartDataPoint) => void;
+    onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;
+    onRenderCalloutPerStack?: RenderFunction<VerticalStackedChartProps>;
+    roundCorners?: boolean;
+    styles?: VerticalStackedBarChartStyles;
+    xAxisInnerPadding?: number;
+    xAxisOuterPadding?: number;
+    xAxisPadding?: number;
+    yMinValue?: undefined;
+}
+
+// @public
+export interface VerticalStackedBarChartStyleProps extends CartesianChartStyleProps {
+}
+
+// @public
+export interface VerticalStackedBarChartStyles extends CartesianChartStyles {
+    barLabel: string;
+    opacityChangeOnHover?: string;
+}
+
 // @public (undocumented)
 export interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {
     x: number | string | Date;
@@ -1077,6 +1120,7 @@ export interface VerticalStackedChartProps {
 export interface VSChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
     color?: string;
+    culture?: string;
     data: number;
     legend: string;
     xAxisCalloutData?: string;

packages/charts/react-charts/library/src/VerticalStackedBarChart.ts

@@ -0,0 +1 @@
+export * from './components/VerticalStackedBarChart/index';

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -539,11 +539,22 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
    */
   children(props: ChildProps): React.ReactNode;
 
+  /**
+   * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.
+   * @default false
+   * @type \{boolean \}
+   */
+  isCalloutForStack?: boolean;
+
   /** dataset values to find out domain of the String axis
    * Present using for only vertical stacked bar chart and grouped vertical bar chart
    */
   datasetForXAxisDomain?: string[];
 
+  /** Own callout design */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customizedCallout?: any;
+
   /**
    * if the data points for the y-axis is of type string, then we need to give this
    * prop to construct the y-axis