From 540e928dec12666f9d13d30d1ab9000b77b33a14 Mon Sep 17 00:00:00 2001
From: Jakub Konka <jakubkonka@microsoft.com>
Date: Wed, 27 Jan 2021 01:02:09 +0100
Subject: [PATCH] v8 snap: LineChart cherry-picks (#16634)

- Line chart: Last circle callout issue fixed (#16556)
- Charting: Tooltip disappear on escape click issue fixed in line chart (#16491)

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

diff --git a/change/@fluentui-react-charting-2021-01-26-13-07-28-cherry-16556.json b/change/@fluentui-react-charting-2021-01-26-13-07-28-cherry-16556.json
new file mode 100644
index 0000000000000..41789df0629e7
--- /dev/null
+++ b/change/@fluentui-react-charting-2021-01-26-13-07-28-cherry-16556.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "LineChart fixes backported from v7 branch",
+  "packageName": "@fluentui/react-charting",
+  "email": "jakubkonka@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-26T12:07:28.833Z"
+}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index 7c7d00b3c1d57..d93d38f5cd0c0 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -123,6 +123,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       target: this.state.refSelected,
       isBeakVisible: false,
       gapSpace: 15,
+      onDismiss: this._closeCallout,
+      preventDismissOnEvent: () => true,
+      hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible),
       ...this.props.calloutProps,
     };
     const tickParams = {
@@ -292,6 +295,12 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return legends;
   }
 
+  private _closeCallout = () => {
+    this.setState({
+      isCalloutVisible: false,
+    });
+  };
+
   private _createLines(): JSX.Element[] {
     const lines = [];
     if (this.state.isSelectedLegend) {
@@ -375,6 +384,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 +393,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,