@fluentui/react-charts 9.1.9 → 9.1.10

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Thu, 17 Jul 2025 13:45:52 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.10)
+
+Mon, 28 Jul 2025 18:44:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.9..@fluentui/react-charts_v9.1.10)
+
+### Patches
+
+- fix callout position issues ([PR #34868](https://github.com/microsoft/fluentui/pull/34868) by anushgupta@microsoft.com)
+- mitigate xss vulnerabilities ([PR #34920](https://github.com/microsoft/fluentui/pull/34920) by anushgupta@microsoft.com)
+- Add Gantt chart in v9 ([PR #34909](https://github.com/microsoft/fluentui/pull/34909) by anushgupta@microsoft.com)
+- funnel chart in v9 ([PR #34866](https://github.com/microsoft/fluentui/pull/34866) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-overflow to v9.5.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-popover to v9.12.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
 ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.9)
 
-Thu, 17 Jul 2025 13:45:52 GMT 
+Thu, 17 Jul 2025 13:49:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.8..@fluentui/react-charts_v9.1.9)
 
 ### Patches

package/dist/index.d.ts

@@ -107,6 +107,25 @@ export declare interface AreaChartStyleProps extends CartesianChartStyleProps {
 export declare interface AreaChartStyles extends CartesianChartStyles {
 }
 
+/**
+ * Specifies the ordering options for axis categories in Cartesian charts.
+ *
+ * - `'default'`: Uses the original order before custom ordering was supported.
+ *   In some charts, this behaves the same as `'data'`.
+ * - `'data'`: Preserves the order of categories as provided in the input data.
+ * - `string[]`: Explicitly defines the custom order of categories as an array of category names.
+ * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.
+ * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.
+ * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.
+ * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.
+ * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').
+ * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.
+ * - `'median ascending' | 'median descending'`: Orders by the median value of each category.
+ *
+ * {@docCategory CartesianChart}
+ */
+export declare type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascending' | 'category descending' | 'total ascending' | 'total descending' | 'min ascending' | 'min descending' | 'max ascending' | 'max descending' | 'sum ascending' | 'sum descending' | 'mean ascending' | 'mean descending' | 'median ascending' | 'median descending';
+
 /**
  * {@docCategory ChartData}
  */
@@ -405,6 +424,28 @@ export declare interface CartesianChartProps {
      * the public methods and properties of the component.
      */
     componentRef?: React_2.RefObject<Chart>;
+    /**
+     * Prop to set the x axis annotation. Used to display additional information on the x-axis.
+     * This is shown on the top of the chart.
+     * @default undefined
+     */
+    xAxisAnnotation?: string;
+    /**
+     * Prop to set the y axis annotation. Used to display additional information on the y-axis.
+     * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.
+     * @default undefined
+     */
+    yAxisAnnotation?: string;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the x-axis.
+     * @default 'default'
+     */
+    xAxisCategoryOrder?: AxisCategoryOrder;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the y-axis.
+     * @default 'default'
+     */
+    yAxisCategoryOrder?: AxisCategoryOrder;
 }
 
 /**
@@ -564,7 +605,7 @@ export declare interface ChartDataPoint {
     placeHolder?: boolean;
     /**
      * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * This is an optional prop, If haven't given legend will take
      */
     xAxisCalloutData?: string;
     /**
@@ -656,7 +697,8 @@ declare enum ChartTypes {
     GroupedVerticalBarChart = 4,
     HeatMapChart = 5,
     HorizontalBarChartWithAxis = 6,
-    ScatterChart = 7
+    ScatterChart = 7,
+    GanttChart = 8
 }
 
 export declare interface ChildProps {
@@ -967,6 +1009,261 @@ export declare interface ExtendedSegment extends GaugeChartSegment {
     end: number;
 }
 
+export declare const FunnelChart: React_2.FunctionComponent<FunnelChartProps>;
+
+/**
+ * Data point for funnel chart
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartDataPoint {
+    /**
+     * Stage name or identifier
+     */
+    stage: string | number;
+    /**
+     * Sub-values for stacked funnel charts
+     * Each sub-value represents a category within the stage
+     */
+    subValues?: Array<{
+        category: string;
+        value: number;
+        color: string;
+    }>;
+    /**
+     * Value for the stage (used for non-stacked funnel charts)
+     */
+    value?: number;
+    /**
+     * Color for the stage (used for non-stacked funnel charts)
+     */
+    color?: string;
+}
+
+/**
+ * Funnel Chart component props
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartProps {
+    /**
+     * Data points for the funnel chart
+     */
+    data: FunnelChartDataPoint[];
+    /**
+     * Title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+    /**
+     * Decides whether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    /**
+     * Props for the legends in the chart
+     */
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: ChartPopoverProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: FunnelChartStyles;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Reference to the chart component
+     */
+    componentRef?: React_2.RefObject<any>;
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Orientation of the funnel chart
+     * @defaultvalue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * Funnel Chart style properties
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartStyleProps {
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Width of the chart
+     */
+    chartWidth: number;
+    /**
+     * Height of the chart
+     */
+    chartHeight: number;
+}
+
+/**
+ * Funnel Chart styles
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: string;
+    /**
+     * Styles for the chart
+     */
+    chart?: string;
+    /**
+     * Styles for text elements
+     */
+    text?: string;
+    /**
+     * Styles for the callout root element
+     */
+    calloutContentRoot?: string;
+}
+
+export declare const GanttChart: React_2.FunctionComponent<GanttChartProps>;
+
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface GanttChartDataPoint {
+    /**
+     * Dependent value of the data point, rendered along the x-axis.
+     */
+    x: {
+        start: Date | number;
+        end: Date | number;
+    };
+    /**
+     * Independent value of the data point, rendered along the y-axis.
+     * If y is a number, then each y-coordinate is plotted at its y-coordinate.
+     * If y is a string, then the data is evenly spaced along the y-axis.
+     */
+    y: number | string;
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend?: string;
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven't given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * Gantt Chart properties
+ * {@docCategory GanttChart}
+ */
+export declare interface GanttChartProps extends CartesianChartProps {
+    /**
+     * An array of data points to be rendered in the chart.
+     */
+    data?: GanttChartDataPoint[];
+    /**
+     * Callback function to render a custom callout for each data point.
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<GanttChartDataPoint>;
+    /**
+     * Height of each bar, in pixels.
+     */
+    barHeight?: number;
+    /**
+     * Title of the chart.
+     */
+    chartTitle?: string;
+    /**
+     * Locale identifier string used to format numbers and dates according to the specified culture.
+     * Example: 'en-US', 'fr-FR'.
+     */
+    culture?: string;
+    /**
+     * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).
+     * Takes a number in the range [0, 1].
+     * @default 1/2
+     */
+    yAxisPadding?: number;
+    /**
+     * If true, truncates y-axis tick labels longer than `noOfCharsToTruncate` with ellipses
+     * and displays them in a tooltip on hover.
+     * @default false
+     */
+    showYAxisLablesTooltip?: boolean;
+    /**
+     * If true, renders full y-axis tick labels without truncation.
+     * @default false
+     */
+    showYAxisLables?: boolean;
+    /**
+     * If true, enables gradient fills for the bars.
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * If true, applies rounded corners to the bars.
+     * @default false
+     */
+    roundCorners?: boolean;
+    /**
+     * Maximum height of each bar, in pixels.
+     * @default 24
+     */
+    maxBarHeight?: number;
+}
+
+/**
+ * Gantt Chart style properties
+ * {@docCategory GanttChart}
+ */
+export declare interface GanttChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Gantt Chart styles
+ * {@docCategory GanttChart}
+ */
+export declare interface GanttChartStyles extends CartesianChartStyles {
+}
+
 export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
 /**
@@ -1192,6 +1489,10 @@ export declare const getColorContrast: (c1: string, c2: string) => number;
 
 export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
 
+export declare function getContrastTextColor(backgroundColor: string, isDarkTheme?: boolean): string;
+
+export declare const getInvertedTextColor: (color: string, isDarkTheme?: boolean) => string;
+
 export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
 
 export declare const getSegmentLabel: (segment: ExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;
@@ -1338,7 +1639,7 @@ export declare interface GVBarChartSeriesPoint {
     legend: string;
     /**
      * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * This is an optional prop, If haven't given legend will take
      */
     xAxisCalloutData?: string;
     /**
@@ -1736,7 +2037,7 @@ export declare interface HorizontalBarChartWithAxisDataPoint {
     color?: string;
     /**
      * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * This is an optional prop, If haven't given legend will take
      */
     xAxisCalloutData?: string;
     /**
@@ -2578,7 +2879,7 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Get the min and max values of the y-axis
      */
-    getMinMaxOfYAxis: (points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[] | ScatterChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+    getMinMaxOfYAxis: (points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[] | ScatterChartDataPoint[] | GanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };
@@ -2589,7 +2890,7 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Get the domain and range values
      */
-    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
+    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[] | GanttChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     /**
      * Create the string y-axis
      */
@@ -3113,7 +3414,7 @@ export declare interface VerticalBarChartDataPoint {
     color?: string;
     /**
      * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * This is an optional prop, If haven't given legend will take
      */
     xAxisCalloutData?: string;
     /**
@@ -3460,7 +3761,7 @@ export declare interface VSChartDataPoint {
     color?: string;
     /**
      * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * This is an optional prop, If haven't given legend will take
      */
     xAxisCalloutData?: string;
     /**

package/lib/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AreaChart.ts"],"sourcesContent":["export * from './components/AreaChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["AreaChart.ts"],"sourcesContent":["export * from './components/AreaChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/CartesianChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CartesianChart.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["CartesianChart.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DeclarativeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DeclarativeChart.ts"],"sourcesContent":["export * from './components/DeclarativeChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["DeclarativeChart.ts"],"sourcesContent":["export * from './components/DeclarativeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DonutChart.ts"],"sourcesContent":["export * from './components/DonutChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,gCAAgC"}
+{"version":3,"sources":["DonutChart.ts"],"sourcesContent":["export * from './components/DonutChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/FunnelChart.js

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

package/lib/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FunnelChart.ts"],"sourcesContent":["export * from './components/FunnelChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/GanttChart.js

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

package/lib/GanttChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GanttChart.ts"],"sourcesContent":["export * from './components/GanttChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GaugeChart.ts"],"sourcesContent":["export * from './components/GaugeChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,gCAAgC"}
+{"version":3,"sources":["GaugeChart.ts"],"sourcesContent":["export * from './components/GaugeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/GroupedVerticalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GroupedVerticalBarChart.ts"],"sourcesContent":["export * from './components/GroupedVerticalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6CAA6C"}
+{"version":3,"sources":["GroupedVerticalBarChart.ts"],"sourcesContent":["export * from './components/GroupedVerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/HeatMapChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HeatMapChart.ts"],"sourcesContent":["export * from './components/HeatMapChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,kCAAkC"}
+{"version":3,"sources":["HeatMapChart.ts"],"sourcesContent":["export * from './components/HeatMapChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/HorizontalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HorizontalBarChart.ts"],"sourcesContent":["export * from './components/HorizontalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,wCAAwC"}
+{"version":3,"sources":["HorizontalBarChart.ts"],"sourcesContent":["export * from './components/HorizontalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,wCAAwC"}

package/lib/HorizontalBarChartWithAxis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HorizontalBarChartWithAxis.ts"],"sourcesContent":["export * from './components/HorizontalBarChartWithAxis/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,gDAAgD"}
+{"version":3,"sources":["HorizontalBarChartWithAxis.ts"],"sourcesContent":["export * from './components/HorizontalBarChartWithAxis/index';\n"],"names":[],"mappings":"AAAA,cAAc,gDAAgD"}

package/lib/Legends.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Legends.ts"],"sourcesContent":["export * from './components/Legends/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}
+{"version":3,"sources":["Legends.ts"],"sourcesContent":["export * from './components/Legends/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}

package/lib/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LineChart.ts"],"sourcesContent":["export * from './components/LineChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["LineChart.ts"],"sourcesContent":["export * from './components/LineChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Popover.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["Popover.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.ts"],"sourcesContent":["export * from './components/ResponsiveContainer/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,yCAAyC"}
+{"version":3,"sources":["ResponsiveContainer.ts"],"sourcesContent":["export * from './components/ResponsiveContainer/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}

package/lib/SankeyChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SankeyChart.ts"],"sourcesContent":["export * from './components/SankeyChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["SankeyChart.ts"],"sourcesContent":["export * from './components/SankeyChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/ScatterChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScatterChart.ts"],"sourcesContent":["export * from './components/ScatterChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,kCAAkC"}
+{"version":3,"sources":["ScatterChart.ts"],"sourcesContent":["export * from './components/ScatterChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sparkline.ts"],"sourcesContent":["export * from './components/Sparkline/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["Sparkline.ts"],"sourcesContent":["export * from './components/Sparkline/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/VerticalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VerticalBarChart.ts"],"sourcesContent":["export * from './components/VerticalBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["VerticalBarChart.ts"],"sourcesContent":["export * from './components/VerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/VerticalStackedBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VerticalStackedBarChart.ts"],"sourcesContent":["export * from './components/VerticalStackedBarChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6CAA6C"}
+{"version":3,"sources":["VerticalStackedBarChart.ts"],"sourcesContent":["export * from './components/VerticalStackedBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/components/AreaChart/AreaChart.js

@@ -11,11 +11,11 @@ import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d)=>d.x).left;
-var InterceptVisibility;
-(function(InterceptVisibility) {
+var InterceptVisibility = /*#__PURE__*/ function(InterceptVisibility) {
     InterceptVisibility["show"] = "visibility";
     InterceptVisibility["hide"] = "hidden";
-})(InterceptVisibility || (InterceptVisibility = {}));
+    return InterceptVisibility;
+}(InterceptVisibility || {});
 //by default d3-shape 3.2.0 limits the< path> data point precision to 3 digits(d3/d3-path#10)
 export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _props_legendProps;
@@ -503,6 +503,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                 opacity: layerOpacity,
                 fillOpacity: _getOpacity(points[index].legend),
                 onMouseMove: (event)=>_onRectMouseMove(event),
+                onFocus: (event)=>_handleFocus(event, index, 0, `${_circleId}_${index}`),
                 onMouseOut: _onRectMouseOut,
                 onMouseOver: (event)=>_onRectMouseMove(event)
             }) : /*#__PURE__*/ React.createElement("path", {
@@ -552,7 +553,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                         onMouseOut: _onRectMouseOut,
                         onMouseOver: (event)=>_onRectMouseMove(event),
                         onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
-                        onFocus: ()=>_handleFocus(index, pointIndex, circleId),
+                        onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
                         onBlur: _handleBlur,
                         ...getSecureProps(pointOptions),
                         r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend),
@@ -578,6 +579,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                             fill: _updateCircleFillColor(xDataPoint, lineColor, circleId),
                             onMouseOut: _onRectMouseOut,
                             onMouseOver: (event)=>_onRectMouseMove(event),
+                            onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
                             onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
                             ...getSecureProps(pointOptions),
                             r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend)
@@ -671,7 +673,13 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             };
         }) : [];
     }
-    function _handleFocus(lineIndex, pointIndex, circleId) {
+    function _handleFocus(event, lineIndex, pointIndex, circleId) {
+        let cx = 0;
+        let cy = 0;
+        const targetRect = event.target.getBoundingClientRect();
+        cx = targetRect.left + targetRect.width / 2;
+        cy = targetRect.top + targetRect.height / 2;
+        _updatePosition(cx, cy);
         const { x, y, xAxisCalloutData } = props.data.lineChartData[lineIndex].data[pointIndex];
         const formattedDate = x instanceof Date ? formatDate(x, props.useUTC) : x;
         const modifiedXVal = x instanceof Date ? x.getTime() : x;