From 12cb2f26b8954ad9f4653b61c2deb3200bbeca92 Mon Sep 17 00:00:00 2001
From: Jakub Konka <jakubkonka@microsoft.com>
Date: Thu, 21 Jan 2021 23:14:08 +0530
Subject: [PATCH] v8 snap: cherry-pick of #16556

Line chart: Last circle callout issue fixed (#16556)

* Line Chart: X axis callout for last circle issue resolved. Updated xAxisCalloutData for last circle

* Change files

* update email in change file

Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <v-jasha@microsoft.com>
---
 ...i-react-charting-2021-01-26-12-47-03-cherry-16556.json | 8 ++++++++
 .../src/components/LineChart/LineChart.base.tsx           | 7 ++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-charting-2021-01-26-12-47-03-cherry-16556.json

diff --git a/change/@fluentui-react-charting-2021-01-26-12-47-03-cherry-16556.json b/change/@fluentui-react-charting-2021-01-26-12-47-03-cherry-16556.json
new file mode 100644
index 00000000000000..138e4d111a51d5
--- /dev/null
+++ b/change/@fluentui-react-charting-2021-01-26-12-47-03-cherry-16556.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Line chart: last circle callout issue fixed (#16556)",
+  "packageName": "@fluentui/react-charting",
+  "email": "jakubkonka@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-26T11:47:02.987Z"
+}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index 7c7d00b3c1d570..17aa890cb147a2 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -375,6 +375,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           );
           if (j + 1 === this._points[i].data.length) {
             const lastCircleId = `${circleId}${j}L`;
+            const lastCirlceXCallout = this._points[i].data[j].xAxisCalloutData;
             lines.push(
               <circle
                 id={lastCircleId}
@@ -383,10 +384,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                 cx={this._xAxisScale(x2)}
                 cy={this._yAxisScale(y2)}
                 data-is-focusable={i === 0 ? true : false}
-                onMouseOver={this._handleHover.bind(this, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
-                onMouseMove={this._handleHover.bind(this, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
+                onMouseOver={this._handleHover.bind(this, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
+                onMouseMove={this._handleHover.bind(this, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
                 onMouseOut={this._handleMouseOut.bind(this, lastCircleId, lineColor)}
-                onFocus={this._handleFocus.bind(this, lineId, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
+                onFocus={this._handleFocus.bind(this, lineId, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
                 onBlur={this._handleMouseOut.bind(this, lastCircleId, lineColor)}
                 onClick={this._onDataPointClick.bind(
                   this,