fix(react-charts): fix non-plottable points popover issue (#35501)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-6c7f54a6-06d8-4c59-8579-f0003074f5c5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix popover issue",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx

@@ -1497,6 +1497,14 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
           : xPointToHighlight;
       const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight) as CustomizedCalloutData | undefined;
       const pointToHighlight: LineChartDataPoint = lineChartData![linenumber].data[index!] as LineChartDataPoint;
+
+      // Check if this point is plottable. If not, close the popover and return.
+      const xPoint = _xAxisScale(pointToHighlight.x);
+      const yPoint = yScale(pointToHighlight.y);
+      if (!isPlottable(xPoint, yPoint)) {
+        return;
+      }
+
       const pointToHighlightUpdated =
         nearestCircleToHighlight === null ||
         (nearestCircleToHighlight !== null &&
@@ -1507,14 +1515,14 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
         _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
 
         d3Select(`#${_staticHighlightCircle}_${linenumber}`)
-          .attr('cx', `${_xAxisScale(pointToHighlight.x)}`)
-          .attr('cy', `${yScale(pointToHighlight.y)}`)
+          .attr('cx', `${xPoint}`)
+          .attr('cy', `${yPoint}`)
           .attr('visibility', 'visibility');
 
         d3Select(`#${_verticalLine}`)
-          .attr('transform', () => `translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`)
+          .attr('transform', () => `translate(${xPoint}, ${yPoint})`)
           .attr('visibility', 'visibility')
-          .attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
+          .attr('y2', `${lineHeight - 5 - yPoint}`);
 
         const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
         const rect = targetElement!.getBoundingClientRect();