feat(ui): Create and use element id for ECharts when using tooltip.appendToBody (#88735)

ECharts has a tooltip option (`appendToBody`) to append the tooltip to
`document.body`. This is useful when the charts has a parent container
that has e.g. `overflow: hidden` so that the tooltip does not get
cutoff. However we have a [custom tooltip positioning
function](https://github.com/getsentry/sentry/blob/master/static/app/components/charts/components/tooltip.tsx#L403)
that requires a element id to get a reference of the chart (or its
container) to properly position the tooltip. If we use `appendToBody`
without an `id`, the tooltip does not get displayed near the mouse
cursor and instead it's confined within the bounds of the chart.

### Before
The crosshairs is where the mouse is (above series both both
screenshots)

![image](https://github.com/user-attachments/assets/ab34d439-ee7b-4472-9810-11e4946c13bd)
Here the tooltip is not near the series or the mouse

![image](https://github.com/user-attachments/assets/a51e41c6-c55b-4d28-8984-e0cdd169b96c)


### After
Notice the tooltips are near the crosshairs

![image](https://github.com/user-attachments/assets/82ac66ab-f894-4900-a606-2ca3dc524be9)

![image](https://github.com/user-attachments/assets/585aeb0b-fb1c-4fec-ab12-1d129f63909c)

Author: billyvg

static/app/components/charts/baseChart.tsx

@@ -4,7 +4,7 @@ import 'echarts/lib/component/toolbox';
 import 'echarts/lib/component/brush';
 import 'zrender/lib/svg/svg';
 
-import {useMemo} from 'react';
+import {useId, useMemo} from 'react';
 import type {Theme} from '@emotion/react';
 import {css, Global, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -181,6 +181,7 @@ export interface BaseChartProps {
    * Chart height
    */
   height?: ReactEChartOpts['height'];
+
   /**
    * If data is grouped by date; then apply default date formatting to x-axis
    * and tooltips.
@@ -478,6 +479,7 @@ function BaseChart({
       : false;
 
   const isTooltipPortalled = tooltip?.appendToBody;
+  const chartId = useId();
 
   const chartOption = useMemo(() => {
     const seriesData =
@@ -496,6 +498,7 @@ function BaseChart({
               addSecondsToTimeFormat,
               utc,
               bucketSize,
+              chartId: isTooltipPortalled ? chartId : undefined,
               ...tooltip,
               className: isTooltipPortalled
                 ? `${tooltip?.className ?? ''} chart-tooltip-portal`
@@ -568,6 +571,7 @@ function BaseChart({
       brush,
     };
   }, [
+    chartId,
     color,
     resolvedSeries,
     isTooltipPortalled,
@@ -662,7 +666,11 @@ function BaseChart({
   }, [style, autoHeightResize, height, width]);
 
   return (
-    <ChartContainer autoHeightResize={autoHeightResize} data-test-id={dataTestId}>
+    <ChartContainer
+      id={isTooltipPortalled ? chartId : undefined}
+      autoHeightResize={autoHeightResize}
+      data-test-id={dataTestId}
+    >
       {isTooltipPortalled && <Global styles={getPortalledTooltipStyles({theme})} />}
       <ReactEchartsCore
         ref={ref}

static/app/views/issueDetails/streamline/eventGraph.tsx

@@ -512,6 +512,7 @@ export function EventGraph({
             ...releaseBubbleGrid,
           }}
           tooltip={{
+            appendToBody: true,
             formatAxisLabel: (
               value,
               isTimestamp,