[8.x] Update dependency @elastic/charts to v68.0.4 (main) (#203955) (#206127)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Update dependency @elastic/charts to v68.0.4 (main)
(#203955)](https://github.com/elastic/kibana/pull/203955)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

---------

Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

.github/CODEOWNERS

@@ -75,6 +75,7 @@ src/platform/packages/shared/kbn-cell-actions @elastic/security-threat-hunting-e
 src/plugins/chart_expressions/common @elastic/kibana-visualizations
 packages/kbn-chart-icons @elastic/kibana-visualizations
 src/plugins/charts @elastic/kibana-visualizations
+packages/kbn-charts-theme @elastic/kibana-visualizations
 packages/kbn-check-mappings-update-cli @elastic/kibana-core
 packages/kbn-check-prod-native-modules-cli @elastic/kibana-operations
 packages/kbn-ci-stats-core @elastic/kibana-operations

package.json

@@ -111,7 +111,7 @@
     "@elastic/apm-rum": "^5.16.1",
     "@elastic/apm-rum-core": "^5.21.1",
     "@elastic/apm-rum-react": "^2.0.3",
-    "@elastic/charts": "68.0.3",
+    "@elastic/charts": "68.0.4",
     "@elastic/datemath": "5.0.3",
     "@elastic/ebt": "^1.1.1",
     "@elastic/ecs": "^8.11.5",
@@ -208,6 +208,7 @@
     "@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
+    "@kbn/charts-theme": "link:packages/kbn-charts-theme",
     "@kbn/cloud": "link:src/platform/packages/shared/cloud",
     "@kbn/cloud-chat-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_chat",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_data_migration",

packages/kbn-charts-theme/README.md

@@ -0,0 +1,24 @@
+# @kbn/charts-theme
+
+A temporary package to provide a hook for getting `@elastic/charts` theme based on `@elastic/eui` theme.
+
+To be refactored to be consumed from `ElasticChartsProvider`.
+
+```tsx
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+import { Chart, Settings } from '@elastic/charts';
+
+export function MyComponent() {
+  const baseTheme = useElasticChartsTheme();
+
+  return (
+    <Chart>
+      <Settings
+        baseTheme={baseTheme}
+        {/* ... */}
+      />
+      {/* ... */}
+    </Chart>
+  )
+}
+```

packages/kbn-charts-theme/index.ts

@@ -0,0 +1,23 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type Theme, getChartsTheme } from '@elastic/charts';
+import { useEuiTheme } from '@elastic/eui';
+import { useMemo } from 'react';
+
+/**
+ * A hook used to get the `@elastic/charts` theme based on the current eui theme.
+ */
+export function useElasticChartsTheme(): Theme {
+  const { euiTheme, colorMode } = useEuiTheme();
+  return useMemo(
+    () => getChartsTheme(euiTheme.themeName, colorMode),
+    [colorMode, euiTheme.themeName]
+  );
+}

packages/kbn-charts-theme/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-charts-theme'],
+};

packages/kbn-charts-theme/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/charts-theme",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-charts-theme/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/charts-theme",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}

packages/kbn-charts-theme/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": []
+}

src/platform/packages/shared/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx

@@ -8,11 +8,14 @@
  */
 
 import React from 'react';
