feat(react-charts-preview): Migrate VSBC to V9

change/@fluentui-react-charts-preview-b4f46ccd-fbfd-4cb7-9830-aafb5463b06f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "migrate VerticalStacked bar chart to V9",
+  "packageName": "@fluentui/react-charts-preview",
+  "email": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -196,8 +196,14 @@ export interface ChartPopoverProps {
     // (undocumented)
     descriptionMessage?: string;
     // (undocumented)
+    gapSpace?: number;
+    // (undocumented)
     hoverXValue?: string | number;
     // (undocumented)
+    id?: string;
+    // (undocumented)
+    isBeakVisible?: boolean;
+    // (undocumented)
     isCalloutForStack?: boolean;
     // (undocumented)
     isCartesian?: boolean;
@@ -206,8 +212,14 @@ export interface ChartPopoverProps {
     // (undocumented)
     legend?: string | number | Date;
     // (undocumented)
+    onDismiss?: () => void;
+    // (undocumented)
+    preventDismissOnLostFocus?: boolean;
+    // (undocumented)
     ratio?: [number, number];
     // (undocumented)
+    target?: SVGGElement;
+    // (undocumented)
     xAxisCalloutAccessibilityData?: {
         ariaLabel?: string;
         data?: string;
@@ -545,6 +557,8 @@ export interface LegendsProps {
     onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
     overflowStyles?: React_2.CSSProperties;
     overflowText?: string;
+    selectedLegend?: string;
+    selectedLegends?: string[];
     shape?: LegendShape;
     styles?: LegendsStyles;
 }
@@ -675,6 +689,7 @@ export interface LineDataInVerticalStackedBarChart {
     data?: number;
     // (undocumented)
     legend: string;
+    lineOptions?: LineChartLineOptions;
     useSecondaryYScale?: boolean;
     // (undocumented)
     y: number;
@@ -698,13 +713,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;
@@ -865,6 +882,48 @@ export interface VerticalBarChartStyles extends CartesianChartStyles {
     yAxisTicks?: 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;
+    // @deprecated
+    colors?: 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;
@@ -883,6 +942,7 @@ export interface VerticalStackedChartProps {
 export interface VSChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
     color?: string;
+    culture?: string;
     data: number;
     legend: string;
     xAxisCalloutData?: string;

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

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

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

@@ -546,11 +546,22 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
    */
   children(props: ChildProps): React.ReactNode;
 
+  /**
+   * To enable callout for individualbar 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

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

@@ -21,6 +21,12 @@ export interface ChartPopoverProps {
   descriptionMessage?: string;
   ratio?: [number, number];
   isCartesian?: boolean;
+  id?: string;
+  target?: SVGGElement;
+  isBeakVisible?: boolean;
+  gapSpace?: number;
+  onDismiss?: () => void;
+  preventDismissOnLostFocus?: boolean;
 }
 
 export interface PopoverComponentStyles {

packages/charts/react-charts-preview/library/src/components/Legends/Legends.types.ts

@@ -191,6 +191,32 @@ export interface LegendsProps {
    */
   defaultSelectedLegend?: string;
 
+  /**
+   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+   * true. For single-select, use selectedLegend.
+   *
+   * When this prop is provided, the component is controlled and does not automatically update the selection based on
+   * user interactions; the parent component must update the value passed to this property by handling the onChange
+   * event.
+   *
+   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+   */
+  selectedLegends?: string[];
+
+  /**
+   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+   * false or unspecified. For multi-select, use selectedLegends.
+   *
+   * When this prop is provided, the component is controlled and does not automatically update the selection based on
+   * user interactions; the parent component must update the value passed to this property by handling the onChange
+   * event.
+   *
+   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+   */
+  selectedLegend?: string;
+
   /**
    * The shape for the legend.
    */