From 88b72d4dbd5324f9325fd76a721e80c2924e93bd Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 13:55:34 +0530
Subject: [PATCH 01/12] Add support for custom locale for date axis

---
 packages/react-charting/package.json          |   2 +
 .../CommonComponents/CartesianChart.base.tsx  |   4 +-
 .../CommonComponents/CartesianChart.types.ts  |   6 +
 .../react-charting/src/utilities/utilities.ts |  35 +++
 packages/react-examples/package.json          |   4 +-
 ...LineChart.CustomLocaleDateAxis.Example.tsx | 209 ++++++++++++++++++
 .../LineChart/LineChartPage.tsx               |   7 +
 yarn.lock                                     |  74 ++++++-
 8 files changed, 334 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx

diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 659b4c90b2f05..077ba5ae56b4e 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -45,6 +45,7 @@
     "@types/d3-selection": "1.4.1",
     "@types/d3-shape": "^1.2.3",
     "@types/d3-time-format": "^2.1.0",
+    "@types/d3-time": "^3.0.0",
     "@fluentui/set-version": "^8.2.2",
     "d3-array": "1.2.1",
     "d3-axis": "1.0.8",
@@ -55,6 +56,7 @@
     "d3-selection": "1.3.0",
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.1.3",
+    "d3-time": "^3.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index 54b395289f658..2fdf45eee5b52 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -30,6 +30,7 @@ import {
   pointTypes,
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
+import * as d3TimeFormat from 'd3-time-format';
 
 const getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianChartStyles>();
 
@@ -143,6 +144,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       svgProps,
       culture,
       dateLocalizeOptions,
+      timeFormatLocale,
     } = this.props;
     if (this.props.parentRef) {
       this._fitParentContainer();
@@ -197,7 +199,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
         xScale = createNumericXAxis(XAxisParams, culture);
         break;
       case XAxisTypes.DateAxis:
-        xScale = createDateXAxis(XAxisParams, this.props.tickParams!, culture, dateLocalizeOptions);
+        xScale = createDateXAxis(XAxisParams, this.props.tickParams!, culture, dateLocalizeOptions, timeFormatLocale);
         break;
       case XAxisTypes.StringAxis:
         xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this.props.datasetForXAxisDomain!, culture);
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
index b34e4e5d3c2b8..8d05412a8cfa5 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -7,6 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps, IMargins } from '../../types/index';
 import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
+import * as d3TimeFormat from 'd3-time-format';
 
 export interface ICartesianChartStyleProps {
   /**
@@ -328,6 +329,11 @@ export interface ICartesianChartProps {
    */
   dateLocalizeOptions?: Intl.DateTimeFormatOptions;
 
+  /**
+   * The prop used to define a custom locale for the date time format.
+   */
+  timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
+
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
    */
diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index e46db7ed85b09..c087906e4b1ec 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -4,6 +4,7 @@ import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime, scaleBand as d3
 import { select as d3Select, event as d3Event, selectAll as d3SelectAll } from 'd3-selection';
 import { format as d3Format } from 'd3-format';
 import * as d3TimeFormat from 'd3-time-format';
+import * as d3Time from 'd3-time';
 import {
   IAccessibilityProps,
   IEventsAnnotationProps,
@@ -152,6 +153,33 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, culture?: string)
   return xAxisScale;
 }
 
