Charting: LineChart - callout not visible when graph more dense issue…

… resovled. (microsoft#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>
miroslavstastny · Jul 8, 2020 · 957978a · 957978a
1 parent 1f2048c
commit 957978a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 25 deletions.
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
@@ -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
@@ -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}
-              />,
-            );
-          }
         }
       }
     }