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) <[email protected]>
microsoft · Jan 26, 2021 · 12cb2f2 · 12cb2f2
1 parent 010502c
commit 12cb2f2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
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
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Line chart: last circle callout issue fixed (#16556)",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "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
@@ -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,