diff --git a/src/plugins/charts/public/mocks.ts b/src/plugins/charts/public/mocks.ts
index 720202f081ef0..d1eba6f1956a5 100644
--- a/src/plugins/charts/public/mocks.ts
+++ b/src/plugins/charts/public/mocks.ts
@@ -12,6 +12,8 @@ import { activeCursorMock } from './services/active_cursor/mock';
 import { colorsServiceMock } from './services/legacy_colors/mock';
 import { getPaletteRegistry, paletteServiceMock } from './services/palettes/mock';
 
+export { MOCK_SPARKLINE_THEME } from './services/theme/mock';
+
 export type Setup = jest.Mocked<ReturnType<ChartsPlugin['setup']>>;
 export type Start = jest.Mocked<ReturnType<ChartsPlugin['start']>>;
 
diff --git a/src/plugins/charts/public/services/theme/mock.ts b/src/plugins/charts/public/services/theme/mock.ts
index d41f9f20dd382..ce21174a9a5a6 100644
--- a/src/plugins/charts/public/services/theme/mock.ts
+++ b/src/plugins/charts/public/services/theme/mock.ts
@@ -6,9 +6,26 @@
  * Side Public License, v 1.
  */
 
-import { LIGHT_THEME } from '@elastic/charts';
+import { LIGHT_THEME, PartialTheme } from '@elastic/charts';
 import { ThemeService } from './theme';
 