-import { Chart, Settings, DARK_THEME, LIGHT_THEME, BarSeries, Axis } from '@elastic/charts';
-import { formatDate, useEuiTheme } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 
+import { Chart, Settings, BarSeries, Axis } from '@elastic/charts';
+import { formatDate } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+
 const dateFormatter = (d: Date) => formatDate(d, `MM/DD`);
 
 const seriesName = i18n.translate('contentManagement.contentEditor.viewsStats.viewsLabel', {
@@ -26,8 +29,7 @@ const weekOfFormatter = (date: Date) =>
   });
 
 export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]> }) => {
-  const { colorMode } = useEuiTheme();
-
+  const baseTheme = useElasticChartsTheme();
   const momentDow = moment().localeData().firstDayOfWeek(); // configured from advanced settings
   const isoDow = momentDow === 0 ? 7 : momentDow;
 
@@ -35,11 +37,7 @@ export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]
 
   return (
     <Chart size={{ height: 240 }}>
-      <Settings
-        baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
-        showLegend={false}
-        dow={isoDow}
-      />
+      <Settings baseTheme={baseTheme} showLegend={false} dow={isoDow} />
       <BarSeries
         id="viewsOverTime"
         name={seriesName}

src/platform/packages/shared/content-management/content_insights/content_insights_public/tsconfig.json

@@ -28,5 +28,6 @@
     "@kbn/core-http-browser",
     "@kbn/content-management-content-insights-server",
     "@kbn/content-management-table-list-view-common",
+    "@kbn/charts-theme",
   ]
 }

src/plugins/charts/public/services/theme/theme.test.tsx

@@ -72,7 +72,7 @@ describe('ThemeService', () => {
     });
   });
 
-  describe('useBaseChartTheme', () => {
+  describe('useChartsBaseTheme', () => {
     it('updates when the theme setting change', () => {
       setUpMockTheme.theme$ = createTheme$Mock(false);
       const themeService = new ThemeService();

tsconfig.base.json

@@ -144,6 +144,8 @@
       "@kbn/chart-icons/*": ["packages/kbn-chart-icons/*"],
       "@kbn/charts-plugin": ["src/plugins/charts"],
       "@kbn/charts-plugin/*": ["src/plugins/charts/*"],
+      "@kbn/charts-theme": ["packages/kbn-charts-theme"],
+      "@kbn/charts-theme/*": ["packages/kbn-charts-theme/*"],
       "@kbn/check-mappings-update-cli": ["packages/kbn-check-mappings-update-cli"],
       "@kbn/check-mappings-update-cli/*": ["packages/kbn-check-mappings-update-cli/*"],
       "@kbn/check-prod-native-modules-cli": ["packages/kbn-check-prod-native-modules-cli"],

x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx

@@ -6,7 +6,7 @@
  */
 import React, { useCallback, useMemo } from 'react';
 
-import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
 import {
   Chart,
   Axis,
@@ -14,10 +14,9 @@ import {
   Settings,
   ScaleType,
   niceTimeFormatter,
-  DARK_THEME,
-  LIGHT_THEME,
   LineSeries,
 } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { i18n } from '@kbn/i18n';
 import { LegendAction } from './legend_action';
 import { type MetricTypes, type MetricSeries } from '../../../common/rest_types';
@@ -49,7 +48,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
   popoverOpen,
   togglePopover,
 }) => {
-  const theme = useEuiTheme();
+  const baseTheme = useElasticChartsTheme();
 
   const chartTimestamps = series.flatMap((stream) => stream.data.map((d) => d.x));
 
@@ -97,7 +96,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
         </EuiTitle>
         <Chart size={{ height: 200 }}>
           <Settings
-            theme={theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
+            baseTheme={baseTheme}
             showLegend={true}
             legendPosition="right"
             xDomain={{ min: minTimestamp, max: maxTimestamp }}

x-pack/platform/plugins/private/data_usage/tsconfig.json

@@ -35,6 +35,7 @@
     "@kbn/datemath",
     "@kbn/ui-theme",
     "@kbn/i18n-react",
+    "@kbn/charts-theme",
   ],
   "exclude": ["target/**/*"]
 }

x-pack/platform/plugins/shared/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx

@@ -7,25 +7,18 @@
 
 import type { FC } from 'react';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import {
-  Chart,
-  Settings,
-  Partition,
-  PartitionLayout,
-  DARK_THEME,
-  LIGHT_THEME,
-} from '@elastic/charts';
+import { Chart, Settings, Partition, PartitionLayout } from '@elastic/charts';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import type { MemoryUsageInfo } from '../../../../common/types/trained_models';
 import type { JobType, MlSavedObjectType } from '../../../../common/types/saved_objects';
 import { useTrainedModelsApiService } from '../../services/ml_api_service/trained_models';
 import { LoadingWrapper } from '../../jobs/new_job/pages/components/charts/loading_wrapper';
-import { useFieldFormatter, useMlKibana } from '../../contexts/kibana';
+import { useFieldFormatter } from '../../contexts/kibana';
 
 import { useRefresh } from '../../routing/use_refresh';
 import { getMemoryItemColor } from '../memory_item_colors';
@@ -61,12 +54,7 @@ const TYPE_LABELS_INVERTED = Object.entries(TYPE_LABELS).reduce<Record<MlSavedOb
 );
 
 export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
-  const {
-    services: { theme: themeService },
-  } = useMlKibana();
-  const isDarkTheme = useIsDarkTheme(themeService);
-
-  const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]);
+  const baseTheme = useElasticChartsTheme();
 
   const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures();
 

x-pack/platform/plugins/shared/ml/tsconfig.json

@@ -138,5 +138,6 @@
     "@kbn/core-ui-settings-server",
     "@kbn/core-security-server",
     "@kbn/response-ops-rule-params",
+    "@kbn/charts-theme"
   ]
 }

