@fluentui/react-charts 9.2.3 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,81 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Thu, 21 Aug 2025 12:20:32 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.0)
+
+Thu, 02 Oct 2025 15:07:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.4..@fluentui/react-charts_v9.3.0)
+
+### Minor changes
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-button to v9.6.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-overflow to v9.6.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-popover to v9.12.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+### Patches
+
+- fix v9 chart bugs ([PR #35181](https://github.com/microsoft/fluentui/pull/35181) by anushgupta@microsoft.com)
+- fix v9 bugs ([PR #35188](https://github.com/microsoft/fluentui/pull/35188) by anushgupta@microsoft.com)
+- fix chart bugs ([PR #35219](https://github.com/microsoft/fluentui/pull/35219) by anushgupta@microsoft.com)
+- fix date format and multi selection of legends in donut chart ([PR #35163](https://github.com/microsoft/fluentui/pull/35163) by anushgupta@microsoft.com)
+- simple bug fixes ([PR #35201](https://github.com/microsoft/fluentui/pull/35201) by 132879294+v-baambati@users.noreply.github.com)
+- fix styling in chart table ([PR #35156](https://github.com/microsoft/fluentui/pull/35156) by anushgupta@microsoft.com)
+- remove default culture in v9 charts ([PR #35175](https://github.com/microsoft/fluentui/pull/35175) by anushgupta@microsoft.com)
+- fix chart table bugs in v9 ([PR #35171](https://github.com/microsoft/fluentui/pull/35171) by anushgupta@microsoft.com)
+- handled negative sign in RTL mode ([PR #35143](https://github.com/microsoft/fluentui/pull/35143) by anushgupta@microsoft.com)
+- fix dashed line bug in line chart ([PR #35183](https://github.com/microsoft/fluentui/pull/35183) by anushgupta@microsoft.com)
+
+## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.4)
+
+Mon, 08 Sep 2025 12:51:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.3..@fluentui/react-charts_v9.2.4)
+
+### Patches
+
+- add support for tickmode in declarative chart ([PR #35121](https://github.com/microsoft/fluentui/pull/35121) by anushgupta@microsoft.com)
+- fix svg background alignment issue ([PR #35070](https://github.com/microsoft/fluentui/pull/35070) by anushgupta@microsoft.com)
+- fix a11y bugs ([PR #35127](https://github.com/microsoft/fluentui/pull/35127) by anushgupta@microsoft.com)
+- refactor common styles to reduce bundle size ([PR #35081](https://github.com/microsoft/fluentui/pull/35081) by anushgupta@microsoft.com)
+- add support for declarative multiplot chart - non cartesian ([PR #35069](https://github.com/microsoft/fluentui/pull/35069) by anushgupta@microsoft.com)
+- reduce component size by removing duplicate code ([PR #35094](https://github.com/microsoft/fluentui/pull/35094) by anushgupta@microsoft.com)
+- change foreground color based on contrast ratio in chart table ([PR #35101](https://github.com/microsoft/fluentui/pull/35101) by anushgupta@microsoft.com)
+- handling y object values for bar chart ([PR #35115](https://github.com/microsoft/fluentui/pull/35115) by anushgupta@microsoft.com)
+- fix text mode for scatter polar ([PR #35104](https://github.com/microsoft/fluentui/pull/35104) by anushgupta@microsoft.com)
+- update segment colors of donut chart ([PR #35122](https://github.com/microsoft/fluentui/pull/35122) by anushgupta@microsoft.com)
+- fix: resolve R19 type issues on refs ([PR #35144](https://github.com/microsoft/fluentui/pull/35144) by martinhochel@microsoft.com)
+- add support for marker texts for modes containing text ([PR #35083](https://github.com/microsoft/fluentui/pull/35083) by anushgupta@microsoft.com)
+- fix v9 charts bugs ([PR #35132](https://github.com/microsoft/fluentui/pull/35132) by anushgupta@microsoft.com)
+- align labels and points according to given directions and rotation in schema for scatter polar ([PR #35098](https://github.com/microsoft/fluentui/pull/35098) by anushgupta@microsoft.com)
+- Add Gantt and Funnel chart in declarative charts ([PR #35123](https://github.com/microsoft/fluentui/pull/35123) by anushgupta@microsoft.com)
+- support string y axis in scatter chart ([PR #35120](https://github.com/microsoft/fluentui/pull/35120) by anushgupta@microsoft.com)
+- respect bargap and width properties in plotly bar traces ([PR #35097](https://github.com/microsoft/fluentui/pull/35097) by anushgupta@microsoft.com)
+- support categorical theta values for scatter polar chart ([PR #35092](https://github.com/microsoft/fluentui/pull/35092) by anushgupta@microsoft.com)
+- support single value callout in linechart ([PR #35084](https://github.com/microsoft/fluentui/pull/35084) by anushgupta@microsoft.com)
+- support additional modes ([PR #35096](https://github.com/microsoft/fluentui/pull/35096) by anushgupta@microsoft.com)
+- support tick formatting from plotly output ([PR #35060](https://github.com/microsoft/fluentui/pull/35060) by anushgupta@microsoft.com)
+- log axis support in linechart and scatter chart ([PR #35112](https://github.com/microsoft/fluentui/pull/35112) by anushgupta@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-button to v9.6.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-overflow to v9.5.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-popover to v9.12.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.3)
 
-Thu, 21 Aug 2025 12:20:32 GMT 
+Thu, 21 Aug 2025 12:25:29 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v9.2.3)
 
 ### Patches
@@ -28,14 +97,14 @@ Thu, 21 Aug 2025 12:20:32 GMT
 - support for lines+markers ([PR #34997](https://github.com/microsoft/fluentui/pull/34997) by anushgupta@microsoft.com)
 - use schema colorscale for gvbc ([PR #35011](https://github.com/microsoft/fluentui/pull/35011) by anushgupta@microsoft.com)
 - add support for string y axis in VSBC ([PR #35016](https://github.com/microsoft/fluentui/pull/35016) by anushgupta@microsoft.com)
-- Bump @fluentui/react-button to v9.6.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-overflow to v9.5.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-popover to v9.12.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tooltip to v9.8.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-button to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-overflow to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-popover to v9.12.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
 

package/dist/index.d.ts

@@ -125,6 +125,54 @@ export declare interface AreaChartStyles extends CartesianChartStyles {
  */
 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';
 
+/**
+ * Configuration options for an axis.
+ *
+ * {@docCategory CartesianChart}
+ */
+export declare type AxisProps = {
+    /**
+     * Defines the step between tick marks on the axis.
+     * Works in combination with `tick0`.
+     * Must be a positive number.
+     *
+     * - **Log scale**:
+     *   - Ticks are placed at `10^(n * tickStep)` where `n` is the tick index.
+     *     - Example: `tickStep = 2` → ticks at 1, 100, 10,000...
+     *     - Example: `tickStep = log10(5)` → ticks at 1, 5, 25, 125...
+     *   - Special format `"L<f>"`: Creates ticks that are linearly spaced in value (not position).
+     *     - Example: `tick0 = 0.1`, `tickStep = "L0.5"` → ticks at 0.1, 0.6, 1.1, 1.6...
+     *
+     * - **Date axis**:
+     *   - Must be in milliseconds.
+     *     - Example: one day = `tickStep = 86400000`.
+     *   - Special format `"M<n>"`: Places ticks every `n` months.
+     *     - Example: `tick0 = "2000-01-15"`, `tickStep = "M3"` → ticks on the 15th every third month.
+     *     - Example: `tickStep = "M48"` → ticks every 4 years.
+     */
+    tickStep?: number | string;
+    /**
+     * Sets the reference value for axis ticks.
+     * Works in combination with `tickStep`.
+     *
+     * - **Log scale**:
+     *   - `tick0` must be given as the logarithm of the reference tick.
+     *     - Example: to align ticks with 100, use `tick0 = 2`.
+     *   - Exception: when `tickStep` uses `"L<f>"`, you can specify the raw value directly.
+     */
+    tick0?: number | Date;
+};
+
+/**
+ * Available scale types for axes.
+ *
+ * - `'default'`: Uses an automatic scale (linear, band, or time) based on axis data type.
+ * - `'log'`: Uses a logarithmic scale. Only supported for numeric axes in LineChart and ScatterChart.
+ *
+ * {@docCategory CartesianChart}
+ */
+export declare type AxisScaleType = 'default' | 'log';
+
 /**
  * {@docCategory ChartData}
  */
@@ -449,6 +497,36 @@ export declare interface CartesianChartProps {
      * @default 'default'
      */
     yAxisCategoryOrder?: AxisCategoryOrder;
+    /**
+     * Defines the scale type for the x-axis.
+     * @default 'default'
+     */
+    xScaleType?: AxisScaleType;
+    /**
+     * Defines the scale type for the primary y-axis.
+     * @default 'default'
+     */
+    yScaleType?: AxisScaleType;
+    /**
+     * Defines the scale type for the secondary y-axis.
+     * @default 'default'
+     */
+    secondaryYScaleType?: AxisScaleType;
+    /**
+     * Explicit set of tick values for the y-axis.
+     * If provided, these values override automatic tick generation.
+     */
+    yAxisTickValues?: number[] | Date[] | string[];
+    /**
+     * Configuration for the x-axis.
+     * Use this to control `tickStep`, `tick0`, etc.
+     */
+    xAxis?: AxisProps;
+    /**
+     * Configuration for the y-axis.
+     * Use this to control `tickStep`, `tick0`, etc.
+     */
+    yAxis?: AxisProps;
 }
 
 /**
@@ -922,7 +1000,7 @@ export declare interface DeclarativeChartProps extends React_2.RefAttributes<HTM
      * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React_2.RefObject<IDeclarativeChart>;
+    componentRef?: React_2.RefObject<IDeclarativeChart | null>;
     /**
      * Optional prop to specify the colorway type of the chart.
      * - 'default': Use Fluent UI color palette aligning with plotly colorway.
@@ -943,7 +1021,7 @@ export declare const DonutChart: React_2.FunctionComponent<DonutChartProps>;
  * Donut Chart properties.
  * {@docCategory DonutChart}
  */
-export declare interface DonutChartProps {
+export declare interface DonutChartProps extends CartesianChartProps {
     /**
      * Data to render in the chart.
      */
@@ -1057,6 +1135,10 @@ export declare interface DonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: string;
+    /**
+     * styles for axis annotation
+     */
+    axisAnnotation?: string;
     /**
      * Styles for the chart wrapper div
      */
@@ -2335,7 +2417,7 @@ declare interface IMargins {
     bottom?: number;
 }
 
-declare interface IYAxisParams {
+declare interface IYAxisParams extends AxisProps {
     yMinMaxValues?: {
         startValue: number;
         endValue: number;
@@ -2353,6 +2435,7 @@ declare interface IYAxisParams {
     eventAnnotationProps?: EventsAnnotationProps;
     eventLabelHeight?: number;
     yAxisPadding?: number;
+    tickValues?: Date[] | number[] | string[];
 }
 
 /**
@@ -2798,6 +2881,12 @@ export declare interface LineChartProps extends CartesianChartProps {
      * The prop used to enable the perf optimization
      */
     enablePerfOptimization?: boolean;
+    /**
+     * To enable callout for individual line or complete stack.
+     * @default true
+     * @type \{boolean \}
+     */
+    isCalloutForStack?: boolean;
 }
 
 /**
@@ -3011,14 +3100,14 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Get the min and max values of the y-axis
      */
-    getMinMaxOfYAxis: (points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[] | ScatterChartDataPoint[] | GanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+    getMinMaxOfYAxis: (points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[] | ScatterChartPoints[] | GanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };
     /**
      * Create the y-axis
      */
-    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, chartType: ChartTypes, useSecondaryYScale?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType, _useRtl?: boolean) => ScaleLinear<number, number, never>;
     /**
      * Get the domain and range values
      */
@@ -3418,6 +3507,10 @@ export declare interface ScatterChartProps extends CartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * The prop used to define the y axis labels tooltip visibility
+     */
+    showYAxisLablesTooltip?: boolean;
 }
 
 /**

package/lib/components/AreaChart/AreaChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useAreaChartStyles } from './useAreaChartStyles.styles';
 import { max as d3Max, bisector } from 'd3-array';
@@ -6,10 +7,11 @@ import { select as d3Select } from 'd3-selection';
 import { tokens } from '@fluentui/react-theme';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import { CartesianChart } from '../../index';
-import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, formatDate, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaChart, domainRangeOfDateForAreaLineVerticalBarChart, createStringYAxis, useRtl } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d)=>d.x).left;
 var InterceptVisibility = /*#__PURE__*/ function(InterceptVisibility) {
@@ -97,9 +99,9 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
+            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL);
         } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth);
         } else {
             domainNRangeValue = {
                 dStartValue: 0,
@@ -158,7 +160,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         }
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { xAxisCalloutData, xAxisCalloutAccessibilityData } = lineChartData[0].data[index];
-        const formattedDate = pointToHighlight instanceof Date ? formatDate(pointToHighlight, props.useUTC) : pointToHighlight;
+        const formattedDate = pointToHighlight instanceof Date ? formatDateToLocaleString(pointToHighlight, props.culture, props.useUTC) : pointToHighlight;
         const modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const found = find(_calloutPoints, (element)=>{
@@ -692,7 +694,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         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 formattedDate = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
         const modifiedXVal = x instanceof Date ? x.getTime() : x;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const found = _calloutPoints.find((e)=>e.x === modifiedXVal);
@@ -728,7 +730,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         var _point_callOutAccessibilityData;
         const line = props.data.lineChartData[lineIndex];
         const point = line.data[pointIndex];
-        const formattedDate = point.x instanceof Date ? formatDate(point.x, props.useUTC) : point.x;
+        const formattedDate = point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC) : point.x;
         const xValue = point.xAxisCalloutData || formattedDate;
         const legend = line.legend;
         const yValue = point.yAxisCalloutData || point.y;