From 957978aa93b4192805a87c0c81f7f380e4cca6a5 Mon Sep 17 00:00:00 2001
From: jameelakowsar <jameelakowsar.646@gmail.com>
Date: Thu, 9 Jul 2020 04:05:32 +0530
Subject: [PATCH] Charting: LineChart - callout not visible when graph more
 dense issue resovled. (#13933)

* linechart-callout not visible in dense graph issue resolved

* Change files

* change files

Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <v-jasha@microsoft.com>
---
 ...04-user-v-jasha-bug#4272739-LineChart.json |  8 +++++
 .../components/LineChart/LineChart.base.tsx   | 33 +++++--------------
 2 files changed, 16 insertions(+), 25 deletions(-)
 create mode 100644 change/@uifabric-charting-2020-07-07-19-01-04-user-v-jasha-bug#4272739-LineChart.json

diff --git a/change/@uifabric-charting-2020-07-07-19-01-04-user-v-jasha-bug#4272739-LineChart.json b/change/@uifabric-charting-2020-07-07-19-01-04-user-v-jasha-bug#4272739-LineChart.json
new file mode 100644
index 0000000000000..3ecb768dbdc6a
--- /dev/null
+++ b/change/@uifabric-charting-2020-07-07-19-01-04-user-v-jasha-bug#4272739-LineChart.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "linechart-callout not visible in dense graph issue resolved",
+  "packageName": "@uifabric/charting",
+  "email": "v-jasha@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-07T13:31:04.672Z"
+}
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 91331588966da..6145e85912469 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -112,8 +112,14 @@ export class LineChartBase extends React.Component<
     /** note that height and width are not used to resize or set as dimesions of the chart,
      * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
      */
-    if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
+    if (
+      prevProps.height !== this.props.height ||
+      prevProps.width !== this.props.width ||
+      prevProps.data !== this.props.data
+    ) {
       this._fitParentContainer();
+      this._points = this.props.data.lineChartData ? this.props.data.lineChartData : [];
+      this._calloutPoints = this.CalloutData(this._points) ? this.CalloutData(this._points) : [];
     }
   }
 
@@ -237,6 +243,7 @@ export class LineChartBase extends React.Component<
                       index: number,
                     ) => (
                       <div
+                        id={`${index}_${xValue.y}`}
                         className={mergeStyles(this._classNames.calloutBlockContainer, {
                           borderLeft: `4px solid ${xValue.color}`,
                         })}
@@ -580,17 +587,6 @@ export class LineChartBase extends React.Component<
             );
           }
         } else {
-          lines.push(
-            <circle
-              id={circleId}
-              key={lineId + 1}
-              r={5}
-              cx={this._xAxisScale(x1)}
-              cy={this._yAxisScale(y1)}
-              opacity={0.1}
-              fill={lineColor}
-            />,
-          );
           lines.push(
             <line
               id={lineId}
@@ -605,19 +601,6 @@ export class LineChartBase extends React.Component<
               opacity={0.1}
             />,
           );
-          if (j + 1 === this._points[i].data.length) {
-            lines.push(
-              <circle
-                id={circleId}
-                key={lineId + 2}
-                r={5}
-                cx={this._xAxisScale(x2)}
-                cy={this._yAxisScale(y2)}
-                fill={lineColor}
-                opacity={0.1}
-              />,
-            );
-          }
         }
       }
     }