[8.13] Update dependency @elastic/charts to v64 (main) (#176872) (#177526)

# Backport

This will backport the following commits from `main` to `8.13`:
- [Update dependency @elastic/charts to v64 (main)
(#176872)](https://github.com/elastic/kibana/pull/176872)

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

package.json

@@ -101,7 +101,7 @@
     "@dnd-kit/utilities": "^2.0.0",
     "@elastic/apm-rum": "^5.16.0",
     "@elastic/apm-rum-react": "^2.0.2",
-    "@elastic/charts": "63.1.0",
+    "@elastic/charts": "64.0.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",

src/plugins/chart_expressions/common/chart_size_transition_veil.tsx

@@ -1,94 +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 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 or the Server
- * Side Public License, v 1.
- */
-
-import React, { useEffect } from 'react';
-import { useCallback, useRef, useState } from 'react';
-import fastIsEqual from 'fast-deep-equal';
-import { useResizeObserver } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
-import type { ChartSizeSpec } from './types';
-
-/**
- * This hook is used to show a veil over the chart while it is being resized
- * in response to a change in the container dimensions.
- *
- * It is only relevant if client dimensions are being requested based on chart configuration.
- *
- * This whole feature is a nice-to-have. If it proves to be a source of bugs,
- * we can consider removing it and accepting the aesthetic drawback.
- */
-export function useSizeTransitionVeil(
-  chartSizeSpec: ChartSizeSpec,
-  setChartSize: (d: ChartSizeSpec) => void,
-  // should be retrieved from handlers.shouldUseSizeTransitionVeil function
-  shouldUseVeil: boolean
-) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const containerSize = useResizeObserver(containerRef.current);
-  const currentContainerSize = useRef<{ width: number; height: number }>(containerSize);
-
-  // This useEffect hook is here to make up for the fact that the initial container size
-  // is not correctly reported by the useResizeObserver hook (see https://github.com/elastic/eui/issues/7458).
-  useEffect(() => {
-    currentContainerSize.current = {
-      width: containerRef.current?.clientWidth ?? 0,
-      height: containerRef.current?.clientHeight ?? 0,
-    };
-  }, []);
-
-  const [showVeil, setShowVeil] = useState(false);
-  const currentChartSizeSpec = useRef<ChartSizeSpec>();
-  const specJustChanged = useRef<boolean>(false);
-
-  useEffect(() => {
-    if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) {
-      // If the container size has changed, we need to show the veil to hide the chart since it
-      // be rendered based on the previous container size before being updated to the current size.
-      //
-      // 1. we show the veil
-      // 2. the charts library will render the chart based on the previous container dimensions
-      // 3. the charts library will resize the chart to the updated container dimensions
-      // 4. we hide the veil
-      setShowVeil(true);
-      currentContainerSize.current = containerSize;
-    }
-  }, [setShowVeil, containerSize]);
-
-  useEffect(() => {
-    if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) {
-      setChartSize(chartSizeSpec);
-      currentChartSizeSpec.current = chartSizeSpec;
-      specJustChanged.current = true;
-
-      setTimeout(() => {
-        specJustChanged.current = false;
-      }, 500);
-    }
-  }, [chartSizeSpec, setChartSize]);
-
-  const onResize = useCallback(() => {
-    setShowVeil(false);
-  }, []);
-
-  return {
-    veil: (
-      <div
-        css={{
-          height: '100%',
-          width: '100%',
-          backgroundColor: euiThemeVars.euiColorEmptyShade,
-          position: 'absolute',
-          zIndex: 1,
-          display: shouldUseVeil && showVeil ? 'block' : 'none',
-        }}
-      />
-    ),
-    onResize,
-    containerRef,
-  };
-}

src/plugins/chart_expressions/common/index.ts

@@ -15,4 +15,3 @@ export {
 export type { Simplify, MakeOverridesSerializable, ChartSizeSpec, ChartSizeEvent } from './types';
 export { isChartSizeEvent } from './types';
 export { getColorCategories } from './color_categories';
-export { useSizeTransitionVeil } from './chart_size_transition_veil';

src/plugins/chart_expressions/common/tsconfig.json

@@ -19,6 +19,5 @@
     "@kbn/core-execution-context-common",
     "@kbn/expressions-plugin",
     "@kbn/data-plugin",
-    "@kbn/ui-theme",
   ]
 }

