Update dependency @elastic/charts to v61 (main) (#170914)

[![Mend Renovate logo
banner](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
[`60.0.0` ->
`61.0.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/60.0.0/61.0.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/61.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/61.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/60.0.0/61.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/60.0.0/61.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>elastic/elastic-charts (@&#8203;elastic/charts)</summary>

###
[`v61.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6100-2023-11-08)

[Compare
Source](https://togithub.com/elastic/elastic-charts/compare/v60.0.0...v61.0.0)

##### Bug Fixes

- `onRenderChange` callback trigger on resize
([#&#8203;2228](https://togithub.com/elastic/elastic-charts/issues/2228))
([be30c1b](https://togithub.com/elastic/elastic-charts/commit/be30c1bd48ce3e50b8e9fa28c0d8999b6366b305))
- **axis:** always render `tickLine` unless `visible` is `false`
([#&#8203;2194](https://togithub.com/elastic/elastic-charts/issues/2194))
([ec95d50](https://togithub.com/elastic/elastic-charts/commit/ec95d50180d86fb7cec8c90d952f894ac9548b4f))
- **BarSeries:** ignore histogram mode in determining stacked series
([#&#8203;2225](https://togithub.com/elastic/elastic-charts/issues/2225))
([27b4281](https://togithub.com/elastic/elastic-charts/commit/27b4281581d6d5613c3bac55b308c49c519e7160))
- clamp brushing min of last bucket
([#&#8203;2227](https://togithub.com/elastic/elastic-charts/issues/2227))
([155c22d](https://togithub.com/elastic/elastic-charts/commit/155c22dee1f891cbb630d3d99fae005d89bf76d8))
- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to ^88.5.0
([#&#8203;2179](https://togithub.com/elastic/elastic-charts/issues/2179))
([2bb921e](https://togithub.com/elastic/elastic-charts/commit/2bb921e42bf790ce091178fc66794265a2832c0e))
- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to ^88.5.4
([#&#8203;2190](https://togithub.com/elastic/elastic-charts/issues/2190))
([05b33e5](https://togithub.com/elastic/elastic-charts/commit/05b33e58f27da3685bc8a2668435e83fb260a033))
- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to ^89.1.0
([#&#8203;2212](https://togithub.com/elastic/elastic-charts/issues/2212))
([a91f68d](https://togithub.com/elastic/elastic-charts/commit/a91f68d6b7c19da43a02e2b6d205ddc7f758243b))
- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to v89
([#&#8203;2193](https://togithub.com/elastic/elastic-charts/issues/2193))
([132327d](https://togithub.com/elastic/elastic-charts/commit/132327d980f4941d81a6df5e9e76cdf065f7d744))
- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to v90
([#&#8203;2222](https://togithub.com/elastic/elastic-charts/issues/2222))
([10cd53b](https://togithub.com/elastic/elastic-charts/commit/10cd53b2e6b4f65096837a994aff69626dc4050e))

##### chore

- reclaim charts theme ownership from eui
([#&#8203;2175](https://togithub.com/elastic/elastic-charts/issues/2175))
([422c7d5](https://togithub.com/elastic/elastic-charts/commit/422c7d529e2b2a1bf01d6f78c1e35a2f9c79c91f))

##### Features

- **metric:** allow alpha colors and improve contrast logic
([#&#8203;2184](https://togithub.com/elastic/elastic-charts/issues/2184))
([dd5732e](https://togithub.com/elastic/elastic-charts/commit/dd5732e83b4a23143f6fa8ceb82066150dc9fe8d))

##### BREAKING CHANGES

- **BarSeries:** now ignores histogram mode in determining stacked
series
- elastic charts theme renamed to `LEGACY_DARK_THEME` and
`LEGACY_LIGHT_THEME` in favor of the main `DARK_THEME` and `LIGHT_THEME`
which was merged with eui theme overrides. These new themes are now
default.
- **axis:** Now respects `tickLine.padding` whenever `tickLine.visible`
is `true`

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/elastic/kibana).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40Ni4wIiwidXBkYXRlZEluVmVyIjoiMzcuNDYuMCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: nickofthyme <[email protected]>
Co-authored-by: kibanamachine <[email protected]>

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/[email protected]",
     "@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}
             />