From dbc16cb897a0a3488b65e89406acb34c23b0d67a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 29 May 2024 09:09:10 +0100
Subject: [PATCH] Update dependency @elastic/charts to v65 (main) (#184031)

---
 package.json                                  |  2 +-
 .../partition_vis_component.test.tsx.snap     | 11 +++++-----
 .../components/partition_vis_component.tsx    |  3 +--
 .../__snapshots__/xy_chart.test.tsx.snap      | 20 +++++++++----------
 .../public/components/xy_chart.test.tsx       | 10 ++++++----
 .../public/components/xy_chart.tsx            |  5 +----
 .../components/timelion_vis_component.tsx     |  3 ++-
 .../visualizations/views/timeseries/index.js  | 13 ++++++------
 .../visualize/group5/_tsvb_time_series.ts     |  4 ++--
 .../document_count_chart.tsx                  |  1 -
 .../document_count_chart_singular.tsx         |  1 -
 .../distribution/index.tsx                    |  3 ++-
 .../service_overview/stats/location_stats.tsx |  4 ----
 .../shared/charts/breakdown_chart/index.tsx   |  3 ++-
 .../components/chart_section_vis.tsx          |  3 ++-
 .../components/sections/logs/logs_section.tsx |  5 -----
 .../components/events_chart_panel.tsx         |  1 -
 .../common/good_bad_events_chart.tsx          |  1 -
 .../common/charts/duration_chart.tsx          | 15 ++++++++------
 .../common/components/charts/common.tsx       |  2 +-
 .../alerts_histogram.tsx                      | 14 ++++++++++---
 .../rule_types/threshold/visualization.tsx    |  5 -----
 .../watch_visualization.tsx                   |  3 ++-
 .../apps/observability/exploratory_view.ts    | 13 +++---------
 yarn.lock                                     |  8 ++++----
 25 files changed, 71 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index 8d4fc2fce5b72..cea7de2e2023f 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "@elastic/apm-rum": "^5.16.0",
     "@elastic/apm-rum-core": "^5.21.0",
     "@elastic/apm-rum-react": "^2.0.2",
-    "@elastic/charts": "64.1.0",
+    "@elastic/charts": "65.0.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.13.0",
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
index 3abe1b0971d0b..5951739fd053f 100644
--- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
@@ -788,7 +788,6 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={false}
           theme={
             Array [
               Object {
@@ -1716,7 +1715,6 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={false}
           theme={
             Array [
               Object {
@@ -2708,7 +2706,6 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={false}
           theme={
             Array [
               Object {
@@ -3700,7 +3697,6 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={false}
           theme={
             Array [
               Object {
@@ -4628,7 +4624,6 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={false}
           theme={
             Array [
               Object {
@@ -5505,6 +5500,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
           legendPosition="right"
           legendSize={130}
           legendSort={[Function]}
+          legendValues={
+            Array [
+              "value",
+            ]
+          }
           locale="en"
           noResults={
             <VisualizationNoResults
@@ -5515,7 +5515,6 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
           onElementClick={[Function]}
           onRenderChange={[Function]}
           showLegend={true}
-          showLegendExtra={true}
           theme={
             Array [
               Object {
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
index 4e3017373e2c6..855d32ccc312a 100644
--- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
@@ -39,7 +39,6 @@ import {
 } from '@kbn/expressions-plugin/public';
 import type { FieldFormat } from '@kbn/field-formats-plugin/common';
 import { getOverridesFor } from '@kbn/chart-expressions-common';
-import { PartitionLegendValue } from '@kbn/visualizations-plugin/common/constants';
 import { consolidateMetricColumns } from '../../common/utils';
 import { DEFAULT_PERCENT_DECIMALS } from '../../common/constants';
 import {
@@ -564,7 +563,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                 legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
                 flatLegend={flatLegend}
                 legendSort={customLegendSort}
-                showLegendExtra={visParams.legendStats?.[0] === PartitionLegendValue.Value}
+                legendValues={visParams.legendStats}
                 onElementClick={([elementEvent]) => {
                   // this cast is safe because we are rendering a partition chart
                   const [layerValues] = elementEvent as PartitionElementEvent;
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
index 538a4102f09ff..f421ecb99d18e 100644
--- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
@@ -1130,6 +1130,7 @@ exports[`XYChart component it renders area 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -1145,7 +1146,6 @@ exports[`XYChart component it renders area 1`] = `
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -2680,6 +2680,7 @@ exports[`XYChart component it renders bar 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -2695,7 +2696,6 @@ exports[`XYChart component it renders bar 1`] = `
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -4230,6 +4230,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -4245,7 +4246,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
         pointerUpdateDebounce={0}
         rotation={90}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -5780,6 +5780,7 @@ exports[`XYChart component it renders line 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -5795,7 +5796,6 @@ exports[`XYChart component it renders line 1`] = `
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -7330,6 +7330,7 @@ exports[`XYChart component it renders stacked area 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -7345,7 +7346,6 @@ exports[`XYChart component it renders stacked area 1`] = `
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -8880,6 +8880,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -8895,7 +8896,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -10430,6 +10430,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -10445,7 +10446,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
         pointerUpdateDebounce={0}
         rotation={90}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -12010,6 +12010,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -12025,7 +12026,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -13798,6 +13798,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -13813,7 +13814,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
@@ -15579,6 +15579,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
         }
         legendPosition="top"
         legendSize={130}
+        legendValues={Array []}
         locale="en"
         noResults={
           <EmptyPlaceholder
@@ -15594,7 +15595,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
         pointerUpdateDebounce={0}
         rotation={0}
         showLegend={false}
-        showLegendExtra={false}
         theme={
           Array [
             Object {
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
index cfae463faf2c5..da0997b7988dc 100644
--- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
+++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
@@ -731,10 +731,10 @@ describe('XYChart component', () => {
     });
   });
 
-  test('disabled legend extra by default', () => {
+  test('disabled legend values by default', () => {
     const { args } = sampleArgs();
     const component = shallow(<XYChart {...defaultProps} args={args} />);
-    expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
+    expect(component.find(Settings).at(0).prop('legendValues')).toEqual([]);
   });
 
   test('ignores legend extra for ordinal chart', () => {
@@ -748,7 +748,7 @@ describe('XYChart component', () => {
         }}
       />
     );
-    expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
+    expect(component.find(Settings).at(0).prop('legendValues')).toEqual([]);
   });
 
   test('shows legend extra for histogram chart', () => {
@@ -766,7 +766,9 @@ describe('XYChart component', () => {
         }}
       />
     );
-    expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(true);
+    expect(component.find(Settings).at(0).prop('legendValues')).toEqual([
+      XYLegendValue.CurrentAndLastValue,
+    ]);
   });
 
   test('applies the mark size ratio', () => {
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
index 660e2c95bed2f..17eb637f77c09 100644
--- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
+++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
@@ -51,7 +51,6 @@ import {
 import {
   DEFAULT_LEGEND_SIZE,
   LegendSizeToPixels,
-  XYLegendValue,
 } from '@kbn/visualizations-plugin/common/constants';
 import { PersistedState } from '@kbn/visualizations-plugin/public';
 import { getOverridesFor, ChartSizeSpec } from '@kbn/chart-expressions-common';
@@ -878,9 +877,7 @@ export function XYChart({
                   )
                 : undefined
             }
-            showLegendExtra={
-              isHistogramViz && legend.legendStats?.[0] === XYLegendValue.CurrentAndLastValue
-            }
+            legendValues={isHistogramViz ? legend.legendStats : []}
             ariaLabel={args.ariaLabel}
             ariaUseDefaultSummary={!args.ariaLabel}
             orderOrdinalBinsBy={
diff --git a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
index 983a2ec74c12a..b49f4e33fbb58 100644
--- a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
+++ b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
@@ -18,6 +18,7 @@ import {
   LayoutDirection,
   Placement,
   Tooltip,
+  LegendValue,
 } from '@elastic/charts';
 import { EuiTitle } from '@elastic/eui';
 import { RangeFilterParams } from '@kbn/es-query';
@@ -207,7 +208,7 @@ export const TimelionVisComponent = ({
           debugState={window._echDebugStateFlag ?? false}
           onBrushEnd={brushEndListener}
           showLegend={legend.showLegend}
-          showLegendExtra={true}
+          legendValues={[LegendValue.CurrentAndLastValue]}
           legendPosition={legend.legendPosition}
           onRenderChange={onRenderChange}
           onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
index 0874ef8593258..3671a2fb64bbc 100644
--- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
@@ -11,11 +11,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
 import {
-  MULTILAYER_TIME_AXIS_STYLE,
-  renderEndzoneTooltip,
-  useActiveCursor,
-} from '@kbn/charts-plugin/public';
-import {
+  LegendValue,
   Axis,
   Chart,
   Position,
@@ -27,6 +23,11 @@ import {
   Placement,
   Tooltip,
 } from '@elastic/charts';
+import {
+  MULTILAYER_TIME_AXIS_STYLE,
+  renderEndzoneTooltip,
+  useActiveCursor,
+} from '@kbn/charts-plugin/public';
 import { EuiIcon } from '@elastic/eui';
 import { getTimeZone } from '@kbn/visualization-utils';
 import { getUISettings, getCharts } from '../../../../services';
@@ -183,7 +184,7 @@ export const TimeSeries = ({
       <Settings
         debugState={window._echDebugStateFlag ?? false}
         showLegend={legend}
-        showLegendExtra={true}
+        legendValues={[LegendValue.CurrentAndLastValue]}
         onRenderChange={onRenderChange}
         allowBrushingLastHistogramBin={true}
         legendPosition={legendPosition}
diff --git a/test/functional/apps/visualize/group5/_tsvb_time_series.ts b/test/functional/apps/visualize/group5/_tsvb_time_series.ts
index 2f3c2d5027f40..55c59e38f359a 100644
--- a/test/functional/apps/visualize/group5/_tsvb_time_series.ts
+++ b/test/functional/apps/visualize/group5/_tsvb_time_series.ts
@@ -433,11 +433,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
             await visualBuilder.clickSeriesLegendItem('png');
             await visualBuilder.clickSeriesLegendItem('php');
             legendNames = await visualBuilder.getLegendNames();
-            expect(legendNames).to.eql(['jpg', 'css', 'gif']);
+            expect(legendNames).to.eql(['png', 'php']);
 
             await visualize.clickRefresh(true);
             legendNames = await visualBuilder.getLegendNames();
-            expect(legendNames).to.eql(['jpg', 'css', 'gif']);
+            expect(legendNames).to.eql(['png', 'php']);
           });
         });
 
diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
index 02c532d186704..08dcaa824866c 100644
--- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
+++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@@ -492,7 +492,6 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
             baseTheme={chartBaseTheme}
             debugState={window._echDebugStateFlag ?? false}
             showLegend={false}
-            showLegendExtra={false}
             locale={i18n.getLocale()}
           />
           <Axis id="aiops-histogram-left-axis" position={Position.Left} ticks={2} integersOnly />
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/document_count_chart_singular.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/document_count_chart_singular.tsx
index 401ff27e73a9b..3a04783b41ebc 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/document_count_chart_singular.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/document_count_chart_singular.tsx
@@ -427,7 +427,6 @@ export const DocumentCountChartWithBrush: FC<DocumentCountChartProps> = (props)
             baseTheme={chartBaseTheme}
             debugState={window._echDebugStateFlag ?? false}
             showLegend={false}
-            showLegendExtra={false}
             locale={i18n.getLocale()}
           />
           <Axis
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx
index d5f88d8acd149..b8902b30dcff2 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx
@@ -16,6 +16,7 @@ import {
   Tooltip,
   LIGHT_THEME,
   DARK_THEME,
+  LegendValue,
 } from '@elastic/charts';
 import { EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -94,7 +95,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
           <Settings
             xDomain={{ min, max }}
             showLegend
-            showLegendExtra
+            legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition={Position.Bottom}
             theme={theme.darkMode ? DARK_THEME : LIGHT_THEME}
             locale={i18n.getLocale()}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx
index aad74697628a2..b59246cf27e1f 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx
@@ -117,7 +117,6 @@ export function MobileLocationStats({
       }),
       icon: getIcon('visBarHorizontal'),
       value: currentPeriod?.mostRequests.location ?? NOT_AVAILABLE_LABEL,
-      valueFormatter: (value) => `${value}`,
       trend: currentPeriod?.mostRequests.timeseries,
       trendShape: MetricTrendShape.Area,
     },
@@ -132,7 +131,6 @@ export function MobileLocationStats({
       }),
       icon: getIcon('bug'),
       value: currentPeriod?.mostCrashes.location ?? NOT_AVAILABLE_LABEL,
-      valueFormatter: (value) => `${value}`,
       trend: currentPeriod?.mostCrashes.timeseries,
       trendShape: MetricTrendShape.Area,
     },
@@ -147,7 +145,6 @@ export function MobileLocationStats({
       }),
       icon: getIcon('timeslider'),
       value: currentPeriod?.mostSessions.location ?? NOT_AVAILABLE_LABEL,
-      valueFormatter: (value) => `${value}`,
       trend: currentPeriod?.mostSessions.timeseries,
       trendShape: MetricTrendShape.Area,
     },
@@ -162,7 +159,6 @@ export function MobileLocationStats({
       }),
       icon: getIcon('launch'),
       value: currentPeriod?.mostLaunches.location ?? NOT_AVAILABLE_LABEL,
-      valueFormatter: (value) => `${value}`,
       trend: currentPeriod?.mostLaunches.timeseries,
       trendShape: MetricTrendShape.Area,
     },
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx
index 12abc7fff623b..8103f729f375a 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx
@@ -19,6 +19,7 @@ import {
   TickFormatter,
   XYBrushEvent,
   Tooltip,
+  LegendValue,
 } from '@elastic/charts';
 import { EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -100,7 +101,7 @@ export function BreakdownChart({
         <Settings
           onBrushEnd={(event) => onBrushEnd({ x: (event as XYBrushEvent).x, history })}
           showLegend
-          showLegendExtra
+          legendValues={[LegendValue.CurrentAndLastValue]}
           legendPosition={Position.Bottom}
           theme={chartThemes.theme}
           baseTheme={chartThemes.baseTheme}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
index 3f56c643d662e..5840d13c94326 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
@@ -17,6 +17,7 @@ import {
   BrushEndListener,
   TooltipProps,
   Tooltip,
+  LegendValue,
 } from '@elastic/charts';
 import { EuiPageSection } from '@elastic/eui';
 import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
@@ -137,7 +138,7 @@ export const ChartSectionVis = ({
             onBrushEnd={handleTimeChange}
             baseTheme={chartTheme.baseTheme}
             showLegend
-            showLegendExtra
+            legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition="right"
             locale={i18n.getLocale()}
           />
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/logs/logs_section.tsx b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/logs/logs_section.tsx
index 2651cef2191d0..de8e95441a90d 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/logs/logs_section.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/logs/logs_section.tsx
@@ -142,11 +142,6 @@ export function LogsSection({ bucketSize }: Props) {
           showLegend
           legendPosition={Position.Right}
           xDomain={{ min, max }}
-          // Please double check if the data passed to the chart contains all the buckets, even the empty ones.
-          // the showLegendExtra will display the last element of the data array as the default legend value
-          // and if empty buckets are filtered out you can probably see a value that doesn't correspond
-          // to the value in the last time bucket visualized.
-          // showLegendExtra
           locale={i18n.getLocale()}
         />
         {series &&
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
index bb99a6ce7c2c6..ac2cef18e9561 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
@@ -211,7 +211,6 @@ export function EventsChartPanel({ slo, range, selectedTabId, onBrushed }: Props
                   <Settings
                     baseTheme={baseTheme}
                     showLegend={slo.indicator.type !== 'sli.metric.timeslice'}
-                    showLegendExtra={false}
                     legendPosition={Position.Left}
                     noResults={
                       <EuiIcon
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
index 6d65c4e344d3d..242500d4d9efd 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
@@ -99,7 +99,6 @@ export function GoodBadEventsChart({
           <Settings
             baseTheme={baseTheme}
             showLegend={true}
-            showLegendExtra={false}
             legendPosition={Position.Left}
             noResults={
               <EuiIcon
diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
index d85654b195c6d..7acaa9ac2f935 100644
--- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
+++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
@@ -106,11 +106,6 @@ export const DurationChartComponent = ({
           <Settings
             xDomain={{ min, max }}
             showLegend
-            // Please double check if the data passed to the chart contains all the buckets, even the empty ones.
-            // the showLegendExtra will display the last element of the data array as the default legend value
-            // and if empty buckets are filtered out you can probably see a value that doesn't correspond
-            // to the value in the last time bucket visualized.
-            // showLegendExtra
             legendPosition={Position.Right}
             onBrushEnd={onBrushEnd}
             onLegendItemClick={legendToggleVisibility}
@@ -149,7 +144,15 @@ export const DurationChartComponent = ({
             <FormattedMessage
               id="xpack.uptime.durationChart.emptyPrompt.description"
               defaultMessage="This monitor has never been {emphasizedText} during the selected time range."
-              values={{ emphasizedText: <strong>up</strong> }}
+              values={{
+                emphasizedText: (
+                  <strong>
+                    {i18n.translate('xpack.uptime.durationChartComponent.strong.upLabel', {
+                      defaultMessage: 'up',
+                    })}
+                  </strong>
+                ),
+              }}
             />
           }
           title={i18n.translate('xpack.uptime.durationChart.emptyPrompt.title', {
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
index 05edabafcff7c..120fb6977b0de 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
@@ -125,7 +125,7 @@ export const chartDefaultSettings: SettingsProps = {
   rotation: chartDefaultRotation,
   rendering: chartDefaultRendering,
   showLegend: false,
-  showLegendExtra: false,
+  legendValues: [],
   debug: false,
   legendPosition: Position.Bottom,
 };
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
index 9f96b375abc98..83052e4e5a2f1 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
@@ -7,7 +7,15 @@
 
 import type { ChartSizeArray } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { Axis, Chart, HistogramBarSeries, Position, Settings, ScaleType } from '@elastic/charts';
+import {
+  Axis,
+  Chart,
+  HistogramBarSeries,
+  Position,
+  Settings,
+  ScaleType,
+  LegendValue,
+} from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
@@ -77,9 +85,9 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
               <Settings
                 legendPosition={legendPosition}
                 onBrushEnd={updateDateRange}
-                // showLegend controls the default legend coming from Elastic chart, we show them when our customised legend items doesn't exist (but we still want to show legend).
+                // showLegend controls the default legend coming from @elastic/charts, we show them when our customized legend items don't exist (but we still want to show legend).
                 showLegend={showLegend && legendItems.length === 0}
-                showLegendExtra={showLegend}
+                legendValues={showLegend ? [LegendValue.CurrentAndLastValue] : []}
                 theme={theme}
                 baseTheme={baseTheme}
                 locale={i18n.getLocale()}
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx
index aee314a86cd78..f31dc2fab4383 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx
@@ -270,11 +270,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
               baseTheme={chartsBaseTheme}
               xDomain={domain}
               showLegend={!!termField}
-              // Please double check if the data passed to the chart contains all the buckets, even the empty ones.
-              // the showLegendExtra will display the last element of the data array as the default legend value
-              // and if empty buckets are filtered out you can probably see a value that doesn't correspond
-              // to the value in the last time bucket visualized.
-              // showLegendExtra
               legendPosition={Position.Bottom}
               locale={i18n.getLocale()}
             />
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx
index 72850ccec21a0..7b009ec744f5a 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx
@@ -10,6 +10,7 @@ import {
   AnnotationDomainType,
   Axis,
   Chart,
+  LegendValue,
   LineAnnotation,
   LineSeries,
   PartialTheme,
@@ -221,7 +222,7 @@ export const WatchVisualization = () => {
               baseTheme={chartBaseTheme}
               xDomain={domain}
               showLegend={!!watch.termField}
-              showLegendExtra
+              legendValues={[LegendValue.CurrentAndLastValue]}
               legendPosition={Position.Bottom}
               locale={i18n.getLocale()}
             />
diff --git a/x-pack/test/observability_functional/apps/observability/exploratory_view.ts b/x-pack/test/observability_functional/apps/observability/exploratory_view.ts
index 9aa33a8e9f652..8f6dadb4687a5 100644
--- a/x-pack/test/observability_functional/apps/observability/exploratory_view.ts
+++ b/x-pack/test/observability_functional/apps/observability/exploratory_view.ts
@@ -85,16 +85,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await PageObjects.header.waitUntilLoadingHasFinished();
 
-      expect(
-        await find.existsByCssSelector(
-          '[aria-label="Chrome Mobile iOS; Activate to hide series in graph"]'
-        )
-      ).to.eql(true);
-      expect(
-        await find.existsByCssSelector(
-          '[aria-label="Mobile Safari; Activate to hide series in graph"]'
-        )
-      ).to.eql(true);
+      // if breakdown we should have multiple legend items
+      const legendItems = await find.allByCssSelector('.echLegendItem');
+      expect(legendItems.length).to.be(11);
     });
   });
 }
diff --git a/yarn.lock b/yarn.lock
index caa1bc8afa0b9..a998dbdc4cdaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1650,10 +1650,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@64.1.0":
-  version "64.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.1.0.tgz#aa52332cec68ea52be25e387774267027311b8ca"
-  integrity sha512-jZ9fnujjzHd24m0Fv5zURbxrb/MzIRUwlvyocjAn/y2yLHhlqMK6XWHfMoqIAgZ0iVVojfEPXnnc34PPT4KDIA==
+"@elastic/charts@65.0.0":
+  version "65.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-65.0.0.tgz#96a912ecf15361b3e5e041bb890783ae123d1971"
+  integrity sha512-Cc28w3t73vtYJRgbbHP+eiCBm26bHmlwvEdO+kWm6ZVKrC21zJJt41AYXdy7yOU1fJseJkZ5TqT1Y8qHl5FoiQ==
   dependencies:
     "@popperjs/core" "^2.11.8"
     bezier-easing "^2.1.0"