Update dependency @elastic/charts to v61 (main)

examples/response_stream/public/containers/app/pages/page_reducer_stream/index.tsx

@@ -8,7 +8,15 @@
 
 import React, { useEffect, useState, FC } from 'react';
 
-import { Chart, Settings, Axis, BarSeries, Position, ScaleType } from '@elastic/charts';
+import {
+  Chart,
+  Settings,
+  Axis,
+  BarSeries,
+  Position,
+  ScaleType,
+  LEGACY_LIGHT_THEME,
+} from '@elastic/charts';
 
 import {
   EuiBadge,
@@ -113,7 +121,11 @@ export const PageReducerStream: FC = () => {
       <EuiSpacer />
       <div style={{ height: '300px' }}>
         <Chart>
-          <Settings rotation={90} />
+          <Settings
+            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
+            baseTheme={LEGACY_LIGHT_THEME}
+            rotation={90}
+          />
           <Axis id="entities" position={Position.Bottom} title="Commits" showOverlappingTicks />
           <Axis id="left2" title="Developers" position={Position.Left} />
 

package.json

@@ -98,7 +98,7 @@
     "@dnd-kit/utilities": "^2.0.0",
     "@elastic/apm-rum": "^5.15.0",
     "@elastic/apm-rum-react": "^2.0.1",
-    "@elastic/charts": "60.0.1",
+    "@elastic/charts": "61.0.3",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.1",

packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx

@@ -29,6 +29,7 @@ import {
   Settings,
   TooltipType,
   Tooltip,
+  PartialTheme,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query';
@@ -223,22 +224,18 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
     };
   }, []);
 
-  const chartTheme = charts.theme.useChartsTheme();
   const chartBaseTheme = charts.theme.useChartsBaseTheme();
-  const customChartTheme: typeof chartTheme = useMemo(() => {
+  const chartThemeOverrides = useMemo<PartialTheme>(() => {
     return color
       ? {
-          ...chartTheme,
           barSeriesStyle: {
-            ...chartTheme.barSeriesStyle,
             rect: {
-              ...(chartTheme.barSeriesStyle?.rect || {}),
               fill: color,
             },
           },
         }
-      : chartTheme;
-  }, [chartTheme, color]);
+      : {};
+  }, [color]);
 
   const {
     isLoading,
@@ -486,7 +483,7 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
               <Tooltip type={TooltipType.None} />
               <Settings
                 locale={i18n.getLocale()}
-                theme={customChartTheme}
+                theme={chartThemeOverrides}
                 baseTheme={chartBaseTheme}
                 xDomain={
                   fromDateParsed && toDateParsed
@@ -538,7 +535,7 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
             <Settings
               locale={i18n.getLocale()}
               rotation={90}
-              theme={customChartTheme}
+              theme={chartThemeOverrides}
               baseTheme={chartBaseTheme}
             />