Add custom date time formatter for date axis

change/@fluentui-react-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json

@@ -0,0 +1,10 @@
+{
+  "type": "patch",
+  "comment": {
+    "title": "",
+    "value": ""
+  },
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/README.md

@@ -99,11 +99,15 @@ The charting components are built using following building blocks.
 
   - Axis localization
     The axes support 2 ways of localization.
+
     1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer the [javascript localization guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) for usage.
     2. Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 (like [this](https://github.com/d3/d3-time-format/blob/main/locale/en-US.json)). The date axis will use the date range and the multiformat specified in the definition to determine the correct format to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the axis will show months in tick labels and so on.
        Specify the custom locale definition in the timeFormatLocale prop.
        Refer to the Custom Locale Date Axis example in line chart for sample usage.
 
+  - Date axis formatting
+    The date axis can be custom formatted using the customDateTimeFormatter prop.
+
 - Event annotations (Available in line charts).
 
   - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example.

packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -144,6 +144,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       culture,
       dateLocalizeOptions,
       timeFormatLocale,
+      customDateTimeFormatter,
     } = this.props;
     if (this.props.parentRef) {
       this._fitParentContainer();
@@ -198,7 +199,14 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
         xScale = createNumericXAxis(XAxisParams, culture);
         break;
       case XAxisTypes.DateAxis:
-        xScale = createDateXAxis(XAxisParams, this.props.tickParams!, culture, dateLocalizeOptions, timeFormatLocale);
+        xScale = createDateXAxis(
+          XAxisParams,
+          this.props.tickParams!,
+          culture,
+          dateLocalizeOptions,
+          timeFormatLocale,
+          customDateTimeFormatter,
+        );
         break;
       case XAxisTypes.StringAxis:
         xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this.props.datasetForXAxisDomain!, culture);

packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -334,6 +334,11 @@ export interface ICartesianChartProps {
    */
   timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
 
+  /**
+   * The prop used to define a custom datetime formatter for date axis.
+   */
+  customDateTimeFormatter?: (dateTime: Date) => string;
+
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
    */

packages/react-charting/src/utilities/utilities.ts

@@ -200,14 +200,18 @@ export function createDateXAxis(
   culture?: string,
   options?: Intl.DateTimeFormatOptions,
   timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition,
+  customDateTimeFormatter?: (dateTime: Date) => string,
 ) {
   const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount = 6 } = xAxisParams;
   const xAxisScale = d3ScaleTime()
     .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
     .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
   const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(xAxisCount);
-
-  if (culture && options) {
+  if (customDateTimeFormatter) {
+    xAxis.tickFormat((domainValue: Date, _index: number) => {
+      return customDateTimeFormatter(domainValue);
+    });
+  } else if (culture && options) {
     xAxis.tickFormat((domainValue: Date, _index: number) => {
       return domainValue.toLocaleString(culture, options);
     });