src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts

@@ -23,6 +23,5 @@ export type GaugeRenderProps = GaugeExpressionProps & {
   renderComplete: () => void;
   uiState: PersistedState;
   overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides;
-  shouldUseVeil: boolean;
   setChartSize: (d: ChartSizeSpec) => void;
 };

src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap

@@ -196,8 +196,8 @@ exports[`GaugeComponent renders the chart 1`] = `
           "barBackground": "#343741",
           "border": "#EDF0F5",
           "colorBands": Array [
-            "#D9C6EF",
             "#AA87D1",
+            "#D9C6EF",
           ],
           "fallbackBandColor": "#98A2B3",
           "minHeight": 64,
@@ -536,7 +536,6 @@ exports[`GaugeComponent renders the chart 1`] = `
       />
     }
     onRenderChange={[Function]}
-    onResize={[Function]}
     theme={
       Array [
         Object {

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx

@@ -103,7 +103,6 @@ describe('GaugeComponent', function () {
       uiState,
       renderComplete: jest.fn(),
       setChartSize: jest.fn(),
-      shouldUseVeil: false,
     };
   });
 

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -5,18 +5,14 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { FC, memo, useCallback } from 'react';
+import React, { FC, memo, useCallback, useEffect } from 'react';
 import { Chart, Goal, Settings } from '@elastic/charts';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { PaletteOutput } from '@kbn/coloring';
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
 import type { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
-import {
+import { type ChartSizeSpec, getOverridesFor } from '@kbn/chart-expressions-common';
-  type ChartSizeSpec,
-  getOverridesFor,
-  useSizeTransitionVeil,
-} from '@kbn/chart-expressions-common';
 import { isVisDimension } from '@kbn/visualizations-plugin/common/utils';
 import { i18n } from '@kbn/i18n';
 import {
@@ -182,7 +178,6 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
     chartsThemeService,
     renderComplete,
     overrides,
-    shouldUseVeil,
     setChartSize,
   }) => {
     const {
@@ -259,25 +254,23 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
       [renderComplete]
     );
 
-    const chartSizeSpec: ChartSizeSpec = {
+    useEffect(() => {
-      maxDimensions: {
+      const chartSizeSpec: ChartSizeSpec = {
-        ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET
+        maxDimensions: {
-          ? {
+          ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET
-              x: { value: 600, unit: 'pixels' },
+            ? {
-              y: { value: 300, unit: 'pixels' },
+                x: { value: 600, unit: 'pixels' },
-            }
+                y: { value: 300, unit: 'pixels' },
-          : {
+              }
-              y: { value: 600, unit: 'pixels' },
+            : {
-              x: { value: 300, unit: 'pixels' },
+                y: { value: 600, unit: 'pixels' },
-            }),
+                x: { value: 300, unit: 'pixels' },
-      },
+              }),
-    };
+        },
+      };
 
-    const { veil, onResize, containerRef } = useSizeTransitionVeil(
+      setChartSize(chartSizeSpec);
-      chartSizeSpec,
+    }, [gaugeType, setChartSize]);
-      setChartSize,
-      shouldUseVeil
-    );
 
     const table = data;
     const accessors = getAccessorsFromArgs(args, table.columns);
@@ -385,8 +378,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
       : {};
 
     return (
-      <div className="gauge__wrapper" ref={containerRef}>
+      <div className="gauge__wrapper">
-        {veil}
         <Chart {...getOverridesFor(overrides, 'chart')}>
           <Settings
             noResults={<EmptyPlaceholder icon={icon} renderComplete={onRenderChange} />}
@@ -396,7 +388,6 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
             ariaLabel={args.ariaLabel}
             ariaUseDefaultSummary={!args.ariaLabel}
             onRenderChange={onRenderChange}
-            onResize={onResize}
             locale={i18n.getLocale()}
             {...getOverridesFor(overrides, 'settings')}
           />

src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx

@@ -90,7 +90,6 @@ export const gaugeRenderer: (
             chartsThemeService={plugins.charts.theme}
             paletteService={getPaletteService()}
             renderComplete={renderComplete}
-            shouldUseVeil={handlers.shouldUseSizeTransitionVeil()}
             uiState={handlers.uiState as PersistedState}
           />
         </div>

src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap

@@ -426,8 +426,8 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,
@@ -1342,8 +1342,8 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,
@@ -2318,8 +2318,8 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,
@@ -3296,8 +3296,8 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,
@@ -4212,8 +4212,8 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,
@@ -5083,8 +5083,8 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
                 "barBackground": "#343741",
                 "border": "#EDF0F5",
                 "colorBands": Array [
-                  "#D9C6EF",
                   "#AA87D1",
+                  "#D9C6EF",
                 ],
                 "fallbackBandColor": "#98A2B3",
                 "minHeight": 64,

src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap

@@ -300,18 +300,6 @@ exports[`XYChart component it renders area 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -780,8 +768,8 @@ exports[`XYChart component it renders area 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -1141,7 +1129,6 @@ exports[`XYChart component it renders area 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -1849,18 +1836,6 @@ exports[`XYChart component it renders bar 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -2329,8 +2304,8 @@ exports[`XYChart component it renders bar 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -2690,7 +2665,6 @@ exports[`XYChart component it renders bar 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -3398,18 +3372,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -3878,8 +3840,8 @@ exports[`XYChart component it renders horizontal bar 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -4239,7 +4201,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={90}
         showLegend={false}
         showLegendExtra={false}
@@ -4947,18 +4908,6 @@ exports[`XYChart component it renders line 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -5427,8 +5376,8 @@ exports[`XYChart component it renders line 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -5788,7 +5737,6 @@ exports[`XYChart component it renders line 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -6496,18 +6444,6 @@ exports[`XYChart component it renders stacked area 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -6976,8 +6912,8 @@ exports[`XYChart component it renders stacked area 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -7337,7 +7273,6 @@ exports[`XYChart component it renders stacked area 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -8045,18 +7980,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -8525,8 +8448,8 @@ exports[`XYChart component it renders stacked bar 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -8886,7 +8809,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -9594,18 +9516,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -10074,8 +9984,8 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -10435,7 +10345,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={90}
         showLegend={false}
         showLegendExtra={false}
@@ -11143,18 +11052,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -11653,8 +11550,8 @@ exports[`XYChart component split chart should render split chart if both, splitR
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -12014,7 +11911,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -12936,18 +12832,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -13440,8 +13324,8 @@ exports[`XYChart component split chart should render split chart if splitColumnA
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -13801,7 +13685,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}
@@ -14716,18 +14599,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
     }
   }
 >
-  <div
-    css={
-      Object {
-        "backgroundColor": "#ffffff",
-        "display": "none",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 1,
-      }
-    }
-  />
   <ContextProvider
     value={
       Object {
@@ -15220,8 +15091,8 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,
@@ -15581,7 +15452,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
         onElementClick={[Function]}
         onPointerUpdate={[Function]}
         onRenderChange={[Function]}
-        onResize={[Function]}
         rotation={0}
         showLegend={false}
         showLegendExtra={false}

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx

@@ -130,7 +130,6 @@ describe('XYChart component', () => {
       renderComplete: jest.fn(),
       timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
       setChartSize: jest.fn(),
-      shouldUseVeil: false,
     };
   });
 

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -52,11 +52,7 @@ import {
   LegendSizeToPixels,
 } from '@kbn/visualizations-plugin/common/constants';
 import { PersistedState } from '@kbn/visualizations-plugin/public';
-import {
+import { getOverridesFor, ChartSizeSpec } from '@kbn/chart-expressions-common';
-  useSizeTransitionVeil,
-  getOverridesFor,
-  ChartSizeSpec,
-} from '@kbn/chart-expressions-common';
 import type {
   FilterEvent,
   BrushEvent,
@@ -148,7 +144,6 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
   syncCursor: boolean;
   eventAnnotationService: EventAnnotationServiceType;
   renderComplete: () => void;
-  shouldUseVeil: boolean;
   uiState?: PersistedState;
   timeFormat: string;
   setChartSize: (chartSizeSpec: ChartSizeSpec) => void;
@@ -211,11 +206,8 @@ export function XYChart({
   syncColors,
   syncTooltips,
   syncCursor,
-  shouldUseVeil,
-
   useLegacyTimeAxis,
   renderComplete,
-
   uiState,
   timeFormat,
   overrides,
@@ -307,30 +299,28 @@ export function XYChart({
 
   const isTimeViz = isTimeChart(dataLayers);
 
-  const chartSizeSpec: ChartSizeSpec =
+  useEffect(() => {
-    isTimeViz && !isHorizontalChart(dataLayers)
+    const chartSizeSpec: ChartSizeSpec =
-      ? {
+      isTimeViz && !isHorizontalChart(dataLayers)
-          aspectRatio: {
+        ? {
-            x: 16,
+            aspectRatio: {
-            y: 9,
+              x: 16,
-          },
+              y: 9,
-          minDimensions: {
+            },
-            y: { value: 300, unit: 'pixels' },
+            minDimensions: {
-            x: { value: 100, unit: 'percentage' },
+              y: { value: 300, unit: 'pixels' },
-          },
+              x: { value: 100, unit: 'percentage' },
-        }
+            },
-      : {
+          }
-          maxDimensions: {
+        : {
-            x: { value: 100, unit: 'percentage' },
+            maxDimensions: {
-            y: { value: 100, unit: 'percentage' },
+              x: { value: 100, unit: 'percentage' },
-          },
+              y: { value: 100, unit: 'percentage' },
-        };
+            },
+          };
 
-  const { veil, onResize, containerRef } = useSizeTransitionVeil(
+    setChartSize(chartSizeSpec);
-    chartSizeSpec,
+  }, [dataLayers, isTimeViz, setChartSize]);
-    setChartSize,
-    shouldUseVeil
-  );
 
   const formattedDatatables = useMemo(
     () =>
@@ -748,8 +738,7 @@ export function XYChart({
   );
 
   return (
-    <div ref={containerRef} css={chartContainerStyle}>
+    <div css={chartContainerStyle}>
-      {veil}
       {showLegend !== undefined && uiState && (
         <LegendToggle
           onClick={toggleLegend}
@@ -823,7 +812,6 @@ export function XYChart({
               />
             }
             onRenderChange={onRenderChange}
-            onResize={onResize}
             onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
             externalPointerEvents={{
               tooltip: { visible: syncTooltips, placement: Placement.Right },

src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx

@@ -284,7 +284,6 @@ export const getXyChartRenderer = ({
               syncColors={config.syncColors}
               syncTooltips={config.syncTooltips}
               syncCursor={config.syncCursor}
-              shouldUseVeil={handlers.shouldUseSizeTransitionVeil()}
               uiState={handlers.uiState as PersistedState}
               renderComplete={renderComplete}
               setChartSize={setChartSize}

src/plugins/expressions/common/execution/execution.ts

@@ -287,7 +287,6 @@ export class Execution<
       isSyncColorsEnabled: () => execution.params.syncColors!,
       isSyncCursorEnabled: () => execution.params.syncCursor!,
       isSyncTooltipsEnabled: () => execution.params.syncTooltips!,
-      shouldUseSizeTransitionVeil: () => execution.params.shouldUseSizeTransitionVeil!,
       ...execution.executor.context,
       getExecutionContext: () => execution.params.executionContext,
     };

src/plugins/expressions/common/execution/types.ts

@@ -72,11 +72,6 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters>
    */
   isSyncTooltipsEnabled?: () => boolean;
 
-  /**
-   * Returns whether or not to use the size transition veil when resizing visualizations.
-   */
-  shouldUseSizeTransitionVeil?: () => boolean;
-
   /**
    * Contains the meta-data about the source of the expression.
    */

src/plugins/expressions/common/expression_renderers/types.ts

@@ -98,8 +98,6 @@ export interface IInterpreterRenderHandlers {
 
   isSyncTooltipsEnabled(): boolean;
 
-  shouldUseSizeTransitionVeil(): boolean;
-
   /**
    * This uiState interface is actually `PersistedState` from the visualizations plugin,
    * but expressions cannot know about vis or it creates a mess of circular dependencies.

src/plugins/expressions/common/service/expressions_services.ts

@@ -156,11 +156,6 @@ export interface ExpressionExecutionParams {
 
   syncTooltips?: boolean;
 
-  // if this is set to true, a veil will be shown when resizing visualizations in response
-  // to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx).
-  // This should be only set to true if the client will be responding to the resize events
-  shouldUseSizeTransitionVeil?: boolean;
-
   inspectorAdapters?: Adapters;
 
   executionContext?: KibanaExecutionContext;

src/plugins/expressions/public/loader.ts

@@ -60,7 +60,6 @@ export class ExpressionLoader {
       syncColors: params?.syncColors,
       syncTooltips: params?.syncTooltips,
       syncCursor: params?.syncCursor,
-      shouldUseSizeTransitionVeil: params?.shouldUseSizeTransitionVeil,
       hasCompatibleActions: params?.hasCompatibleActions,
       getCompatibleCellValueActions: params?.getCompatibleCellValueActions,
       executionContext: params?.executionContext,
@@ -149,7 +148,6 @@ export class ExpressionLoader {
       syncColors: params.syncColors,
       syncCursor: params?.syncCursor,
       syncTooltips: params.syncTooltips,
-      shouldUseSizeTransitionVeil: params.shouldUseSizeTransitionVeil,
       executionContext: params.executionContext,
       partial: params.partial,
       throttle: params.throttle,

src/plugins/expressions/public/render.ts

@@ -33,7 +33,6 @@ export interface ExpressionRenderHandlerParams {
   syncCursor?: boolean;
   syncTooltips?: boolean;
   interactive?: boolean;
-  shouldUseSizeTransitionVeil?: boolean;
   hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise<boolean>;
   getCompatibleCellValueActions?: (data: object[]) => Promise<unknown[]>;
   executionContext?: KibanaExecutionContext;
@@ -63,7 +62,6 @@ export class ExpressionRenderHandler {
       syncColors,
       syncTooltips,
       syncCursor,
-      shouldUseSizeTransitionVeil,
       interactive,
       hasCompatibleActions = async () => false,
       getCompatibleCellValueActions = async () => [],
@@ -115,9 +113,6 @@ export class ExpressionRenderHandler {
       isSyncCursorEnabled: () => {
         return syncCursor || true;
       },
-      shouldUseSizeTransitionVeil: () => {
-        return Boolean(shouldUseSizeTransitionVeil);
-      },
       isInteractive: () => {
         return interactive ?? true;
       },

src/plugins/expressions/public/types/index.ts

@@ -52,10 +52,6 @@ export interface IExpressionLoaderParams {
   syncColors?: boolean;
   syncCursor?: boolean;
   syncTooltips?: boolean;
-  // if this is set to true, a veil will be shown when resizing visualizations in response
-  // to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx).
-  // This should be only set to true if the client will be responding to the resize events
-  shouldUseSizeTransitionVeil?: boolean;
   hasCompatibleActions?: ExpressionRenderHandlerParams['hasCompatibleActions'];
   getCompatibleCellValueActions?: ExpressionRenderHandlerParams['getCompatibleCellValueActions'];
   executionContext?: KibanaExecutionContext;

src/plugins/presentation_util/public/__stories__/render.tsx

@@ -18,7 +18,6 @@ export const defaultHandlers: IInterpreterRenderHandlers = {
   isSyncColorsEnabled: () => false,
   isSyncCursorEnabled: () => true,
   isSyncTooltipsEnabled: () => false,
-  shouldUseSizeTransitionVeil: () => false,
   isInteractive: () => true,
   getExecutionContext: () => undefined,
   done: action('done'),

x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx

@@ -17,7 +17,6 @@ export const defaultHandlers: RendererHandlers = {
   isSyncColorsEnabled: () => false,
   isSyncCursorEnabled: () => true,
   isSyncTooltipsEnabled: () => false,
-  shouldUseSizeTransitionVeil: () => false,
   isInteractive: () => true,
   onComplete: (fn) => undefined,
   onEmbeddableDestroyed: action('onEmbeddableDestroyed'),

x-pack/plugins/canvas/public/lib/create_handlers.ts

@@ -29,7 +29,6 @@ export const createBaseHandlers = (): IInterpreterRenderHandlers => ({
   isSyncColorsEnabled: () => false,
   isSyncTooltipsEnabled: () => false,
   isSyncCursorEnabled: () => true,
-  shouldUseSizeTransitionVeil: () => false,
   isInteractive: () => true,
   getExecutionContext: () => undefined,
 });

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -781,7 +781,6 @@ export const VisualizationWrapper = ({
         onRender$={onRenderHandler}
         inspectorAdapters={lensInspector.adapters}
         executionContext={executionContext}
-        shouldUseSizeTransitionVeil={true}
         renderMode="edit"
         renderError={(errorMessage?: string | null, error?: ExpressionRenderError | null) => {
           const errorsFromRequest = getOriginalRequestErrorMessages(error || null);

x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap

@@ -209,8 +209,8 @@ exports[`DonutChart component passes correct props without errors for valid prop
               "barBackground": "#343741",
               "border": "#EDF0F5",
               "colorBands": Array [
-                "#D9C6EF",
                 "#AA87D1",
+                "#D9C6EF",
               ],
               "fallbackBandColor": "#98A2B3",
               "minHeight": 64,

x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`MonitorBarSeries component renders if the data series is present 1`] =
 >
   <div
     class="echChart"
+    style="width:100%;height:100%"
   >
     <div
       class="echChartContent"

x-pack/test_serverless/functional/test_suites/common/discover/group1/_discover_histogram.ts

@@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.navigateToApp('discover');
       await PageObjects.discover.waitUntilSearchingHasFinished();
       // this is the number of renderings of the histogram needed when new data is fetched
-      let renderingCountInc = 1;
+      let renderingCountInc = 3; // Multiple renders caused by https://github.com/elastic/kibana/issues/177055
       const prevRenderingCount = await elasticChart.getVisualizationRenderingCount();
       await queryBar.submitQuery();
       await retry.waitFor('chart rendering complete', async () => {
@@ -85,7 +85,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await PageObjects.discover.brushHistogram();
       await PageObjects.discover.waitUntilSearchingHasFinished();
-      renderingCountInc = 2;
+      renderingCountInc = 3; // Multiple renders caused by https://github.com/elastic/kibana/issues/177055
       await retry.waitFor('chart rendering complete after being brushed', async () => {
         const actualCount = await elasticChart.getVisualizationRenderingCount();
         const expectedCount = prevRenderingCount + renderingCountInc * 2;

yarn.lock

@@ -1658,10 +1658,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@63.1.0":
+"@elastic/charts@64.0.0":
-  version "63.1.0"
+  version "64.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-63.1.0.tgz#6348ffe01d6e77ddd150382b57515134f76293b3"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.0.0.tgz#fd9bd6b3a1d123a7c44c3c5bab21e13f9f128021"
-  integrity sha512-UdzsErplc5z2cQxRY7N4kXZXRfb0pdDdsC7V4ag2WIlDiYDpygB3iThb83sG99E9KtOqIkHPE5nyDmWI6GwfOg==
+  integrity sha512-qTsxlO4kgBxvK56ixWp406AIe0UTb1kfcbD/y8Nz/l5cE2u0JP/Cuajp5VziLKmY4NjHswPg9qjIHC87lG1hDw==
   dependencies:
     "@popperjs/core" "^2.11.8"
     bezier-easing "^2.1.0"
@@ -1679,7 +1679,6 @@
     react-redux "^7.1.0"
     redux "^4.0.4"
     reselect "^4.0.0"
-    resize-observer-polyfill "^1.5.1"
     ts-debounce "^4.0.0"
     utility-types "^3.10.0"
     uuid "^9"