feat(slo): Synchronize cursor on SLO charts (#155560)

x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx

@@ -15,10 +15,11 @@ import {
   ScaleType,
   Settings,
 } from '@elastic/charts';
-import React from 'react';
+import React, { useRef } from 'react';
 import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import moment from 'moment';
+import { useActiveCursor } from '@kbn/charts-plugin/public';
 
 import { ChartData } from '../../../typings';
 import { useKibana } from '../../../utils/kibana_react';
@@ -45,18 +46,29 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) {
   const color = state === 'error' ? euiTheme.colors.danger : euiTheme.colors.success;
   const ChartComponent = chart === 'area' ? AreaSeries : LineSeries;
 
+  const chartRef = useRef(null);
+  const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, {
+    isDateHistogram: true,
+  });
+
   if (isLoading) {
     return <EuiLoadingChart size="m" mono data-test-subj="wideChartLoading" />;
   }
 
   return (
-    <Chart size={{ height: 150, width: '100%' }}>
+    <Chart size={{ height: 150, width: '100%' }} ref={chartRef}>
       <Settings
         baseTheme={baseTheme}
         showLegend={false}
         theme={[theme]}
         tooltip="vertical"
         noResults={<EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />}
+        onPointerUpdate={handleCursorUpdate}
+        externalPointerEvents={{
+          tooltip: { visible: true },
+        }}
+        pointerUpdateDebounce={0}
+        pointerUpdateTrigger={'x'}
       />
       <Axis
         id="bottom"

x-pack/plugins/observability/public/pages/slo_details/slo_details.test.tsx

@@ -54,7 +54,7 @@ const mockKibana = () => {
   useKibanaMock.mockReturnValue({
     services: {
       application: { navigateToUrl: mockNavigate },
-      charts: chartPluginMock.createSetupContract(),
+      charts: chartPluginMock.createStartContract(),
       http: {
         basePath: {
           prepend: mockBasePathPrepend,

x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx

@@ -65,6 +65,7 @@ export function KibanaReactStorybookDecorator(Story: ComponentType) {
             useChartsBaseTheme: () => {},
             useChartsTheme: () => {},
           },
+          activeCursor: () => {},
         },
         data: {},
         dataViews: {