From 447fa01b87dd42df84a5a28cd5cfece69d8da8c4 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Wed, 30 Nov 2022 14:22:09 +0530
Subject: [PATCH 1/4] Allow single point in area chart

---
 .../src/components/AreaChart/AreaChart.base.tsx  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index 56553ce04ddbe8..825ab6367e660d 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -576,6 +576,22 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
             onMouseOver={this._onRectMouseMove}
             {...points[index]!.lineOptions}
           />
+          {singleStackedData.length == 1} ?
+          <circle
+            id={`${index}-graph-${this._uniqueIdForGraph}`}
+            cx={xScale(singleStackedData[0].xVal)}
+            cy={yScale(singleStackedData[0].values[1])}
+            r={6}
+            stroke={this._colors[index]}
+            strokeWidth={3}
+            fill={this._colors[index]}
+            opacity={this._opacity[index]}
+            fillOpacity={this._getOpacity(points[index]!.legend)}
+            onMouseMove={this._onRectMouseMove}
+            onMouseOut={this._onRectMouseOut}
+            onMouseOver={this._onRectMouseMove}
+          />{' '}
+          :
           <path
             id={`${index}-graph-${this._uniqueIdForGraph}`}
             d={area(singleStackedData)!}

From 63329b22108fefdf6070a590e65919d815753888 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Wed, 30 Nov 2022 14:23:25 +0530
Subject: [PATCH 2/4] Add change file

---
 ...eact-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json

diff --git a/change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json b/change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json
new file mode 100644
index 00000000000000..e4e0d1b25bbe20
--- /dev/null
+++ b/change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support single point in area chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 416c8db69901153ee7fc4abe94f5dd5d20d6f71c Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Wed, 30 Nov 2022 14:50:34 +0530
Subject: [PATCH 3/4] Fix lint issue

---
 .../react-charting/src/components/AreaChart/AreaChart.base.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index 825ab6367e660d..07b25924303e71 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -576,7 +576,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
             onMouseOver={this._onRectMouseMove}
             {...points[index]!.lineOptions}
           />
-          {singleStackedData.length == 1} ?
+          {singleStackedData.length === 1} ?
           <circle
             id={`${index}-graph-${this._uniqueIdForGraph}`}
             cx={xScale(singleStackedData[0].xVal)}

From 201900f24dae206a1d877b10b310d4669b636ff0 Mon Sep 17 00:00:00 2001
From: "Atishay Jain (atisjai)" <atishay.jain@microsoft.com>
Date: Wed, 30 Nov 2022 16:51:14 +0530
Subject: [PATCH 4/4] Add tests for area chart single point

---
 .../components/AreaChart/AreaChart.base.tsx   |  53 +--
 .../components/AreaChart/AreaChart.test.tsx   |  18 +
 .../__snapshots__/AreaChart.test.tsx.snap     | 334 ++++++++++++++++++
 3 files changed, 379 insertions(+), 26 deletions(-)

diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index 07b25924303e71..b464ef428cee3f 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -576,32 +576,33 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
             onMouseOver={this._onRectMouseMove}
             {...points[index]!.lineOptions}
           />
-          {singleStackedData.length === 1} ?
-          <circle
-            id={`${index}-graph-${this._uniqueIdForGraph}`}
-            cx={xScale(singleStackedData[0].xVal)}
-            cy={yScale(singleStackedData[0].values[1])}
-            r={6}
-            stroke={this._colors[index]}
-            strokeWidth={3}
-            fill={this._colors[index]}
-            opacity={this._opacity[index]}
-            fillOpacity={this._getOpacity(points[index]!.legend)}
-            onMouseMove={this._onRectMouseMove}
-            onMouseOut={this._onRectMouseOut}
-            onMouseOver={this._onRectMouseMove}
-          />{' '}
-          :
-          <path
-            id={`${index}-graph-${this._uniqueIdForGraph}`}
-            d={area(singleStackedData)!}
-            fill={this._colors[index]}
-            opacity={this._opacity[index]}
-            fillOpacity={this._getOpacity(points[index]!.legend)}
-            onMouseMove={this._onRectMouseMove}
-            onMouseOut={this._onRectMouseOut}
-            onMouseOver={this._onRectMouseMove}
-          />
+          {singleStackedData.length === 1 ? (
+            <circle
+              id={`${index}-graph-${this._uniqueIdForGraph}`}
+              cx={xScale(singleStackedData[0].xVal)}
+              cy={yScale(singleStackedData[0].values[1])}
+              r={6}
+              stroke={this._colors[index]}
+              strokeWidth={3}
+              fill={this._colors[index]}
+              opacity={this._opacity[index]}
+              fillOpacity={this._getOpacity(points[index]!.legend)}
+              onMouseMove={this._onRectMouseMove}
+              onMouseOut={this._onRectMouseOut}
+              onMouseOver={this._onRectMouseMove}
+            />
+          ) : (
+            <path
+              id={`${index}-graph-${this._uniqueIdForGraph}`}
+              d={area(singleStackedData)!}
+              fill={this._colors[index]}
+              opacity={this._opacity[index]}
+              fillOpacity={this._getOpacity(points[index]!.legend)}
+              onMouseMove={this._onRectMouseMove}
+              onMouseOut={this._onRectMouseOut}
+              onMouseOver={this._onRectMouseMove}
+            />
+          )}
         </React.Fragment>,
       );
     });
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
index 08aed2d4459789..b668d73a2770a9 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
@@ -44,6 +44,18 @@ const chartPoints = {
   lineChartData: points,
 };
 
+const singlePoint = [
+  {
+    legend: 'metaData1',
+    data: [{ x: 20, y: 50 }],
+    color: 'red',
+  },
+];
+const singleChartPoint = {
+  chartTitle: 'AreaChart',
+  lineChartData: singlePoint,
+};
+
 describe('AreaChart snapShot testing', () => {
   it('renders Areachart correctly', () => {
     const component = renderer.create(<AreaChart data={chartPoints} />);
@@ -86,6 +98,12 @@ describe('AreaChart snapShot testing', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders Areachart with single point correctly', () => {
+    const component = renderer.create(<AreaChart data={singleChartPoint} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('AreaChart - basic props', () => {
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index a7b6297e69425e..109f986add1f77 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -1734,6 +1734,340 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
 </div>
 `;
 
+exports[`AreaChart snapShot testing renders Areachart with single point correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_60"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone61"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_60"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_60"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={-20}
+          id="rectangle58"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={10}
+        />
+      </g>
+      <g>
+        <path
+          d="M10,17.884615384615383Z"
+          fill="transparent"
+          id="0-line-areaChart_55"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <circle
+          cx={10}
+          cy={17.884615384615383}
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_55"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          r={6}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M10,17.884615384615383L10,-35Z"
+        >
+          <circle
+            cx={10}
+            cy={17.884615384615383}
+            data-is-focusable={true}
+            fill="red"
+            id="circle57_0"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            stroke="red"
+            strokeWidth={3}
+            visibility="hidden"
+          />
+        </g>
+        <line
+          id="verticalLine_56"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={0}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone62"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1 selected"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
 exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
 <div
   className=