+function multiFormat(date: Date, locale: d3TimeFormat.TimeLocaleObject) {
+  const formatMillisecond = locale.format('.%L'),
+    formatSecond = locale.format(':%S'),
+    formatMinute = locale.format('%I:%M'),
+    formatHour = locale.format('%I %p'),
+    formatDay = locale.format('%a %d'),
+    formatWeek = locale.format('%b %d'),
+    formatMonth = locale.format('%B'),
+    formatYear = locale.format('%Y');
+
+  return (d3Time.timeSecond(date) < date
+    ? formatMillisecond
+    : d3Time.timeMinute(date) < date
+    ? formatSecond
+    : d3Time.timeHour(date) < date
+    ? formatMinute
+    : d3Time.timeDay(date) < date
+    ? formatHour
+    : d3Time.timeMonth(date) < date
+    ? d3Time.timeWeek(date) < date
+      ? formatDay
+      : formatWeek
+    : d3Time.timeYear(date) < date
+    ? formatMonth
+    : formatYear)(date);
+}
+
 /**
  * Creating Date x axis of the Chart
  * @export
@@ -163,6 +191,7 @@ export function createDateXAxis(
   tickParams: ITickParams,
   culture?: string,
   options?: Intl.DateTimeFormatOptions,
+  timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition,
 ) {
   const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount = 6 } = xAxisParams;
   const xAxisScale = d3ScaleTime()
@@ -174,6 +203,12 @@ export function createDateXAxis(
     xAxis.tickFormat((domainValue: Date, _index: number) => {
       return domainValue.toLocaleString(culture, options);
     });
+  } else if (timeFormatLocale) {
+    const locale: d3TimeFormat.TimeLocaleObject = d3TimeFormat.timeFormatLocale(timeFormatLocale!);
+
+    xAxis.tickFormat((domainValue: Date, _index: number) => {
+      return multiFormat(domainValue, locale);
+    });
   }
 
   tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index c1033d5dc43cd..611f33250af20 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -19,7 +19,8 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "@types/d3-format": "^1.3.1"
+    "@types/d3-format": "^1.3.1",
+    "@types/d3-fetch": "^3.0.1"
   },
   "dependencies": {
     "@fluentui/azure-themes": "^8.4.34",
@@ -44,6 +45,7 @@
     "@fluentui/theme-samples": "^8.6.34",
     "@fluentui/utilities": "^8.13.1",
     "@microsoft/load-themed-styles": "^1.10.26",
+    "d3-fetch": "3.0.1",
     "d3-format": "^1.4.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
new file mode 100644
index 0000000000000..82dd15730bc4f
--- /dev/null
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
@@ -0,0 +1,209 @@
+import * as React from 'react';
+import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting';
+import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import { Toggle } from '@fluentui/react/lib/Toggle';
+import * as d3 from 'd3-fetch';
+
+interface ILineChartBasicState {
+  width: number;
+  height: number;
+  allowMultipleShapes: boolean;
+  customLocale: any;
+}
+
+export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, ILineChartBasicState> {
+  constructor(props: ILineChartProps) {
+    super(props);
+    this.state = {
+      width: 700,
+      height: 300,
+      allowMultipleShapes: false,
+      customLocale: undefined,
+    };
+  }
+
+  public componentDidMount() {
+    this.getCustomLocale();
+  }
+
+  public render(): JSX.Element {
+    return <div>{this._basicExample()}</div>;
+  }
+
+  private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ width: parseInt(e.target.value, 10) });
+  };
+  private _onHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ height: parseInt(e.target.value, 10) });
+  };
+  private _onShapeChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.setState({ allowMultipleShapes: checked });
+  };
+
+  private getCustomLocale = () => {
+    d3.json('https://unpkg.com/d3-time-format@2/locale/it-IT.json').then(locale =>
+      this.setState({ customLocale: locale }),
+    );
+  };
+
+  private _basicExample(): JSX.Element {
+    const data: IChartProps = {
+      chartTitle: 'Line Chart',
+      lineChartData: [
+        {
+          legend: 'From_Legacy_to_O365',
+          data: [
+            {
+              x: new Date('2020-03-03T00:00:00.000Z'),
+              y: 216000,
+              onDataPointClick: () => alert('click on 217000'),
+            },
+            {
+              x: new Date('2020-04-03T10:00:00.000Z'),
+              y: 218123,
+              onDataPointClick: () => alert('click on 217123'),
+            },
+            {
+              x: new Date('2020-05-05T11:00:00.000Z'),
+              y: 217124,
+              onDataPointClick: () => alert('click on 217124'),
+            },
+            {
+              x: new Date('2020-07-14T00:00:00.000Z'),
+              y: 248000,
+              onDataPointClick: () => alert('click on 248000'),
+            },
+            {
+              x: new Date('2020-11-15T00:00:00.000Z'),
+              y: 252000,
+              onDataPointClick: () => alert('click on 252000'),
+            },
+            {
+              x: new Date('2020-12-06T00:00:00.000Z'),
+              y: 274000,
+              onDataPointClick: () => alert('click on 274000'),
+            },
+            {
+              x: new Date('2021-01-07T00:00:00.000Z'),
+              y: 260000,
+              onDataPointClick: () => alert('click on 260000'),
+            },
+            {
+              x: new Date('2021-02-14T00:00:00.000Z'),
+              y: 304000,
+              onDataPointClick: () => alert('click on 300000'),
+            },
+            {
+              x: new Date('2021-03-09T00:00:00.000Z'),
+              y: 218000,
+              onDataPointClick: () => alert('click on 218000'),
+            },
+          ],
+          color: DefaultPalette.blue,
+          lineOptions: {
+            lineBorderWidth: '4',
+          },
+          onLineClick: () => console.log('From_Legacy_to_O365'),
+        },
+        {
+          legend: 'All',
+          data: [
+            {
+              x: new Date('2020-03-03T00:00:00.000Z'),
+              y: 297000,
+            },
+            {
+              x: new Date('2020-04-04T00:00:00.000Z'),
+              y: 284000,
+            },
+            {
+              x: new Date('2020-05-05T00:00:00.000Z'),
+              y: 282000,
+            },
+            {
+              x: new Date('2020-06-06T00:00:00.000Z'),
+              y: 294000,
+            },
+            {
+              x: new Date('2020-09-16T00:00:00.000Z'),
+              y: 224000,
+            },
+            {
+              x: new Date('2021-02-08T00:00:00.000Z'),
+              y: 300000,
+            },
+            {
+              x: new Date('2021-03-09T00:00:00.000Z'),
+              y: 298000,
+            },
+          ],
+          color: DefaultPalette.green,
+          lineOptions: {
+            lineBorderWidth: '4',
+          },
+        },
+        {
+          legend: 'single point',
+          data: [
+            {
+              x: new Date('2020-07-05T00:00:00.000Z'),
+              y: 282000,
+            },
+          ],
+          color: DefaultPalette.yellow,
+        },
+      ],
+    };
+
+    const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
+    const margins = { left: 35, top: 20, bottom: 35, right: 20 };
+
+    return (
+      <>
+        <label htmlFor="changeWidth_basic">Change Width:</label>
+        <input
+          type="range"
+          value={this.state.width}
+          min={200}
+          max={1000}
+          id="changeWidth_Basic"
+          onChange={this._onWidthChange}
+          aria-valuetext={`ChangeWidthSlider${this.state.width}`}
+        />
+        <label htmlFor="changeHeight_Basic">Change Height:</label>
+        <input
+          type="range"
+          value={this.state.height}
+          min={200}
+          max={1000}
+          id="changeHeight_Basic"
+          onChange={this._onHeightChange}
+          aria-valuetext={`ChangeHeightslider${this.state.height}`}
+        />
+        <Toggle
+          label="Enabled  multiple shapes for each line"
+          onText="On"
+          offText="Off"
+          onChange={this._onShapeChange}
+          checked={this.state.allowMultipleShapes}
+        />
+        <div style={rootStyle}>
+          <LineChart
+            culture={'rs-ss'}
+            data={data}
+            legendsOverflowText={'Overflow Items'}
+            yMinValue={200}
+            yMaxValue={301}
+            height={this.state.height}
+            width={this.state.width}
+            margins={margins}
+            xAxisTickCount={10}
+            allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+            rotateXAxisLables={true}
+            timeFormatLocale={this.state.customLocale}
+          />
+        </div>
+      </>
+    );
+  }
+}
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
index eab4e67c39197..236a5c51de676 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
@@ -14,6 +14,7 @@ import { LineChartEventsExample } from './LineChart.Events.Example';
 import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibility.Example';
 import { LineChartGapsExample } from './LineChart.Gaps.Example';
 import { LineChartLargeDataExample } from './LineChart.LargeData.Example';
+import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example';
 
 const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string;
 const LineChartStyledExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx') as string;
@@ -22,6 +23,9 @@ const LineChartEventsExampleCode = require('!raw-loader?esModule=false!@fluentui
 const LineChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx') as string;
 const LineChartGapsExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx') as string;
 const LineChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx') as string;
+const LineChartCustomLocaleDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx') as string;
+
+// All line charts locale is impacted.
 
 export class LineChartPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -52,6 +56,9 @@ export class LineChartPage extends React.Component<IComponentDemoPageProps, {}>
             <ExampleCard title="LineChart large data" code={LineChartLargeDataExampleCode}>
               <LineChartLargeDataExample />
             </ExampleCard>
+            <ExampleCard title="LineChart custom date axis locale" code={LineChartCustomLocaleDateAxisExampleCode}>
+              <LineChartCustomLocaleDateAxisExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={
diff --git a/yarn.lock b/yarn.lock
index 4ba69c65d3770..34b6047ad004c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5294,6 +5294,18 @@
   dependencies:
     "@types/d3-selection" "*"
 
+"@types/d3-dsv@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311"
+  integrity sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==
+
+"@types/d3-fetch@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.1.tgz#f9fa88b81aa2eea5814f11aec82ecfddbd0b8fe0"
+  integrity sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==
+  dependencies:
+    "@types/d3-dsv" "*"
+
 "@types/d3-format@^1.3.1":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.3.1.tgz#35bf88264bd6bcda39251165bb827f67879c4384"
@@ -5357,6 +5369,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.10.tgz#d338c7feac93a98a32aac875d1100f92c7b61f4f"
   integrity sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==
 
+"@types/d3-time@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
 "@types/dedent@0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@types/dedent/-/dedent-0.7.0.tgz#155f339ca404e6dd90b9ce46a3f78fd69ca9b050"
@@ -9760,6 +9777,11 @@ commander@6.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
   integrity sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==
 
+commander@7, commander@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.7.1, commander@^2.8.1:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -9780,11 +9802,6 @@ commander@^6.2.0, commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
-
 commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
@@ -10630,6 +10647,13 @@ d3-array@1, "d3-array@1 - 2", d3-array@1.2.1, d3-array@^1.1.1, d3-array@^1.2.0:
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
   integrity sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==
 
+"d3-array@2 - 3":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
+  integrity sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==
+  dependencies:
+    internmap "1 - 2"
+
 d3-axis@1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"
@@ -10652,6 +10676,22 @@ d3-contour@^1.1.0:
   dependencies:
     d3-array "^1.1.1"
 
+"d3-dsv@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+d3-fetch@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
 d3-format@1, d3-format@^1.2.0, d3-format@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030"
@@ -10757,6 +10797,13 @@ d3-time@1:
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce"
   integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==
 
+d3-time@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
+  integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==
+  dependencies:
+    d3-array "2 - 3"
+
 d3-voronoi@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
@@ -15597,6 +15644,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@0.6:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 iconv-lite@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
@@ -15883,6 +15937,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 interpret@^1.0.1, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -24049,6 +24108,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs-for-await@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/rxjs-for-await/-/rxjs-for-await-0.0.2.tgz#26598a1d6167147cc192172970e7eed4e620384b"

From 35f6721b1951fad3b7ad6ee9947bca142b1eb558 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 14:17:40 +0530
Subject: [PATCH 02/12] Update documentation around localization support

---
 packages/react-charting/README.md             | 87 ++++++++++++++++++-
 packages/react-charting/TechnicalDetails.md   | 80 -----------------
 .../AreaChart/AreaChartPage.tsx               | 11 +++
 .../HeatMapChart/HeatMapChartPage.tsx         | 11 +++
 .../LineChart/LineChartPage.tsx               | 11 +++
 5 files changed, 116 insertions(+), 84 deletions(-)
 delete mode 100644 packages/react-charting/TechnicalDetails.md

diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md
index a9a36e3d15253..efb29b195f926 100644
--- a/packages/react-charting/README.md
+++ b/packages/react-charting/README.md
@@ -28,10 +28,6 @@ To import charting components:
 import { ComponentName } from '@fluentui/react-charting/lib/ComponentName';
 ```
 
-**Technical Guide**
-
-Technical information about chart components is available at [Technical details](./TechnicalDetails.md)
-
 **Contributing**
 
 Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package.
@@ -56,3 +52,86 @@ You could also create issues under the [charting](https://github.com/microsoft/f
 **Coding Guidelines**
 
 Refer fluent [Coding guidelines](https://github.com/microsoft/fluentui/wiki/Coding-Style)
+
+# Technical details
+
+**Overview**
+
+This document describes different chart components in detail.
+
+This can be used as a guide to use the charts and contribute new functionalities or improvements to the library.
+
+**Components**
+
+The charting components are built using following building blocks.
+
+- Cartesian Charts.
+
+  - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts.
+
+- Legends.
+
+  - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.
+
+- Hover Callouts.
+
+  - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate.
+
+- Axes.
+
+  - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart.
+
+  - Axes support for different charts
+
+    | Chart                      | Numeric Axis | Date Axis | String Axis |
+    | -------------------------- | ------------ | --------- | ----------- |
+    | Line Chart                 | Yes          | Yes       | No          |
+    | Area Chart                 | Yes          | Yes       | No          |
+    | Vertical Bar Chart         | Yes          | No        | Yes         |
+    | Vertical Stacked Bar Chart | Yes          | No        | Yes         |
+    | Grouped Vertical Bar Chart | No           | No        | Yes         |
+    | Heatmap Chart              | Yes          | Yes       | Yes         |
+    | Horizontal Bar Chart       | --           | --        | --          |
+    | Donut Chart                | --           | --        | --          |
+    | Sankey Chart               | --           | --        | --          |
+    | Tree Chart                 | --           | --        | --          |
+    | Sparkline Chart            | --           | --        | --          |
+
+  - 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 details.
+    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.
+
+- 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.
+
+- Typography.
+
+  - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color.
+
+- Colors
+
+  - The charts are designed using the accessible color palette defined for the fluent design system.
+
+- Themes
+
+  - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming)
+
+- Accessibility.
+
+  - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
+    Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties.
+
+- RTL Support
+
+  - The charts support RTL languages wherever applicable.
+
+- Component Styling
+
+  - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library.
+
+- Details about ticks.
+  - Tick values are applicable only for date axis. Doesn't work for string or numeric axis.
+    Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis.
diff --git a/packages/react-charting/TechnicalDetails.md b/packages/react-charting/TechnicalDetails.md
deleted file mode 100644
index 2100767c26fd9..0000000000000
--- a/packages/react-charting/TechnicalDetails.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Technical details
-
-**Overview**
-
-This document describes different charts and their components in detail.
-
-This can be used as a guide to use the charts and contribute new functionalities or improvements to the library.
-
-**Components**
-
-The charting components are built using following building blocks.
-
-- Cartesian Charts.
-
-  - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts.
-
-- Legends.
-
-  - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.
-
-- Hover Callouts.
-
-  - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate.
-
-- Axes.
-
-  - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart.
-
-  - Axes support for different charts
-
-    | Chart                      | Numeric Axis | Date Axis | String Axis |
-    | -------------------------- | ------------ | --------- | ----------- |
-    | Line Chart                 | Yes          | Yes       | No          |
-    | Area Chart                 | Yes          | Yes       | No          |
-    | Vertical Bar Chart         | Yes          | No        | Yes         |
-    | Vertical Stacked Bar Chart | Yes          | No        | Yes         |
-    | Grouped Vertical Bar Chart | No           | No        | Yes         |
-    | Heatmap Chart              | Yes          | Yes       | Yes         |
-    | Horizontal Bar Chart       | --           | --        | --          |
-    | Donut Chart                | --           | --        | --          |
-    | Sankey Chart               | --           | --        | --          |
-    | Tree Chart                 | --           | --        | --          |
-    | Sparkline Chart            | --           | --        | --          |
-
-  - Axis localization
-    The axes support javascript provided localization for numeric and date axis.
-    Specify the culture and dateLocalizeOptions for date axis to define target localization details.
-
-- 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.
-
-- Typography.
-
-  - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color.
-
-- Colors
-
-  - The charts are designed using the accessible color palette defined for the fluent design system.
-
-- Themes
-
-  - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming)
-
-- Accessibility.
-
-  - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
-    Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties.
-
-- RTL Support
-
-  - The charts support RTL languages wherever applicable.
-
-- Component Styling
-
-  - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library.
-
-- Details about ticks.
-  - Tick values are applicable only for date axis. Doesn't work for string or numeric axis.
-    Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis.
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
index 533df6c9f23cb..6219c97caec3d 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
@@ -74,6 +74,17 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
               and <code>callOutAccessibilityData</code> to configure x axis and y axis accessibility messages
               respectively.
             </p>
+            <h4>Axis localization</h4>
+            <p>
+              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 details. 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 <code>timeFormatLocale</code> prop.
+            </p>
           </div>
         }
       />
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
index c3ee3963950fa..01c7c0736688c 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
@@ -73,6 +73,17 @@ export class HeatMapChart extends React.Component<IComponentDemoPageProps, {}> {
             <p>
               For string y axis use: <code>yAxisStringFormatter</code>
             </p>
+            <h4>Axis localization</h4>
+            <p>
+              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 details. 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 <code>timeFormatLocale</code> prop.
+            </p>
           </div>
         }
       />
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
index 236a5c51de676..218b6f740f7d2 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
@@ -118,6 +118,17 @@ export class LineChartPage extends React.Component<IComponentDemoPageProps, {}>
               and <code>callOutAccessibilityData</code> to configure x axis and y axis accessibility messages
               respectively.
             </p>
+            <h4>Axis localization</h4>
+            <p>
+              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 details. 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 <code>timeFormatLocale</code> prop.
+            </p>
           </div>
         }
       />

From 3e12dd2902edc7f3eab22cfceb7049a7221d2ef6 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 14:40:15 +0530
Subject: [PATCH 03/12] Remove unused import

---
 .../src/components/CommonComponents/CartesianChart.base.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index 2fdf45eee5b52..c94bb9f4ec61e 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -30,7 +30,6 @@ import {
   pointTypes,
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
-import * as d3TimeFormat from 'd3-time-format';
 
 const getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianChartStyles>();
 

From ad2ec89b25cce9a13161e2c760376f9882317799 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 14:41:52 +0530
Subject: [PATCH 04/12] Add change file

---
 ...eact-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json

diff --git a/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json b/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json
new file mode 100644
index 0000000000000..3a6b5971010f4
--- /dev/null
+++ b/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add support for custom locale for date axis",
+  "packageName": "@fluentui/react-charting",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 1efad77972a9355a83215cd448257fb514560e65 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 15:09:50 +0530
Subject: [PATCH 05/12] Update documentation

---
 packages/react-charting/README.md                              | 1 +
 .../src/react-charting/AreaChart/AreaChartPage.tsx             | 3 ++-
 .../src/react-charting/HeatMapChart/HeatMapChartPage.tsx       | 3 ++-
 .../src/react-charting/LineChart/LineChartPage.tsx             | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md
index efb29b195f926..7bb853c1761c6 100644
--- a/packages/react-charting/README.md
+++ b/packages/react-charting/README.md
@@ -102,6 +102,7 @@ The charting components are built using following building blocks.
     1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization details.
     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.
 
 - Event annotations (Available in line charts).
 
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
index 6219c97caec3d..6ca4623e8c032 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
@@ -83,7 +83,8 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
               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 <code>timeFormatLocale</code> prop.
+              locale definition in the <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
+              in line chart for sample usage.
             </p>
           </div>
         }
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
index 01c7c0736688c..5248f5dd121d5 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
@@ -82,7 +82,8 @@ export class HeatMapChart extends React.Component<IComponentDemoPageProps, {}> {
               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 <code>timeFormatLocale</code> prop.
+              locale definition in the <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
+              in line chart for sample usage.
             </p>
           </div>
         }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
index 218b6f740f7d2..13b35e7b63344 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
@@ -127,7 +127,8 @@ export class LineChartPage extends React.Component<IComponentDemoPageProps, {}>
               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 <code>timeFormatLocale</code> prop.
+              locale definition in the <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
+              in line chart for sample usage.
             </p>
           </div>
         }

From 39670f60481f874b8365e9df6d484197f15e936b Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Fri, 9 Sep 2022 17:25:22 +0530
Subject: [PATCH 06/12] Fix lint error

---
 .../react-charting/src/utilities/utilities.ts | 16 +++++------
 .../AreaChart/AreaChart.Basic.Example.tsx     |  2 +-
 .../HorizontalBarChart.Basic.Example.tsx      |  2 +-
 .../MultiStackedBarChart.Example.tsx          | 28 +++++++++++++++++++
 .../StackedBarChart.Basic.Example.tsx         | 17 +++++++++++
 5 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index c087906e4b1ec..dddc58bf2fcd3 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -154,14 +154,14 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, culture?: string)
 }
 
 function multiFormat(date: Date, locale: d3TimeFormat.TimeLocaleObject) {
-  const formatMillisecond = locale.format('.%L'),
-    formatSecond = locale.format(':%S'),
-    formatMinute = locale.format('%I:%M'),
-    formatHour = locale.format('%I %p'),
-    formatDay = locale.format('%a %d'),
-    formatWeek = locale.format('%b %d'),
-    formatMonth = locale.format('%B'),
-    formatYear = locale.format('%Y');
+  const formatMillisecond = locale.format('.%L');
+  const formatSecond = locale.format(':%S');
+  const formatMinute = locale.format('%I:%M');
+  const formatHour = locale.format('%I %p');
+  const formatDay = locale.format('%a %d');
+  const formatWeek = locale.format('%b %d');
+  const formatMonth = locale.format('%B');
+  const formatYear = locale.format('%Y');
 
   return (d3Time.timeSecond(date) < date
     ? formatMillisecond
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
index a2c103baca2d2..19c97e2ceb03c 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
@@ -178,7 +178,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
         <ChoiceGroup options={options} defaultSelectedKey="basicExample" onChange={this._onChange} label="Pick one" />
         <div style={rootStyle}>
           <AreaChart
-            culture={window.navigator.language}
+            culture={'ar-SA'}
             height={this.state.height}
             width={this.state.width}
             data={chartData}
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index d876fecad29e4..7be370f747a12 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -23,7 +23,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () =>
       chartData: [
         {
           legend: 'two',
-          horizontalBarChartdata: { x: 800, y: 15000 },
+          horizontalBarChartdata: { x: 100, y: 15000 },
           color: DefaultPalette.purple,
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
index 826256665c50e..c189b2832b99a 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
@@ -39,6 +39,34 @@ export const MultiStackedBarChartExample: React.FunctionComponent<{}> = () => {
       xAxisCalloutData: '2020/04/30',
       yAxisCalloutData: '87%',
     },
+    {
+      legend: 'A',
+      data: 1,
+      color: DefaultPalette.red,
+      xAxisCalloutData: '2020/04/30',
+      yAxisCalloutData: '40%',
+    },
+    {
+      legend: 'B',
+      data: 1,
+      color: DefaultPalette.red,
+      xAxisCalloutData: '2020/04/30',
+      yAxisCalloutData: '40%',
+    },
+    {
+      legend: 'C',
+      data: 1,
+      color: DefaultPalette.red,
+      xAxisCalloutData: '2020/04/30',
+      yAxisCalloutData: '40%',
+    },
+    {
+      legend: 'D',
+      data: 1,
+      color: DefaultPalette.red,
+      xAxisCalloutData: '2020/04/30',
+      yAxisCalloutData: '40%',
+    },
   ];
   const firstChartPoints1: IChartDataPoint[] = [
     {
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
index 8b9e6488cbac9..cd04200288edc 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
@@ -13,6 +13,23 @@ export class StackedBarChartBasicExample extends React.Component<{}, {}> {
         yAxisCalloutData: '40%',
       },
       { legend: 'second', data: 1, color: DefaultPalette.green },
+      { legend: 'third', data: 10, color: DefaultPalette.red },
+      { legend: 'fourth', data: 5000, color: DefaultPalette.yellow },
+      { legend: 'f', data: 1, color: DefaultPalette.green },
+      { legend: 'g', data: 10, color: DefaultPalette.red },
+      { legend: 'h', data: 5000, color: DefaultPalette.yellow },
+      { legend: 'i', data: 1, color: DefaultPalette.green },
+      { legend: 'j', data: 10, color: DefaultPalette.red },
+      { legend: 'k', data: 5000, color: DefaultPalette.yellow },
+      { legend: 'l', data: 1, color: DefaultPalette.green },
+      { legend: 'm', data: 10, color: DefaultPalette.red },
+      { legend: 'n', data: 5000, color: DefaultPalette.yellow },
+      { legend: 'o', data: 1, color: DefaultPalette.green },
+      { legend: 'p', data: 10, color: DefaultPalette.red },
+      { legend: 'q', data: 1, color: DefaultPalette.yellow },
+      { legend: 'r', data: 1, color: DefaultPalette.green },
+      { legend: 's', data: 1, color: DefaultPalette.red },
+      { legend: 't', data: 1, color: DefaultPalette.yellow },
     ];
 
     const data0: IChartProps = {

From 6b3d0feea409f92c45ed3d1c1871fec919287851 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Mon, 12 Sep 2022 13:20:40 +0530
Subject: [PATCH 07/12] Revert "Fix lint error"

This reverts commit 39670f60481f874b8365e9df6d484197f15e936b.
---
 .../react-charting/src/utilities/utilities.ts | 16 +++++------
 .../AreaChart/AreaChart.Basic.Example.tsx     |  2 +-
 .../HorizontalBarChart.Basic.Example.tsx      |  2 +-
 .../MultiStackedBarChart.Example.tsx          | 28 -------------------
 .../StackedBarChart.Basic.Example.tsx         | 17 -----------
 5 files changed, 10 insertions(+), 55 deletions(-)

diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index dddc58bf2fcd3..c087906e4b1ec 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -154,14 +154,14 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, culture?: string)
 }
 
 function multiFormat(date: Date, locale: d3TimeFormat.TimeLocaleObject) {
-  const formatMillisecond = locale.format('.%L');
-  const formatSecond = locale.format(':%S');
-  const formatMinute = locale.format('%I:%M');
-  const formatHour = locale.format('%I %p');
-  const formatDay = locale.format('%a %d');
-  const formatWeek = locale.format('%b %d');
-  const formatMonth = locale.format('%B');
-  const formatYear = locale.format('%Y');
+  const formatMillisecond = locale.format('.%L'),
+    formatSecond = locale.format(':%S'),
+    formatMinute = locale.format('%I:%M'),
+    formatHour = locale.format('%I %p'),
+    formatDay = locale.format('%a %d'),
+    formatWeek = locale.format('%b %d'),
+    formatMonth = locale.format('%B'),
+    formatYear = locale.format('%Y');
 
   return (d3Time.timeSecond(date) < date
     ? formatMillisecond
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
index 19c97e2ceb03c..a2c103baca2d2 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
@@ -178,7 +178,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
         <ChoiceGroup options={options} defaultSelectedKey="basicExample" onChange={this._onChange} label="Pick one" />
         <div style={rootStyle}>
           <AreaChart
-            culture={'ar-SA'}
+            culture={window.navigator.language}
             height={this.state.height}
             width={this.state.width}
             data={chartData}
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index 7be370f747a12..d876fecad29e4 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -23,7 +23,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () =>
       chartData: [
         {
           legend: 'two',
-          horizontalBarChartdata: { x: 100, y: 15000 },
+          horizontalBarChartdata: { x: 800, y: 15000 },
           color: DefaultPalette.purple,
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
index c189b2832b99a..826256665c50e 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
@@ -39,34 +39,6 @@ export const MultiStackedBarChartExample: React.FunctionComponent<{}> = () => {
       xAxisCalloutData: '2020/04/30',
       yAxisCalloutData: '87%',
     },
-    {
-      legend: 'A',
-      data: 1,
-      color: DefaultPalette.red,
-      xAxisCalloutData: '2020/04/30',
-      yAxisCalloutData: '40%',
-    },
-    {
-      legend: 'B',
-      data: 1,
-      color: DefaultPalette.red,
-      xAxisCalloutData: '2020/04/30',
-      yAxisCalloutData: '40%',
-    },
-    {
-      legend: 'C',
-      data: 1,
-      color: DefaultPalette.red,
-      xAxisCalloutData: '2020/04/30',
-      yAxisCalloutData: '40%',
-    },
-    {
-      legend: 'D',
-      data: 1,
-      color: DefaultPalette.red,
-      xAxisCalloutData: '2020/04/30',
-      yAxisCalloutData: '40%',
-    },
   ];
   const firstChartPoints1: IChartDataPoint[] = [
     {
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
index cd04200288edc..8b9e6488cbac9 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx
@@ -13,23 +13,6 @@ export class StackedBarChartBasicExample extends React.Component<{}, {}> {
         yAxisCalloutData: '40%',
       },
       { legend: 'second', data: 1, color: DefaultPalette.green },
-      { legend: 'third', data: 10, color: DefaultPalette.red },
-      { legend: 'fourth', data: 5000, color: DefaultPalette.yellow },
-      { legend: 'f', data: 1, color: DefaultPalette.green },
-      { legend: 'g', data: 10, color: DefaultPalette.red },
-      { legend: 'h', data: 5000, color: DefaultPalette.yellow },
-      { legend: 'i', data: 1, color: DefaultPalette.green },
-      { legend: 'j', data: 10, color: DefaultPalette.red },
-      { legend: 'k', data: 5000, color: DefaultPalette.yellow },
-      { legend: 'l', data: 1, color: DefaultPalette.green },
-      { legend: 'm', data: 10, color: DefaultPalette.red },
-      { legend: 'n', data: 5000, color: DefaultPalette.yellow },
-      { legend: 'o', data: 1, color: DefaultPalette.green },
-      { legend: 'p', data: 10, color: DefaultPalette.red },
-      { legend: 'q', data: 1, color: DefaultPalette.yellow },
-      { legend: 'r', data: 1, color: DefaultPalette.green },
-      { legend: 's', data: 1, color: DefaultPalette.red },
-      { legend: 't', data: 1, color: DefaultPalette.yellow },
     ];
 
     const data0: IChartProps = {

From 724c34a94cffe13faa8b1a263b5fc14265e71550 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Mon, 12 Sep 2022 13:23:32 +0530
Subject: [PATCH 08/12] Fix lint error

---
 .../react-charting/src/utilities/utilities.ts | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index c087906e4b1ec..782ec29d0c714 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -4,7 +4,15 @@ import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime, scaleBand as d3
 import { select as d3Select, event as d3Event, selectAll as d3SelectAll } from 'd3-selection';
 import { format as d3Format } from 'd3-format';
 import * as d3TimeFormat from 'd3-time-format';
-import * as d3Time from 'd3-time';
+import {
+  timeSecond as d3TimeSecond,
+  timeMinute as d3TimeMinute,
+  timeHour as d3TimeHour,
+  timeDay as d3TimeDay,
+  timeMonth as d3TimeMonth,
+  timeWeek as d3TimeWeek,
+  timeYear as d3TimeYear,
+} from 'd3-time';
 import {
   IAccessibilityProps,
   IEventsAnnotationProps,
@@ -154,28 +162,28 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, culture?: string)
 }
 
 function multiFormat(date: Date, locale: d3TimeFormat.TimeLocaleObject) {
-  const formatMillisecond = locale.format('.%L'),
-    formatSecond = locale.format(':%S'),
-    formatMinute = locale.format('%I:%M'),
-    formatHour = locale.format('%I %p'),
-    formatDay = locale.format('%a %d'),
-    formatWeek = locale.format('%b %d'),
-    formatMonth = locale.format('%B'),
-    formatYear = locale.format('%Y');
-
-  return (d3Time.timeSecond(date) < date
+  const formatMillisecond = locale.format('.%L');
+  const formatSecond = locale.format(':%S');
+  const formatMinute = locale.format('%I:%M');
+  const formatHour = locale.format('%I %p');
+  const formatDay = locale.format('%a %d');
+  const formatWeek = locale.format('%b %d');
+  const formatMonth = locale.format('%B');
+  const formatYear = locale.format('%Y');
+
+  return (d3TimeSecond(date) < date
     ? formatMillisecond
-    : d3Time.timeMinute(date) < date
+    : d3TimeMinute(date) < date
     ? formatSecond
-    : d3Time.timeHour(date) < date
+    : d3TimeHour(date) < date
     ? formatMinute
-    : d3Time.timeDay(date) < date
+    : d3TimeDay(date) < date
     ? formatHour
-    : d3Time.timeMonth(date) < date
-    ? d3Time.timeWeek(date) < date
+    : d3TimeMonth(date) < date
+    ? d3TimeWeek(date) < date
       ? formatDay
       : formatWeek
-    : d3Time.timeYear(date) < date
+    : d3TimeYear(date) < date
     ? formatMonth
     : formatYear)(date);
 }

From 21962bd7459689629c9760af03fa29d07e05f9aa Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Mon, 12 Sep 2022 14:20:01 +0530
Subject: [PATCH 09/12] Change d3 time version from 3.0.0 to 1.1.0

---
 packages/react-charting/package.json |  4 ++--
 yarn.lock                            | 30 ++++++++--------------------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 077ba5ae56b4e..e83f64133c3d3 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -45,7 +45,7 @@
     "@types/d3-selection": "1.4.1",
     "@types/d3-shape": "^1.2.3",
     "@types/d3-time-format": "^2.1.0",
-    "@types/d3-time": "^3.0.0",
+    "@types/d3-time": "^1.1.0",
     "@fluentui/set-version": "^8.2.2",
     "d3-array": "1.2.1",
     "d3-axis": "1.0.8",
@@ -56,7 +56,7 @@
     "d3-selection": "1.3.0",
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.1.3",
-    "d3-time": "^3.0.0",
+    "d3-time": "^1.1.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 34b6047ad004c..627c01ffb50de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5369,10 +5369,10 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.10.tgz#d338c7feac93a98a32aac875d1100f92c7b61f4f"
   integrity sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==
 
-"@types/d3-time@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
-  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+"@types/d3-time@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.1.1.tgz#6cf3a4242c3bbac00440dfb8ba7884f16bedfcbf"
+  integrity sha512-ULX7LoqXTCYtM+tLYOaeAJK7IwCT+4Gxlm2MaH0ErKLi07R5lh8NHCAyWcDkCCmx1AfRcBEV6H9QE9R25uP7jw==
 
 "@types/dedent@0.7.0":
   version "0.7.0"
@@ -10647,13 +10647,6 @@ d3-array@1, "d3-array@1 - 2", d3-array@1.2.1, d3-array@^1.1.1, d3-array@^1.2.0:
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
   integrity sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==
 
-"d3-array@2 - 3":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
-  integrity sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==
-  dependencies:
-    internmap "1 - 2"
-
 d3-axis@1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"
@@ -10797,12 +10790,10 @@ d3-time@1:
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce"
   integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==
 
-d3-time@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
-  integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==
-  dependencies:
-    d3-array "2 - 3"
+d3-time@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
 d3-voronoi@^1.1.2:
   version "1.1.4"
@@ -15937,11 +15928,6 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-"internmap@1 - 2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
-  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
-
 interpret@^1.0.1, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"

From 444b476e7c13f89343e36162c7b2e3f5bd5509d8 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Mon, 12 Sep 2022 15:04:33 +0530
Subject: [PATCH 10/12] Fix lint issue

---
 .../LineChart/LineChart.CustomLocaleDateAxis.Example.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
index 82dd15730bc4f..fda2ad0695a2c 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
@@ -23,7 +23,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
   }
 
   public componentDidMount() {
-    this.getCustomLocale();
+    this._getCustomLocale();
   }
 
   public render(): JSX.Element {
@@ -40,7 +40,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
     this.setState({ allowMultipleShapes: checked });
   };
 
-  private getCustomLocale = () => {
+  private _getCustomLocale = () => {
     d3.json('https://unpkg.com/d3-time-format@2/locale/it-IT.json').then(locale =>
       this.setState({ customLocale: locale }),
     );

From 457bf4e14b652a0ad029d90663ac0cfbf068e06e Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Mon, 12 Sep 2022 22:03:20 +0530
Subject: [PATCH 11/12] Fix documentation

---
 packages/react-charting/README.md             |  2 +-
 .../AreaChart/AreaChartPage.tsx               | 25 +++++++++++--------
 .../HeatMapChart/HeatMapChartPage.tsx         | 25 +++++++++++--------
 .../LineChart/LineChartPage.tsx               | 25 +++++++++++--------
 4 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md
index 7bb853c1761c6..79cad1a43d4ad 100644
--- a/packages/react-charting/README.md
+++ b/packages/react-charting/README.md
@@ -99,7 +99,7 @@ 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 details.
+    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.
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
index 6ca4623e8c032..1b2f65e82b2b8 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
@@ -74,17 +74,22 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
               and <code>callOutAccessibilityData</code> to configure x axis and y axis accessibility messages
               respectively.
             </p>
-            <h4>Axis localization</h4>
+            <h4>Date Axis localization</h4>
             <p>
-              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 details. 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 <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
-              in line chart for sample usage.
+              The axes support 2 ways of localization. <br />
+              1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and
+              dateLocalizeOptions for date axis to define target localization. Refer the
+              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString">
+                Javascript localization guide
+              </a>
+              for usage. <br />
+              2. Custom locale definition: The consumer of the library can specify a custom locale definition as
+              supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
+              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 <code>timeFormatLocale</code> prop. Refer to the Custom
+              Locale Date Axis example in line chart for sample usage.
             </p>
           </div>
         }
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
index 5248f5dd121d5..e9747dbb451ef 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
@@ -73,17 +73,22 @@ export class HeatMapChart extends React.Component<IComponentDemoPageProps, {}> {
             <p>
               For string y axis use: <code>yAxisStringFormatter</code>
             </p>
-            <h4>Axis localization</h4>
+            <h4>Date Axis localization</h4>
             <p>
-              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 details. 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 <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
-              in line chart for sample usage.
+              The axes support 2 ways of localization. <br />
+              1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and
+              dateLocalizeOptions for date axis to define target localization. Refer the
+              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString">
+                Javascript localization guide
+              </a>
+              for usage. <br />
+              2. Custom locale definition: The consumer of the library can specify a custom locale definition as
+              supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
+              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 <code>timeFormatLocale</code> prop. Refer to the Custom
+              Locale Date Axis example in line chart for sample usage.
             </p>
           </div>
         }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
index 13b35e7b63344..26842318d252b 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
@@ -118,17 +118,22 @@ export class LineChartPage extends React.Component<IComponentDemoPageProps, {}>
               and <code>callOutAccessibilityData</code> to configure x axis and y axis accessibility messages
               respectively.
             </p>
-            <h4>Axis localization</h4>
+            <h4>Date Axis localization</h4>
             <p>
-              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 details. 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 <code>timeFormatLocale</code> prop. Refer to the Custom Locale Date Axis example
-              in line chart for sample usage.
+              The axes support 2 ways of localization. <br />
+              1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and
+              dateLocalizeOptions for date axis to define target localization. Refer the
+              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString">
+                Javascript localization guide
+              </a>
+              for usage. <br />
+              2. Custom locale definition: The consumer of the library can specify a custom locale definition as
+              supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
+              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 <code>timeFormatLocale</code> prop. Refer to the Custom
+              Locale Date Axis example in line chart for sample usage.
             </p>
           </div>
         }

From 35940bc0289e81aa7b5cfbc2207f2dc7594660de Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Tue, 13 Sep 2022 12:00:05 +0530
Subject: [PATCH 12/12] Update doc

---
 .../src/react-charting/AreaChart/AreaChartPage.tsx              | 2 +-
 .../src/react-charting/HeatMapChart/HeatMapChartPage.tsx        | 2 +-
 .../src/react-charting/LineChart/LineChartPage.tsx              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
index 1b2f65e82b2b8..cff790d3677e9 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx
@@ -86,7 +86,7 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
               2. Custom locale definition: The consumer of the library can specify a custom locale definition as
               supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
               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
+              correct labels 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 <code>timeFormatLocale</code> prop. Refer to the Custom
               Locale Date Axis example in line chart for sample usage.
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
index e9747dbb451ef..98f25ef107852 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx
@@ -85,7 +85,7 @@ export class HeatMapChart extends React.Component<IComponentDemoPageProps, {}> {
               2. Custom locale definition: The consumer of the library can specify a custom locale definition as
               supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
               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
+              correct labels 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 <code>timeFormatLocale</code> prop. Refer to the Custom
               Locale Date Axis example in line chart for sample usage.
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
index 26842318d252b..d6b485ec5591e 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx
@@ -130,7 +130,7 @@ export class LineChartPage extends React.Component<IComponentDemoPageProps, {}>
               2. Custom locale definition: The consumer of the library can specify a custom locale definition as
               supported by d3 <a href="https://github.com/d3/d3-time-format/blob/main/locale/en-US.json">like this</a>.
               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
+              correct labels 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 <code>timeFormatLocale</code> prop. Refer to the Custom
               Locale Date Axis example in line chart for sample usage.