x-pack/platform/plugins/shared/triggers_actions_ui/.storybook/decorator.tsx

@@ -15,7 +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 { useElasticChartsTheme } from '@kbn/charts-theme';
 import { KibanaContextProvider } from '../public/common/lib/kibana';
 import { ExperimentalFeaturesService } from '../public/common/experimental_features_service';
 import { getHttp } from './context/http';
@@ -74,6 +74,9 @@ export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDec
       isUsingRuleCreateFlyout: false,
     },
   });
+
+  const baseTheme = useElasticChartsTheme();
+
   return (
     <I18nProvider>
       <EuiThemeProvider darkMode={darkMode}>
@@ -99,7 +102,7 @@ export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDec
               ruleTypeRegistry: getRuleTypeRegistry(),
               charts: {
                 theme: {
-                  useChartsBaseTheme: () => (darkMode ? DARK_THEME : LIGHT_THEME),
+                  useChartsBaseTheme: () => baseTheme,
                   useSparklineOverrides: () => ({
                     lineSeriesStyle: {
                       point: {

x-pack/platform/plugins/shared/triggers_actions_ui/tsconfig.json

@@ -74,7 +74,8 @@
     "@kbn/core-application-browser",
     "@kbn/cloud-plugin",
     "@kbn/response-ops-rule-form",
-    "@kbn/core-user-profile-browser-mocks"
+    "@kbn/core-user-profile-browser-mocks",
+    "@kbn/charts-theme"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/observability/plugins/apm/public/components/alerting/ui_components/chart_preview/index.tsx

@@ -26,6 +26,7 @@ import type { TimeUnitChar } from '@kbn/observability-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import type { Coordinate } from '../../../../../typings/timeseries';
 import { useTheme } from '../../../../hooks/use_theme';
 import { getTimeZone } from '../../../shared/charts/helper/timezone';
@@ -52,6 +53,7 @@ export function ChartPreview({
   totalGroups,
 }: ChartPreviewProps) {
   const theme = useTheme();
+  const baseTheme = useElasticChartsTheme();
   const thresholdOpacity = 0.3;
   const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
 
@@ -120,6 +122,7 @@ export function ChartPreview({
           legendPosition={'bottom'}
           legendSize={legendSize}
           locale={i18n.getLocale()}
+          baseTheme={baseTheme}
         />
         <LineAnnotation
           dataValues={[{ dataValue: threshold }]}

x-pack/solutions/observability/plugins/apm/public/components/app/error_group_details/distribution/index.tsx

@@ -14,18 +14,16 @@ import {
   ScaleType,
   Settings,
   Tooltip,
-  LIGHT_THEME,
-  DARK_THEME,
   LegendValue,
 } from '@elastic/charts';
 import { EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import type { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_text';
-import { useTheme } from '../../../../hooks/use_theme';
 import type { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import { ChartContainer } from '../../../shared/charts/chart_container';
 import { ChartType, getTimeSeriesColor } from '../../../shared/charts/helper/get_timeseries_color';
@@ -42,7 +40,7 @@ interface Props {
 
 export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
   const { core } = useApmPluginContext();
-  const theme = useTheme();
+  const baseTheme = useElasticChartsTheme();
 
   const { urlParams } = useLegacyUrlParams();
   const { comparisonEnabled } = urlParams;
@@ -97,7 +95,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
             showLegend
             legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition={Position.Bottom}
-            theme={theme.darkMode ? DARK_THEME : LIGHT_THEME}
+            baseTheme={baseTheme}
             locale={i18n.getLocale()}
           />
           <Axis

x-pack/solutions/observability/plugins/apm/tsconfig.json

@@ -129,6 +129,7 @@
     "@kbn/alerting-comparators",
     "@kbn/saved-search-component",
     "@kbn/saved-search-plugin",
+    "@kbn/charts-theme",
     "@kbn/entityManager-plugin",
     "@kbn/response-ops-rule-params"
   ],

x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { LEGACY_LIGHT_THEME } from '@elastic/charts';
 import { EuiPanel } from '@elastic/eui';
 import {
   ALERT_CONTEXT,
@@ -15,11 +14,11 @@ import {
   ALERT_START,
 } from '@kbn/rule-data-utils';
 import moment from 'moment';
-import { useTheme } from '@emotion/react';
 import { EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
 import { get, identity } from 'lodash';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useLogView } from '@kbn/logs-shared-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
 import {
@@ -39,7 +38,7 @@ const formatThreshold = (threshold: number) => String(threshold);
 
 const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => {
   const { logsShared } = useKibanaContextForPlugin().services;
-  const theme = useTheme();
+  const baseTheme = useElasticChartsTheme();
   const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]);
   const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined;
   const interval = `${rule.params.timeSize}${rule.params.timeUnit}`;
@@ -93,8 +92,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ baseTheme }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id={'threshold-ratio-chart'}
                 thresholds={[rule.params.count.value]}
@@ -161,8 +159,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ baseTheme }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id="logCountThreshold"
                 thresholds={[rule.params.count.value]}

x-pack/solutions/observability/plugins/infra/tsconfig.json

@@ -120,7 +120,8 @@
     "@kbn/observability-utils-common",
     "@kbn/core-plugins-server",
     "@kbn/config",
-    "@kbn/response-ops-rule-params"
+    "@kbn/response-ops-rule-params",
+    "@kbn/charts-theme"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts

@@ -5,14 +5,12 @@
  * 2.0.
  */
 
-import { DARK_THEME, LIGHT_THEME, PartialTheme } from '@elastic/charts';
-import { useEuiTheme } from '@elastic/eui';
+import { PartialTheme } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useMemo } from 'react';
 
 export function useChartTheme() {
-  const theme = useEuiTheme();
-
-  const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
+  const baseTheme = useElasticChartsTheme();
 
   return useMemo(() => {
     const themeOverrides: PartialTheme = {

x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json

@@ -80,6 +80,7 @@
     "@kbn/observability-ai-common",
     "@kbn/llm-tasks-plugin",
     "@kbn/product-doc-common",
+    "@kbn/charts-theme",
     "@kbn/ai-assistant-icon",
   ],
   "exclude": [

x-pack/solutions/observability/plugins/observability_shared/public/hooks/use_chart_theme.tsx

@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import { LIGHT_THEME, DARK_THEME, PartialTheme, Theme } from '@elastic/charts';
+import { PartialTheme, Theme } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useMemo } from 'react';
-import { useTheme } from './use_theme';
 
 export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } {
-  const theme = useTheme();
-  const baseTheme = theme.darkMode ? DARK_THEME : LIGHT_THEME;
+  const baseTheme = useElasticChartsTheme();
 
   return useMemo(() => {
     const themeOverrides: PartialTheme = {

x-pack/solutions/observability/plugins/observability_shared/tsconfig.json

@@ -46,6 +46,7 @@
     "@kbn/es-query",
     "@kbn/serverless",
     "@kbn/data-views-plugin",
+    "@kbn/charts-theme",
     "@kbn/deeplinks-observability",
   ],
   "exclude": ["target/**/*", ".storybook/**/*.js"]

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx

@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
-import { DARK_THEME } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
 import moment from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
@@ -132,8 +132,7 @@ export const MetricItem = ({
                 });
               }
             }}
-            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-            baseTheme={DARK_THEME}
+            baseTheme={useElasticChartsTheme()}
             locale={i18n.getLocale()}
           />
           <Metric

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx

@@ -23,7 +23,7 @@ import {
 import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useAppFixedViewport } from '@kbn/core-rendering-browser';
-import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { BAR_HEIGHT } from './constants';
 import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
 import { WaterfallData } from '../../common/network_data/types';
@@ -80,7 +80,7 @@ export const WaterfallBarChart = ({
   barStyleAccessor,
   index,
 }: Props) => {
-  const baseChartTheme = useBaseChartTheme();
+  const baseChartTheme = useElasticChartsTheme();
   const { euiTheme } = useEuiTheme();
   const { onElementClick, onProjectionClick } = useWaterfallContext();
   const handleElementClick = useMemo(() => onElementClick, [onElementClick]);

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx

@@ -21,7 +21,7 @@ import {
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { WaterfallChartFixedAxisContainer } from './styles';
 import { WaterfallChartMarkers } from './waterfall_marker/waterfall_markers';
 
@@ -32,7 +32,7 @@ interface Props {
 }
 
 export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
-  const baseChartTheme = useBaseChartTheme();
+  const baseChartTheme = useElasticChartsTheme();
   const { euiTheme } = useEuiTheme();
 
   return (

x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts

@@ -1,18 +0,0 @@
-/*
- * 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 { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
-import { useMemo } from 'react';
-import { useDarkMode } from '@kbn/kibana-react-plugin/public';
-
-export const useBaseChartTheme = (): Theme => {
-  const darkMode = useDarkMode(false);
-
-  return useMemo(() => {
-    return darkMode ? DARK_THEME : LIGHT_THEME;
-  }, [darkMode]);
-};

x-pack/solutions/observability/plugins/synthetics/tsconfig.json

@@ -108,7 +108,8 @@
     "@kbn/index-lifecycle-management-common-shared",
     "@kbn/core-http-server-utils",
     "@kbn/apm-data-access-plugin",
-    "@kbn/response-ops-rule-params"
+    "@kbn/response-ops-rule-params",
+    "@kbn/charts-theme"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx

@@ -21,9 +21,9 @@ import {
   Tooltip,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useAppFixedViewport } from '@kbn/core-rendering-browser';
 import { BAR_HEIGHT } from './constants';
-import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
 import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
 import { useWaterfallContext, WaterfallData } from '..';
 import { WaterfallTooltipContent } from './waterfall_tooltip_content';
@@ -76,7 +76,7 @@ export const WaterfallBarChart = ({
   barStyleAccessor,
   index,
 }: Props) => {
-  const baseChartTheme = useBaseChartTheme();
+  const baseChartTheme = useElasticChartsTheme();
   const { onElementClick, onProjectionClick } = useWaterfallContext();
   const handleElementClick = useMemo(() => onElementClick, [onElementClick]);
   const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]);

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx

@@ -20,7 +20,7 @@ import {
   Tooltip,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { WaterfallChartFixedAxisContainer } from './styles';
 import { WaterfallChartMarkers } from './waterfall_markers';
 
@@ -31,7 +31,7 @@ interface Props {
 }
 
 export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
-  const baseChartTheme = useBaseChartTheme();
+  const baseChartTheme = useElasticChartsTheme();
 
   return (
     <WaterfallChartFixedAxisContainer>

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts

@@ -1,17 +0,0 @@
-/*
- * 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 { useMemo } from 'react';
-import { useDarkMode } from '@kbn/kibana-react-plugin/public';
-import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
-
-export const useBaseChartTheme = (): Theme => {
-  const darkMode = useDarkMode();
-  return useMemo(() => {
-    return darkMode ? DARK_THEME : LIGHT_THEME;
-  }, [darkMode]);
-};

x-pack/solutions/observability/plugins/uptime/tsconfig.json

@@ -80,6 +80,7 @@
     "@kbn/ebt-tools",
     "@kbn/core-rendering-browser",
     "@kbn/response-ops-rule-params",
+    "@kbn/charts-theme"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx

@@ -16,11 +16,11 @@ import {
   EuiBasicTable,
   EuiHealth,
   EuiText,
-  useEuiTheme,
 } from '@elastic/eui';
-import { Chart, BarSeries, Settings, ScaleType, DARK_THEME, LIGHT_THEME } from '@elastic/charts';
+import { Chart, BarSeries, Settings, ScaleType } from '@elastic/charts';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { PanelText } from '../../../../common/components/panel_text';
 import {
   convertTranslationResultIntoText,
@@ -120,7 +120,7 @@ MigrationResultPanel.displayName = 'MigrationResultPanel';
 const TranslationResultsChart = React.memo<{
   translationStats: RuleMigrationTranslationStats;
 }>(({ translationStats }) => {
-  const { colorMode } = useEuiTheme();
+  const baseTheme = useElasticChartsTheme();
   const translationResultColors = useResultVisColors();
   const data = [
     {
@@ -154,11 +154,7 @@ const TranslationResultsChart = React.memo<{
 
   return (
     <Chart size={{ height: 130 }}>
-      <Settings
-        showLegend={false}
-        rotation={90}
-        baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
-      />
+      <Settings showLegend={false} rotation={90} baseTheme={baseTheme} />
       <BarSeries
         id="results"
         name="Results"

x-pack/solutions/security/plugins/security_solution/tsconfig.json

@@ -233,5 +233,6 @@
     "@kbn/core-chrome-browser-mocks",
     "@kbn/ai-assistant-icon",
     "@kbn/llm-tasks-plugin",
+    "@kbn/charts-theme"
   ]
 }

yarn.lock

@@ -2242,10 +2242,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@68.0.3":
-  version "68.0.3"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-68.0.3.tgz#dc4aaeb4cdc8751d5759b58dc9958efb3c2639da"
-  integrity sha512-U+NCTo2LCDDSVkV5kGinhzbiAvfEcVAZ4D2YM/0RZQFRvJfJBvelbG+jDkt6N2mEauJ4ECDDcb33995fbs71TA==
+"@elastic/charts@68.0.4":
+  version "68.0.4"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-68.0.4.tgz#b35a4734e4e36ef894432a3ff882a0e4329ffe4c"
+  integrity sha512-kn9FEm2osJBitbbqCRcuZ3ygrLHelUm9i9bCAcY/t3vXfT7tDjhvgueAjm5gQas7/NcASN8LWEykLktGo3mrxQ==
   dependencies:
     "@popperjs/core" "^2.11.8"
     bezier-easing "^2.1.0"
@@ -4140,6 +4140,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/charts-theme@link:packages/kbn-charts-theme":
+  version "0.0.0"
+  uid ""
+
 "@kbn/check-mappings-update-cli@link:packages/kbn-check-mappings-update-cli":
   version "0.0.0"
   uid ""