+export const MOCK_SPARKLINE_THEME: PartialTheme = {
+  lineSeriesStyle: {
+    point: {
+      visible: false,
+      strokeWidth: 1,
+      radius: 1,
+    },
+  },
+  areaSeriesStyle: {
+    point: {
+      visible: false,
+      strokeWidth: 1,
+      radius: 1,
+    },
+  },
+};
+
 export const themeServiceMock: ThemeService = {
   chartsDefaultBaseTheme: LIGHT_THEME,
   chartsBaseTheme$: jest.fn(() => ({
@@ -19,4 +36,5 @@ export const themeServiceMock: ThemeService = {
   })),
   useDarkMode: jest.fn().mockReturnValue(false),
   useChartsBaseTheme: jest.fn().mockReturnValue(LIGHT_THEME),
+  useSparklineOverrides: jest.fn().mockReturnValue(MOCK_SPARKLINE_THEME),
 } as any;
diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts
index b8ee2301dbb82..c3ee3f8b8c14b 100644
--- a/src/plugins/charts/public/services/theme/theme.ts
+++ b/src/plugins/charts/public/services/theme/theme.ts
@@ -52,6 +52,30 @@ export class ThemeService {
     return {};
   };
 
+  /**
+   * A react hook to return shared sparkline chart overrides
+   *
+   * Replacement for `EUI_SPARKLINE_THEME_PARTIAL`
+   */
+  public useSparklineOverrides = (): PartialTheme => {
+    return {
+      lineSeriesStyle: {
+        point: {
+          visible: false,
+          strokeWidth: 1,
+          radius: 1,
+        },
+      },
+      areaSeriesStyle: {
+        point: {
+          visible: false,
+          strokeWidth: 1,
+          radius: 1,
+        },
+      },
+    };
+  };
+
   /** A React hook for consuming the charts theme */
   public useChartsBaseTheme = (): Theme => {
     const [value, update] = useState(this._chartsBaseTheme$.getValue());
@@ -70,7 +94,11 @@ export class ThemeService {
     return value;
   };
 
-  /** initialize service with uiSettings */
+  /**
+   * Initialize theme service with dark mode
+   *
+   * Meant to be called by charts plugin setup method
+   */
   public init(theme: CoreSetup['theme']) {
     this.theme$ = theme.theme$;
     this.theme$.subscribe(({ darkMode }) => {
diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_chart_themes.ts b/x-pack/plugins/observability_solution/infra/public/hooks/use_chart_themes.ts
new file mode 100644
index 0000000000000..07c085bcc35be
--- /dev/null
+++ b/x-pack/plugins/observability_solution/infra/public/hooks/use_chart_themes.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useKibanaContextForPlugin } from './use_kibana';
+
+export const useChartThemes = () => {
+  const { services } = useKibanaContextForPlugin();
+
+  return {
+    baseTheme: services.charts.theme.useChartsBaseTheme(),
+    sparklineTheme: services.charts.theme.useSparklineOverrides(),
+  };
+};
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
index d51b1ff370fe3..5c38c0055cf38 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
@@ -6,21 +6,11 @@
  */
 
 import React, { useMemo } from 'react';
-import {
-  Chart,
-  Settings,
-  AreaSeries,
-  ScaleType,
-  TooltipType,
-  Tooltip,
-  LIGHT_THEME,
-  DARK_THEME,
-} from '@elastic/charts';
-import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
+import { Chart, Settings, AreaSeries, ScaleType, TooltipType, Tooltip } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { useIsDarkMode } from '../../../../../hooks/use_is_dark_mode';
 import { useKibanaTimeZoneSetting } from '../../../../../hooks/use_kibana_time_zone_setting';
 import { TimeRange } from '../../../../../../common/time';
+import { useChartThemes } from '../../../../../hooks/use_chart_themes';
 
 interface TimeSeriesPoint {
   timestamp: number;
@@ -38,9 +28,8 @@ export const SingleMetricSparkline: React.FunctionComponent<{
   metric: TimeSeriesPoint[];
   timeRange: TimeRange;
 }> = ({ metric, timeRange }) => {
-  const isDarkMode = useIsDarkMode();
   const timeZone = useKibanaTimeZoneSetting();
-  const baseTheme = useMemo(() => (isDarkMode ? DARK_THEME : LIGHT_THEME), [isDarkMode]);
+  const { baseTheme, sparklineTheme } = useChartThemes();
 
   const xDomain = useMemo(
     () => ({
@@ -55,7 +44,7 @@ export const SingleMetricSparkline: React.FunctionComponent<{
       <Tooltip type={TooltipType.None} />
       <Settings
         showLegend={false}
-        theme={EUI_SPARKLINE_THEME_PARTIAL}
+        theme={sparklineTheme}
         baseTheme={baseTheme}
         xDomain={xDomain}
         locale={i18n.getLocale()}
diff --git a/x-pack/plugins/observability_solution/observability/public/hooks/use_chart_themes.ts b/x-pack/plugins/observability_solution/observability/public/hooks/use_chart_themes.ts
new file mode 100644
index 0000000000000..71e3c3c81e9fa
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability/public/hooks/use_chart_themes.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useKibana } from '../utils/kibana_react';
+
+export const useChartThemes = () => {
+  const { charts } = useKibana().services;
+
+  return {
+    baseTheme: charts.theme.useChartsBaseTheme(),
+    sparklineTheme: charts.theme.useSparklineOverrides(),
+  };
+};
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
index bd292a2bf88cb..edd56b2c9b640 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
@@ -5,23 +5,14 @@
  * 2.0.
  */
 
-import {
-  Chart,
-  Settings,
-  AreaSeries,
-  TooltipType,
-  Tooltip,
-  LIGHT_THEME,
-  DARK_THEME,
-} from '@elastic/charts';
+import { Chart, Settings, AreaSeries, TooltipType, Tooltip } from '@elastic/charts';
 import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui';
-import React, { useContext } from 'react';
+import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
-import { ThemeContext } from 'styled-components';
 
 import { i18n } from '@kbn/i18n';
 import { NumberOrNull } from '../../../../..';
+import { useChartThemes } from '../../../../../hooks/use_chart_themes';
 
 interface Props {
   id: string;
@@ -31,11 +22,7 @@ interface Props {
   color: number;
 }
 export function MetricWithSparkline({ id, formatter, value, timeseries, color }: Props) {
-  const themeCTX = useContext(ThemeContext);
-  const isDarkTheme = (themeCTX && themeCTX.darkMode) || false;
-  const theme = [EUI_SPARKLINE_THEME_PARTIAL];
-  const baseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
-
+  const { baseTheme, sparklineTheme } = useChartThemes();
   const colors = baseTheme.colors?.vizColors ?? [];
 
   if (!value) {
@@ -57,7 +44,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }:
           <Tooltip type={TooltipType.None} />
           <Settings
             baseTheme={baseTheme}
-            theme={theme}
+            theme={sparklineTheme}
             showLegend={false}
             locale={i18n.getLocale()}
           />
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx b/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx
index 5cc5e2ac967ea..2156a3d0cbc43 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx
@@ -39,7 +39,6 @@ const ALERTS_TABLE_ID = 'xpack.observability.overview.alert.table';
 
 export function OverviewPage() {
   const {
-    charts,
     http,
     triggersActionsUi: {
       alertsTableConfigurationRegistry,
@@ -103,10 +102,6 @@ export function OverviewPage() {
     [bucketSize, relativeEnd, relativeStart]
   );
 
-  const chartProps = {
-    baseTheme: charts.theme.useChartsBaseTheme(),
-  };
-
   useEffect(() => {
     setEsQuery(
       buildEsQuery({
@@ -184,7 +179,6 @@ export function OverviewPage() {
             hasError={false}
           >
             <AlertSummaryWidget
-              chartProps={chartProps}
               featureIds={observabilityAlertFeatureIds}
               filter={esQuery}
               fullSize
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
index 23d93b35ad330..bdaf10b04ca69 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
@@ -49,9 +49,6 @@ interface RuleDetailsPathParams {
 export function RuleDetailsPage() {
   const {
     application: { capabilities, navigateToUrl },
-    charts: {
-      theme: { useChartsBaseTheme },
-    },
     http: { basePath },
     share: {
       url: { locators },
@@ -69,9 +66,6 @@ export function RuleDetailsPage() {
 
   const { ruleId } = useParams<RuleDetailsPathParams>();
   const { search } = useLocation();
-
-  const baseTheme = useChartsBaseTheme();
-
   const { rule, isLoading, isError, refetch } = useFetchRule({ ruleId });
   const filteredRuleTypes = useGetFilteredRuleTypes();
   const { ruleTypes } = useFetchRuleTypes({
@@ -233,7 +227,6 @@ export function RuleDetailsPage() {
 
         <EuiFlexItem style={{ minWidth: 350 }}>
           <AlertSummaryWidget
-            chartProps={{ baseTheme }}
             featureIds={featureIds}
             onClick={handleAlertSummaryWidgetClick}
             timeRange={alertSummaryWidgetTimeRange}
diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx
index 0e8f8fe2b3dee..da41a5938baa0 100644
--- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx
@@ -34,7 +34,6 @@ export function SloAlertsSummary({
   showAllGroupByInstances,
 }: Props) {
   const {
-    charts,
     triggersActionsUi: { getAlertSummaryWidget: AlertSummaryWidget },
   } = deps;
 
@@ -64,16 +63,11 @@ export function SloAlertsSummary({
     [timeRange.from, timeRange.to, bucketSize]
   );
 
-  const chartProps = {
-    theme: charts.theme.useChartsTheme(),
-    baseTheme: charts.theme.useChartsBaseTheme(),
-  };
   return (
     <AlertSummaryWidget
       featureIds={observabilityAlertFeatureIds}
       filter={esQuery}
       timeRange={alertSummaryTimeRange}
-      chartProps={chartProps}
       fullSize
       onLoaded={() => {
         if (onLoaded) {
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx
index 0bb96b39d0649..e220643bbc3b3 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx
@@ -18,7 +18,6 @@ import {
 } from '@elastic/charts';
 import React from 'react';
 import { EuiLoadingChart, useEuiTheme } from '@elastic/eui';
-import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
 
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../utils/kibana_react';
@@ -42,6 +41,7 @@ export interface Props {
 export function SloSparkline({ chart, data, id, isLoading, size, state }: Props) {
   const charts = useKibana().services.charts;
   const baseTheme = charts.theme.useChartsBaseTheme();
+  const sparklineTheme = charts.theme.useSparklineOverrides();
 
   const { euiTheme } = useEuiTheme();
 
@@ -60,7 +60,7 @@ export function SloSparkline({ chart, data, id, isLoading, size, state }: Props)
       <Settings
         baseTheme={baseTheme}
         showLegend={false}
-        theme={[EUI_SPARKLINE_THEME_PARTIAL]}
+        theme={sparklineTheme}
         locale={i18n.getLocale()}
       />
       <Tooltip type={TooltipType.None} />
diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
index 7b22d0520a6c4..cbfc5038446f5 100644
--- a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
+++ b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
@@ -15,6 +15,7 @@ import { KibanaThemeProvider, KibanaServices } from '@kbn/kibana-react-plugin/pu
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import type { NotificationsStart, ApplicationStart } from '@kbn/core/public';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
 import { KibanaContextProvider } from '../public/common/lib/kibana';
 import { ExperimentalFeaturesService } from '../public/common/experimental_features_service';
 import { getHttp } from './context/http';
@@ -92,6 +93,27 @@ export const StorybookContextDecorator: React.FC<StorybookContextDecoratorProps>
               http: getHttp(context),
               actionTypeRegistry: getActionTypeRegistry(),
               ruleTypeRegistry: getRuleTypeRegistry(),
+              charts: {
+                theme: {
+                  useChartsBaseTheme: () => (darkMode ? DARK_THEME : LIGHT_THEME),
+                  useSparklineOverrides: () => ({
+                    lineSeriesStyle: {
+                      point: {
+                        visible: false,
+                        strokeWidth: 1,
+                        radius: 1,
+                      },
+                    },
+                    areaSeriesStyle: {
+                      point: {
+                        visible: false,
+                        strokeWidth: 1,
+                        radius: 1,
+                      },
+                    },
+                  }),
+                },
+              },
               ...servicesOverride,
             }}
           >
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts
index bb07375721059..eae946f4eda41 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { LIGHT_THEME } from '@elastic/charts';
 import { AlertSummaryTimeRange, ChartProps } from '../../sections/alert_summary_widget/types';
 
 export const mockedAlertSummaryResponse = {
@@ -38,6 +37,4 @@ export const mockedAlertSummaryTimeRange: AlertSummaryTimeRange = {
   title: 'mockedTitle',
 };
 
-export const mockedChartProps: ChartProps = {
-  baseTheme: LIGHT_THEME,
-};
+export const mockedChartProps: ChartProps = {};
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.test.tsx
index a04fe6ed70eb8..bf5f487cfafa9 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.test.tsx
@@ -9,20 +9,19 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { AlertSummaryWidget } from './alert_summary_widget';
-import { AlertSummaryWidgetProps } from './types';
+import { AlertSummaryWidgetDependencies, AlertSummaryWidgetProps } from './types';
 import { mockedAlertSummaryTimeRange, mockedChartProps } from '../../mock/alert_summary_widget';
 import { useLoadAlertSummary } from '../../hooks/use_load_alert_summary';
 import {
   ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ,
   TOTAL_ALERT_COUNT_DATA_TEST_SUBJ,
 } from './components/constants';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 
 jest.mock('@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting', () => ({
   useUiSetting: jest.fn().mockImplementation(() => true),
 }));
 
-const TITLE_DATA_TEST_SUBJ = 'mockedTimeRangeTitle';
-
 jest.mock('../../hooks/use_load_alert_summary', () => ({
   useLoadAlertSummary: jest.fn().mockReturnValue({
     alertSummary: {
@@ -35,8 +34,15 @@ jest.mock('../../hooks/use_load_alert_summary', () => ({
     },
   }),
 }));
+
+const TITLE_DATA_TEST_SUBJ = 'mockedTimeRangeTitle';
+
 const useLoadAlertSummaryMock = useLoadAlertSummary as jest.Mock;
 
+const dependencies: AlertSummaryWidgetDependencies['dependencies'] = {
+  charts: chartPluginMock.createStartContract(),
+};
+
 describe('AlertSummaryWidget', () => {
   const mockedTimeRange = {
     ...mockedAlertSummaryTimeRange,
@@ -51,6 +57,7 @@ describe('AlertSummaryWidget', () => {
           featureIds={['apm', 'uptime', 'logs']}
           onClick={jest.fn}
           timeRange={mockedTimeRange}
+          dependencies={dependencies}
           {...props}
         />
       </IntlProvider>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx
index 2619ef2b25258..8702cc50910c8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx
@@ -14,6 +14,7 @@ import {
   AlertSummaryWidgetFullSize,
   AlertSummaryWidgetLoader,
 } from './components';
+import { AlertSummaryWidgetDependencies, DependencyProps } from './types';
 
 export const AlertSummaryWidget = ({
   chartProps,
@@ -24,7 +25,8 @@ export const AlertSummaryWidget = ({
   timeRange,
   hideChart,
   onLoaded,
-}: AlertSummaryWidgetProps) => {
+  dependencies: { charts },
+}: AlertSummaryWidgetProps & AlertSummaryWidgetDependencies) => {
   const {
     alertSummary: { activeAlertCount, activeAlerts, recoveredAlertCount },
     isLoading,
@@ -41,6 +43,11 @@ export const AlertSummaryWidget = ({
     }
   }, [activeAlertCount, isLoading, onLoaded, recoveredAlertCount]);
 
+  const dependencyProps: DependencyProps = {
+    baseTheme: charts.theme.useChartsBaseTheme(),
+    sparklineTheme: charts.theme.useSparklineOverrides(),
+  };
+
   if (isLoading)
     return <AlertSummaryWidgetLoader fullSize={fullSize} isLoadingWithoutChart={hideChart} />;
 
@@ -56,6 +63,7 @@ export const AlertSummaryWidget = ({
         dateFormat={timeRange.dateFormat}
         recoveredAlertCount={recoveredAlertCount}
         hideChart={hideChart}
+        dependencyProps={dependencyProps}
       />
     ) : null
   ) : (
@@ -66,6 +74,7 @@ export const AlertSummaryWidget = ({
       onClick={onClick}
       recoveredAlertCount={recoveredAlertCount}
       timeRangeTitle={timeRange.title}
+      dependencyProps={dependencyProps}
     />
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx
index 58abc8299677b..b0f826ae2eb65 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx
@@ -14,6 +14,13 @@ import {
 import { render } from '@testing-library/react';
 import { mockedAlertSummaryResponse, mockedChartProps } from '../../../mock/alert_summary_widget';
 import { ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ, TOTAL_ALERT_COUNT_DATA_TEST_SUBJ } from './constants';
+import { LIGHT_THEME } from '@elastic/charts';
+import { DependencyProps } from '../types';
+
+const dependencyProps: DependencyProps = {
+  baseTheme: LIGHT_THEME,
+  sparklineTheme: {},
+};
 
 describe('AlertSummaryWidgetCompact', () => {
   const renderComponent = (props: Partial<AlertSummaryWidgetCompactProps> = {}) =>
@@ -22,6 +29,7 @@ describe('AlertSummaryWidgetCompact', () => {
         <AlertSummaryWidgetCompact
           chartProps={mockedChartProps}
           onClick={jest.fn}
+          dependencyProps={dependencyProps}
           {...mockedAlertSummaryResponse}
           {...props}
         />
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
index 2f53ada96bca6..3fd94f3b5a2c8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
@@ -18,43 +18,31 @@ import {
   TooltipType,
   Tooltip,
 } from '@elastic/charts';
-import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
 import { AlertStatus } from '@kbn/rule-data-utils';
 import { i18n } from '@kbn/i18n';
 import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, WIDGET_TITLE } from './constants';
-import { Alert, ChartProps } from '../types';
+import { Alert, ChartProps, DependencyProps } from '../types';
 
 export interface AlertSummaryWidgetCompactProps {
   activeAlertCount: number;
   activeAlerts: Alert[];
-  chartProps: ChartProps;
+  chartProps?: ChartProps;
   recoveredAlertCount: number;
   timeRangeTitle?: JSX.Element | string;
   onClick: (status?: AlertStatus) => void;
+  dependencyProps: DependencyProps;
 }
 
 export const AlertSummaryWidgetCompact = ({
   activeAlertCount,
   activeAlerts,
-  chartProps: { theme, baseTheme },
+  chartProps: { themeOverrides } = {},
   recoveredAlertCount,
   timeRangeTitle,
   onClick,
+  dependencyProps: { baseTheme, sparklineTheme },
 }: AlertSummaryWidgetCompactProps) => {
-  const chartTheme = [
-    ...(theme ? [theme] : []),
-    EUI_SPARKLINE_THEME_PARTIAL,
-    {
-      chartMargins: {
-        left: 10,
-        right: 10,
-        top: 10,
-        bottom: 10,
-      },
-    },
-  ];
-
   const handleClick = (
     event: MouseEvent<HTMLAnchorElement | HTMLDivElement>,
     status?: AlertStatus
@@ -99,7 +87,26 @@ export const AlertSummaryWidgetCompact = ({
             <EuiFlexItem style={{ minWidth: '200px' }}>
               <Chart size={{ height: 50 }}>
                 <Tooltip type={TooltipType.None} />
-                <Settings theme={chartTheme} baseTheme={baseTheme} locale={i18n.getLocale()} />
+                <Settings
+                  theme={[
+                    ...(themeOverrides
+                      ? Array.isArray(themeOverrides)
+                        ? themeOverrides
+                        : [themeOverrides]
+                      : []),
+                    sparklineTheme,
+                    {
+                      chartMargins: {
+                        left: 10,
+                        right: 10,
+                        top: 10,
+                        bottom: 10,
+                      },
+                    },
+                  ]}
+                  baseTheme={baseTheme}
+                  locale={i18n.getLocale()}
+                />
                 <Axis
                   hide
                   id="activeAlertsAxis"
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
index 7c4d6d531acd8..312f4016321d9 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
@@ -14,6 +14,13 @@ import {
   AlertSummaryWidgetFullSizeProps,
 } from './alert_summary_widget_full_size';
 import { ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ, TOTAL_ALERT_COUNT_DATA_TEST_SUBJ } from './constants';
+import { DependencyProps } from '../types';
+import { LIGHT_THEME } from '@elastic/charts';
+
+const dependencyProps: DependencyProps = {
+  baseTheme: LIGHT_THEME,
+  sparklineTheme: {},
+};
 
 describe('AlertSummaryWidgetFullSize', () => {
   const renderComponent = (props: Partial<AlertSummaryWidgetFullSizeProps> = {}) =>
@@ -21,6 +28,7 @@ describe('AlertSummaryWidgetFullSize', () => {
       <IntlProvider locale="en">
         <AlertSummaryWidgetFullSize
           chartProps={mockedChartProps}
+          dependencyProps={dependencyProps}
           {...mockedAlertSummaryResponse}
           {...props}
         />
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
index 5eae23e396721..f2ebfd987b308 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
@@ -21,33 +21,27 @@ import { EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, TOOLTIP_DATE_FORMAT } from './constants';
-import { Alert, ChartProps } from '../types';
+import { Alert, ChartProps, DependencyProps } from '../types';
 
 export interface AlertSummaryWidgetFullSizeProps {
   activeAlertCount: number;
   activeAlerts: Alert[];
-  chartProps: ChartProps;
+  chartProps?: ChartProps;
   recoveredAlertCount: number;
   dateFormat?: string;
   hideChart?: boolean;
+  dependencyProps: DependencyProps;
 }
 
 export const AlertSummaryWidgetFullSize = ({
   activeAlertCount,
   activeAlerts,
-  chartProps: { theme, baseTheme, onBrushEnd },
+  chartProps: { themeOverrides, onBrushEnd } = {},
   dateFormat,
   recoveredAlertCount,
   hideChart,
+  dependencyProps: { baseTheme },
 }: AlertSummaryWidgetFullSizeProps) => {
-  const chartTheme = [
-    ...(theme ? [theme] : []),
-    {
-      chartPaddings: {
-        top: 7,
-      },
-    },
-  ];
   const chartData = activeAlerts.map((alert) => alert.doc_count);
   const domain = {
     max: Math.max(...chartData) * 1.1, // add 10% headroom
@@ -78,7 +72,18 @@ export const AlertSummaryWidgetFullSize = ({
             />
             <Settings
               legendPosition={Position.Right}
-              theme={chartTheme}
+              theme={[
+                ...(themeOverrides
+                  ? Array.isArray(themeOverrides)
+                    ? themeOverrides
+                    : [themeOverrides]
+                  : []),
+                {
+                  chartPaddings: {
+                    top: 7,
+                  },
+                },
+              ]}
               baseTheme={baseTheme}
               onBrushEnd={onBrushEnd}
               locale={i18n.getLocale()}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts
index 1bb02adff0653..d8adc429bf5a4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { BrushEndListener } from '@elastic/charts';
+import type { BrushEndListener, PartialTheme, SettingsProps, Theme } from '@elastic/charts';
 import { estypes } from '@elastic/elasticsearch';
 import { AlertStatus, ValidFeatureId } from '@kbn/rule-data-utils';
-import type { PartialTheme, Theme } from '@elastic/charts';
+import { ChartsPluginStart } from '@kbn/charts-plugin/public';
 
 export interface Alert {
   key: number;
@@ -25,8 +25,7 @@ export interface AlertSummaryTimeRange {
 }
 
 export interface ChartProps {
-  theme?: PartialTheme;
-  baseTheme: Theme;
+  themeOverrides?: SettingsProps['theme'];
   onBrushEnd?: BrushEndListener;
 }
 
@@ -35,13 +34,24 @@ interface AlertsCount {
   recoveredAlertCount: number;
 }
 
+export interface AlertSummaryWidgetDependencies {
+  dependencies: {
+    charts: ChartsPluginStart;
+  };
+}
+
+export interface DependencyProps {
+  baseTheme: Theme;
+  sparklineTheme: PartialTheme;
+}
+
 export interface AlertSummaryWidgetProps {
   featureIds?: ValidFeatureId[];
   filter?: estypes.QueryDslQueryContainer;
   fullSize?: boolean;
   onClick?: (status?: AlertStatus) => void;
   timeRange: AlertSummaryTimeRange;
-  chartProps: ChartProps;
+  chartProps?: ChartProps;
   hideChart?: boolean;
   onLoaded?: (alertsCount?: AlertsCount) => void;
 }
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_rule_alerts_summary.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_rule_alerts_summary.tsx
index 21763d1e5f0c9..e10f265deac1a 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/get_rule_alerts_summary.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/get_rule_alerts_summary.tsx
@@ -8,12 +8,14 @@
 import React, { lazy, Suspense } from 'react';
 import { AlertSummaryWidgetLoader } from '../application/sections/alert_summary_widget/components';
 import { AlertSummaryWidgetProps } from '../application/sections/alert_summary_widget';
+import { AlertSummaryWidgetDependencies } from '../application/sections/alert_summary_widget/types';
 
-const AlertSummaryWidgetLazy: React.FC<AlertSummaryWidgetProps> = lazy(
-  () => import('../application/sections/alert_summary_widget/alert_summary_widget')
-);
+const AlertSummaryWidgetLazy: React.FC<AlertSummaryWidgetProps & AlertSummaryWidgetDependencies> =
+  lazy(() => import('../application/sections/alert_summary_widget/alert_summary_widget'));
 
-export const getAlertSummaryWidgetLazy = (props: AlertSummaryWidgetProps) => {
+export const getAlertSummaryWidgetLazy = (
+  props: AlertSummaryWidgetProps & AlertSummaryWidgetDependencies
+) => {
   return (
     <Suspense
       fallback={
diff --git a/x-pack/plugins/triggers_actions_ui/public/mocks.ts b/x-pack/plugins/triggers_actions_ui/public/mocks.ts
index 1c09a3895f9fd..5224a2e0d505f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/mocks.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/mocks.ts
@@ -6,6 +6,7 @@
  */
 
 import { RuleAction } from '@kbn/alerting-plugin/common';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { getAlertsTableDefaultAlertActionsLazy } from './common/get_alerts_table_default_row_actions';
 import type { TriggersAndActionsUIPublicPluginStart } from './plugin';
 
@@ -50,6 +51,7 @@ import { getRuleSnoozeModalLazy } from './common/get_rule_snooze_modal';
 import { getRulesSettingsLinkLazy } from './common/get_rules_settings_link';
 import { AlertTableConfigRegistry } from './application/alert_table_config_registry';
 import { AlertActionsProps } from './types';
+import { AlertSummaryWidgetDependencies } from './application/sections/alert_summary_widget/types';
 
 function createStartMock(): TriggersAndActionsUIPublicPluginStart {
   const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
@@ -142,7 +144,10 @@ function createStartMock(): TriggersAndActionsUIPublicPluginStart {
       });
     },
     getAlertSummaryWidget: (props) => {
-      return getAlertSummaryWidgetLazy(props);
+      const dependencies: AlertSummaryWidgetDependencies['dependencies'] = {
+        charts: chartPluginMock.createStartContract(),
+      };
+      return getAlertSummaryWidgetLazy({ ...props, dependencies });
     },
     getRuleDefinition: (props) => {
       return getRuleDefinitionLazy({ ...props, actionTypeRegistry, ruleTypeRegistry });
diff --git a/x-pack/plugins/triggers_actions_ui/public/plugin.ts b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
index fa0db949e3b50..218eb01e39d70 100644
--- a/x-pack/plugins/triggers_actions_ui/public/plugin.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
@@ -97,6 +97,7 @@ import { getRuleSnoozeModalLazy } from './common/get_rule_snooze_modal';
 import { getRulesSettingsLinkLazy } from './common/get_rules_settings_link';
 import { getGlobalRuleEventLogListLazy } from './common/get_global_rule_event_log_list';
 import { AlertTableConfigRegistry } from './application/alert_table_config_registry';
+import { AlertSummaryWidgetDependencies } from './application/sections/alert_summary_widget/types';
 
 export interface TriggersAndActionsUIPublicPluginSetup {
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
@@ -559,7 +560,10 @@ export class Plugin
         return getRuleStatusPanelLazy(props);
       },
       getAlertSummaryWidget: (props: AlertSummaryWidgetProps) => {
-        return getAlertSummaryWidgetLazy(props);
+        const dependencies: AlertSummaryWidgetDependencies['dependencies'] = {
+          charts: plugins.charts,
+        };
+        return getAlertSummaryWidgetLazy({ ...props, dependencies });
       },
       getRuleSnoozeModal: (props: RuleSnoozeModalProps) => {
         return getRuleSnoozeModalLazy(props);