From 865c037618beb407148444ce52c7ba06c8741852 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 14:23:22 -0700
Subject: [PATCH 01/19] Convert shared files to TSX

- convert `PropTypes` to TS types

- Inline events to avoid having to type them explicitly
---
 .../elastic_charts/{data.js => data.tsx}      |  0
 .../elastic_charts/{shared.js => shared.tsx}  | 89 +++++++++----------
 2 files changed, 44 insertions(+), 45 deletions(-)
 rename src-docs/src/views/elastic_charts/{data.js => data.tsx} (100%)
 rename src-docs/src/views/elastic_charts/{shared.js => shared.tsx} (64%)

diff --git a/src-docs/src/views/elastic_charts/data.js b/src-docs/src/views/elastic_charts/data.tsx
similarity index 100%
rename from src-docs/src/views/elastic_charts/data.js
rename to src-docs/src/views/elastic_charts/data.tsx
diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.tsx
similarity index 64%
rename from src-docs/src/views/elastic_charts/shared.js
rename to src-docs/src/views/elastic_charts/shared.tsx
index 8fd26f31c61..e0239b5f753 100644
--- a/src-docs/src/views/elastic_charts/shared.js
+++ b/src-docs/src/views/elastic_charts/shared.tsx
@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  PropsWithChildren,
+  ReactNode,
+  useState,
+} from 'react';
 import {
   EuiBadge,
   EuiRadioGroup,
+  type EuiRadioGroupOption,
   EuiSpacer,
   EuiSwitch,
   EuiPanel,
@@ -10,18 +15,19 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts';
-import euiPackage from '../../../../package';
+import euiPackage from '../../../../package.json';
 
 const { devDependencies } = euiPackage;
 
 export const chartsVersion =
-  devDependencies['@elastic/charts'].match(/\d+\.\d+\.\d+/)[0];
+  devDependencies['@elastic/charts'].match(/\d+\.\d+\.\d+/)![0];
 
 export const CHART_COMPONENTS = {
   BarSeries: BarSeries,
   LineSeries: LineSeries,
   AreaSeries: AreaSeries,
 };
+export type ChartType = keyof typeof CHART_COMPONENTS;
 
 export const ExternalBadge = () => {
   return (
@@ -40,7 +46,12 @@ export const ExternalBadge = () => {
   );
 };
 
-export const ChartCard = ({ title, description, children }) => {
+export const ChartCard: FunctionComponent<
+  PropsWithChildren & {
+    title: ReactNode;
+    description: ReactNode;
+  }
+> = ({ title, description, children }) => {
   return (
     <EuiPanel>
       <EuiTitle size="s">
@@ -56,10 +67,15 @@ export const ChartCard = ({ title, description, children }) => {
   );
 };
 
-export const ChartTypeCard = (props) => {
+export const ChartTypeCard: FunctionComponent<{
+  type: string;
+  disabled?: boolean;
+  mixed?: boolean | 'enabled' | 'disabled';
+  onChange: (chartType: ChartType) => void;
+}> = (props) => {
   const idPrefix = 'chartType';
 
-  const toggleButtonsIcons = [
+  const toggleButtonsIcons: EuiRadioGroupOption[] = [
     {
       id: `${idPrefix}0`,
       label: 'BarSeries',
@@ -76,12 +92,11 @@ export const ChartTypeCard = (props) => {
 
   const [toggleIdSelected, setToggleIdSelectd] = useState(`${idPrefix}0`);
 
-  const onChartTypeChange = (optionId) => {
+  const onChartTypeChange = (optionId: string) => {
     setToggleIdSelectd(optionId);
 
-    const chartType = toggleButtonsIcons.find(
-      ({ id }) => id === optionId
-    ).label;
+    const chartType = toggleButtonsIcons.find(({ id }) => id === optionId)!
+      .label as ChartType;
     props.onChange(chartType);
   };
 
@@ -109,58 +124,42 @@ export const ChartTypeCard = (props) => {
   );
 };
 
-ChartTypeCard.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  mixed: PropTypes.oneOf(['enabled', 'disabled', true, false]),
-  disabled: PropTypes.bool,
-};
-
-export const MultiChartCard = (props) => {
+export const MultiChartCard: FunctionComponent<{
+  onChange: ({ multi, stacked }: { multi: boolean; stacked: boolean }) => void;
+}> = ({ onChange }) => {
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
 
-  const onMultiChange = (e) => {
-    const isStacked = e.target.checked ? stacked : false;
-
-    setMulti(e.target.checked);
-    setStacked(isStacked);
-
-    props.onChange({
-      multi: e.target.checked,
-      stacked,
-    });
-  };
-
-  const onStackedChange = (e) => {
-    setStacked(e.target.checked);
-
-    props.onChange({ multi: multi, stacked: e.target.checked });
-  };
   return (
     <ChartCard
-      textAlign="left"
       title="Single vs multiple series"
       description="Legends are only necessary when there are multiple series. Stacked series indicates accumulation but can hide subtle differences. Do not stack line charts."
     >
       <EuiSwitch
         label="Show multi-series"
         checked={multi}
-        onChange={onMultiChange}
+        onChange={(e) => {
+          const isStacked = e.target.checked ? stacked : false;
+
+          setMulti(e.target.checked);
+          setStacked(isStacked);
+
+          onChange({
+            multi: e.target.checked,
+            stacked,
+          });
+        }}
       />
       <EuiSpacer size="s" />
       <EuiSwitch
         label="Stacked"
         checked={stacked}
-        onChange={onStackedChange}
+        onChange={(e) => {
+          setStacked(e.target.checked);
+          onChange({ multi: multi, stacked: e.target.checked });
+        }}
         disabled={!multi}
       />
     </ChartCard>
   );
 };
-
-MultiChartCard.propTypes = {
-  /**
-   * Returns (multi:boolean, stacked:boolean)
-   */
-  onChange: PropTypes.func.isRequired,
-};

From be42a9bae56aea6461f280ce8eef2854629fa357 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 14:31:22 -0700
Subject: [PATCH 02/19] Add missing `groupByRollup` param types

---
 ...sunburst.js => accessibility_sunburst.tsx} |  5 +-
 .../views/elastic_charts/{pie.js => pie.tsx}  | 56 ++++++++++---------
 .../{pie_slices.js => pie_slices.tsx}         |  2 +-
 .../{treemap.js => treemap.tsx}               | 12 ++--
 4 files changed, 40 insertions(+), 35 deletions(-)
 rename src-docs/src/views/elastic_charts/{accessibility_sunburst.js => accessibility_sunburst.tsx} (94%)
 rename src-docs/src/views/elastic_charts/{pie.js => pie.tsx} (78%)
 rename src-docs/src/views/elastic_charts/{pie_slices.js => pie_slices.tsx} (99%)
 rename src-docs/src/views/elastic_charts/{treemap.js => treemap.tsx} (90%)

diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.js b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
similarity index 94%
rename from src-docs/src/views/elastic_charts/accessibility_sunburst.js
rename to src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
index dccdb76e719..ce080c03c32 100644
--- a/src-docs/src/views/elastic_charts/accessibility_sunburst.js
+++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -21,7 +21,8 @@ export default () => {
     : EUI_CHARTS_THEME_LIGHT;
   const { vizColors } = euiChartTheme.theme.colors;
 
-  const data = [
+  type Data = { fruit: string; count: number };
+  const data: Data[] = [
     { fruit: 'Apple', count: 100 },
     { fruit: 'Banana', count: 50 },
     { fruit: 'Tomato', count: 25 },
@@ -59,7 +60,7 @@ export default () => {
           valueAccessor={({ count }) => count}
           layers={[
             {
-              groupByRollup: ({ fruit }) => fruit,
+              groupByRollup: ({ fruit }: Data) => fruit,
               shape: {
                 fillColor: (key, sortIndex) =>
                   vizColors[sortIndex % vizColors.length],
diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.tsx
similarity index 78%
rename from src-docs/src/views/elastic_charts/pie.js
rename to src-docs/src/views/elastic_charts/pie.tsx
index 390557af492..6c6adc191d5 100644
--- a/src-docs/src/views/elastic_charts/pie.js
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -14,6 +14,32 @@ import {
 } from '../../../../src/components';
 import { htmlIdGenerator, useEuiTheme } from '../../../../src/services';
 
+const STATUS_DATA = [
+  {
+    status: 'Open',
+    count: 25,
+  },
+  {
+    status: 'Closed',
+    count: 319,
+  },
+];
+
+const LANGUAGE_DATA = [
+  {
+    language: 'JavaScript',
+    percent: 51.4,
+  },
+  {
+    language: 'TypeScript',
+    percent: 39.6,
+  },
+  {
+    language: 'CSS',
+    percent: 8.7,
+  },
+];
+
 export default () => {
   const { colorMode } = useEuiTheme();
   const htmlId = htmlIdGenerator();
@@ -40,21 +66,12 @@ export default () => {
             <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleOne} />
             <Partition
               id="pieByPR"
-              data={[
-                {
-                  status: 'Open',
-                  count: 25,
-                },
-                {
-                  status: 'Closed',
-                  count: 319,
-                },
-              ]}
+              data={STATUS_DATA}
               layout={PartitionLayout.sunburst}
               valueAccessor={(d) => d.count}
               layers={[
                 {
-                  groupByRollup: (d) => d.status,
+                  groupByRollup: (d: (typeof STATUS_DATA)[0]) => d.status,
                   shape: {
                     fillColor: (key, sortIndex) =>
                       euiChartTheme.theme.colors.vizColors[sortIndex],
@@ -74,26 +91,13 @@ export default () => {
             <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleTwo} />
             <Partition
               id="donutByLanguage"
-              data={[
-                {
-                  language: 'JavaScript',
-                  percent: 51.4,
-                },
-                {
-                  language: 'TypeScript',
-                  percent: 39.6,
-                },
-                {
-                  language: 'CSS',
-                  percent: 8.7,
-                },
-              ]}
+              data={LANGUAGE_DATA}
               layout={PartitionLayout.sunburst}
               valueAccessor={(d) => Number(d.percent)}
               valueFormatter={() => ''}
               layers={[
                 {
-                  groupByRollup: (d) => d.language,
+                  groupByRollup: (d: (typeof LANGUAGE_DATA)[0]) => d.language,
                   shape: {
                     fillColor: (key, sortIndex) =>
                       euiChartTheme.theme.colors.vizColors[sortIndex],
diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.tsx
similarity index 99%
rename from src-docs/src/views/elastic_charts/pie_slices.js
rename to src-docs/src/views/elastic_charts/pie_slices.tsx
index e6a48e1fd21..b78c9c75c70 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.js
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -165,7 +165,7 @@ export default () => {
             valueGetter={showValues ? 'percent' : undefined}
             layers={[
               {
-                groupByRollup: (d) => d.browser,
+                groupByRollup: (d: (typeof BROWSER_DATA_2019)[0]) => d.browser,
                 shape: {
                   fillColor: (key, sortIndex) =>
                     euiChartTheme.theme.colors.vizColors[sortIndex],
diff --git a/src-docs/src/views/elastic_charts/treemap.js b/src-docs/src/views/elastic_charts/treemap.tsx
similarity index 90%
rename from src-docs/src/views/elastic_charts/treemap.js
rename to src-docs/src/views/elastic_charts/treemap.tsx
index 8d78a23d8b1..8941ebe9e98 100644
--- a/src-docs/src/views/elastic_charts/treemap.js
+++ b/src-docs/src/views/elastic_charts/treemap.tsx
@@ -15,6 +15,7 @@ import {
 import { euiPaletteColorBlind, useEuiTheme } from '../../../../src/services';
 
 import { GITHUB_DATASET_MOD } from './data';
+type DataType = (typeof GITHUB_DATASET_MOD)[0];
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -59,21 +60,20 @@ export default () => {
               valueAccessor={(d) => d.count}
               layers={[
                 {
-                  groupByRollup: (d) => d.total,
+                  groupByRollup: (d: DataType) => d.total,
                   shape: {
                     fillColor: euiChartTheme.theme.partition.sectorLineStroke,
                   },
-                  hideInLegend: true,
                 },
                 {
-                  groupByRollup: (d) => d.vizType,
+                  groupByRollup: (d: DataType) => d.vizType,
                   shape: {
                     fillColor: (key, sortIndex) =>
                       groupedPalette[sortIndex * 3],
                   },
                 },
                 {
-                  groupByRollup: (d) => d.issueType,
+                  groupByRollup: (d: DataType) => d.issueType,
                   shape: {
                     fillColor: (key, sortIndex, { parent }) =>
                       groupedPalette[parent.sortIndex * 3 + sortIndex + 1],
@@ -100,7 +100,7 @@ export default () => {
               topGroove={0}
               layers={[
                 {
-                  groupByRollup: (d) => d.vizType,
+                  groupByRollup: (d: DataType) => d.vizType,
                   shape: {
                     fillColor: (key, sortIndex) =>
                       groupedPalette[sortIndex * 3],
@@ -111,7 +111,7 @@ export default () => {
                   },
                 },
                 {
-                  groupByRollup: (d) => d.issueType,
+                  groupByRollup: (d: DataType) => d.issueType,
                   shape: {
                     fillColor: (key, sortIndex, { parent }) =>
                       groupedPalette[parent.sortIndex * 3 + sortIndex],

From 5364a3e37e13691cc418ce56a00d98ecd0519e54 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 14:47:36 -0700
Subject: [PATCH 03/19] Fix `showGridLines` type

- convert to new API
---
 .../{category_chart.js => category_chart.tsx}             | 4 ++--
 .../views/elastic_charts/{pie_alts.js => pie_alts.tsx}    | 6 +++---
 src-docs/src/views/elastic_charts/{sizes.js => sizes.tsx} | 4 ++--
 .../src/views/elastic_charts/{theming.js => theming.tsx}  | 4 ++--
 .../{theming_categorical.js => theming_categorical.tsx}   | 8 ++++----
 .../elastic_charts/{time_chart.js => time_chart.tsx}      | 8 ++++----
 6 files changed, 17 insertions(+), 17 deletions(-)
 rename src-docs/src/views/elastic_charts/{category_chart.js => category_chart.tsx} (99%)
 rename src-docs/src/views/elastic_charts/{pie_alts.js => pie_alts.tsx} (98%)
 rename src-docs/src/views/elastic_charts/{sizes.js => sizes.tsx} (99%)
 rename src-docs/src/views/elastic_charts/{theming.js => theming.tsx} (96%)
 rename src-docs/src/views/elastic_charts/{theming_categorical.js => theming_categorical.tsx} (98%)
 rename src-docs/src/views/elastic_charts/{time_chart.js => time_chart.tsx} (96%)

diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.tsx
similarity index 99%
rename from src-docs/src/views/elastic_charts/category_chart.js
rename to src-docs/src/views/elastic_charts/category_chart.tsx
index b7e8dadb94e..4416c6ca66c 100644
--- a/src-docs/src/views/elastic_charts/category_chart.js
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -169,7 +169,7 @@ const customTheme = {
   <Axis
     id="bottom-axis"
     position={${rotated ? '"left"' : '"bottom"'}}
-    showGridLines={false}
+    gridLine={{ visible: false }}
   />
   <Axis
     id="left-axis"
@@ -221,7 +221,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
         <Axis
           id="bottom-axis"
           position={rotated ? 'left' : 'bottom'}
-          showGridLines={false}
+          gridLine={{ visible: false }}
         />
         <Axis
           id="left-axis"
diff --git a/src-docs/src/views/elastic_charts/pie_alts.js b/src-docs/src/views/elastic_charts/pie_alts.tsx
similarity index 98%
rename from src-docs/src/views/elastic_charts/pie_alts.js
rename to src-docs/src/views/elastic_charts/pie_alts.tsx
index bfbd3d7bd41..978e521e7e4 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.js
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -152,7 +152,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -190,7 +190,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -299,7 +299,7 @@ export default () => {
   />
   <Axis
     id="left-axis"
-    showGridLines
+    gridLine={{ visible: true }}
     position={${rotated ? "'bottom'" : "'left'"}}
     ${
       formatted
diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.tsx
similarity index 99%
rename from src-docs/src/views/elastic_charts/sizes.js
rename to src-docs/src/views/elastic_charts/sizes.tsx
index ba09040f6f6..dcaf04e249f 100644
--- a/src-docs/src/views/elastic_charts/sizes.js
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -239,7 +239,7 @@ class Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
-                showGridLines={false}
+                gridLine={{ visible: false }}
                 style={xAxisStyle}
               />
               <Axis
@@ -347,7 +347,7 @@ class Sizes extends Component {
     position="bottom"
     title={'${xAxisTitle}'}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    showGridLines={false}
+    gridLine={{ visible: false }}
     style={${JSON.stringify(xAxisStyle)}}
   />
   <Axis
diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.tsx
similarity index 96%
rename from src-docs/src/views/elastic_charts/theming.js
rename to src-docs/src/views/elastic_charts/theming.tsx
index 0732d7108a5..925baf34e3c 100644
--- a/src-docs/src/views/elastic_charts/theming.js
+++ b/src-docs/src/views/elastic_charts/theming.tsx
@@ -119,11 +119,11 @@ export default () => {
           yAccessors={['y']}
           color={['black']}
         />
-        <Axis id="bottom-axis" position="bottom" showGridLines />
+        <Axis id="bottom-axis" position="bottom" gridLine={{ visible: true }} />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.tsx
similarity index 98%
rename from src-docs/src/views/elastic_charts/theming_categorical.js
rename to src-docs/src/views/elastic_charts/theming_categorical.tsx
index 3f6e76f0027..fc20de73060 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.js
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -334,12 +334,12 @@ export default () => {
           <Axis
             id="bottom-axis"
             position="bottom"
-            showGridLines={chartType !== 'BarSeries'}
+            gridLine={{ visible: chartType !== 'BarSeries' }}
           />
           <Axis
             id="left-axis"
             position="left"
-            showGridLines
+            gridLine={{ visible: true }}
             tickFormat={(d) => Number(d).toFixed(2)}
           />
         </Chart>
@@ -439,12 +439,12 @@ export default () => {
   <Axis
     id="bottom-axis"
     position="bottom"
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.tsx
similarity index 96%
rename from src-docs/src/views/elastic_charts/time_chart.js
rename to src-docs/src/views/elastic_charts/time_chart.tsx
index 0c18e1c67bd..f2af0d4168c 100644
--- a/src-docs/src/views/elastic_charts/time_chart.js
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -109,13 +109,13 @@ export default () => {
           id="bottom-axis"
           position="bottom"
           tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-          showGridLines={chartType !== 'BarSeries'}
+          gridLine={{ visible: chartType !== 'BarSeries' }}
           tickPadding={0}
         />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
@@ -180,12 +180,12 @@ export default () => {
     id="bottom-axis"
     position="bottom"
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}

From 938a2eba5a8a7b1e3f10b28d71f55bb099f000f3 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 14:53:03 -0700
Subject: [PATCH 04/19] Fix/convert other out of date prop APIs

---
 .../views/elastic_charts/category_chart.tsx    |  2 +-
 .../views/elastic_charts/{goal.js => goal.tsx} |  4 +++-
 src-docs/src/views/elastic_charts/pie_alts.tsx |  6 +++---
 src-docs/src/views/elastic_charts/sizes.tsx    |  2 +-
 .../{sparklines.js => sparklines.tsx}          | 18 +++++++++++++++---
 .../views/elastic_charts/sparklines_example.js |  2 +-
 .../elastic_charts/{texture.js => texture.tsx} |  2 +-
 .../elastic_charts/theming_categorical.tsx     |  4 ++--
 .../src/views/elastic_charts/time_chart.tsx    |  2 +-
 9 files changed, 28 insertions(+), 14 deletions(-)
 rename src-docs/src/views/elastic_charts/{goal.js => goal.tsx} (96%)
 rename src-docs/src/views/elastic_charts/{sparklines.js => sparklines.tsx} (89%)
 rename src-docs/src/views/elastic_charts/{texture.js => texture.tsx} (98%)

diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 4416c6ca66c..5e3ed8132ec 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -216,7 +216,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
           yAccessors={['count']}
           splitSeriesAccessors={multi ? ['issueType'] : undefined}
           stackAccessors={stacked ? ['issueType'] : undefined}
-          displayValueSettings={valueLabels && displayValueSettings}
+          displayValueSettings={valueLabels ? displayValueSettings : undefined}
         />
         <Axis
           id="bottom-axis"
diff --git a/src-docs/src/views/elastic_charts/goal.js b/src-docs/src/views/elastic_charts/goal.tsx
similarity index 96%
rename from src-docs/src/views/elastic_charts/goal.js
rename to src-docs/src/views/elastic_charts/goal.tsx
index b834d2308e4..85fcc3ffd86 100644
--- a/src-docs/src/views/elastic_charts/goal.js
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -70,7 +70,9 @@ export const GoalChart = () => {
             labelMinor="Celsius"
             centralMajor="12"
             centralMinor=""
-            config={{ ...euiGoalConfig, angleStart: Math.PI, angleEnd: 0 }}
+            config={{ euiGoalConfig }} // TODO
+            angleStart={Math.PI}
+            angleEnd={0}
             bandLabels={bandLabels}
           />
         </Chart>
diff --git a/src-docs/src/views/elastic_charts/pie_alts.tsx b/src-docs/src/views/elastic_charts/pie_alts.tsx
index 978e521e7e4..ed1a140ef69 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.tsx
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -144,7 +144,7 @@ export default () => {
               yAccessors={['days']}
               splitSeriesAccessors={['precipitation']}
               stackAccessors={stacked ? ['precipitation'] : undefined}
-              stackAsPercentage={formatted}
+              stackMode={formatted ? 'percentage' : undefined}
               color={color}
             />
             <Axis id="bottom-axis" position={rotated ? 'left' : 'bottom'} />
@@ -182,7 +182,7 @@ export default () => {
               yAccessors={['count']}
               splitSeriesAccessors={['issueType']}
               stackAccessors={stacked ? ['issueType'] : undefined}
-              stackAsPercentage={formatted}
+              stackMode={formatted ? 'percentage' : undefined}
               color={color}
             />
             <Axis id="bottom-axis" position={rotated ? 'left' : 'bottom'} />
@@ -279,7 +279,7 @@ export default () => {
     xAccessor="${usesRainData ? 'season' : 'vizType'}"
     yAccessors={[${usesRainData ? "'days'" : "'count'"}]}
     splitSeriesAccessors={[${usesRainData ? "'precipitation'" : "'issueType'"}]}
-    ${formatted ? 'stackAsPercentage={true}' : ''}
+    ${formatted ? 'stackMode="percentage"' : ''}
     ${
       stacked
         ? `stackAccessors={[${
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index dcaf04e249f..2a03e2fdd03 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -184,7 +184,7 @@ class Sizes extends Component {
     if (width < this.xsmallSize) {
       annotation = (
         <LineAnnotation
-          annotationId="anno_"
+          id="anno_"
           domainType="yDomain"
           dataValues={[{ dataValue: 22, details: 'Threshold' }]}
           marker={'22'}
diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.tsx
similarity index 89%
rename from src-docs/src/views/elastic_charts/sparklines.js
rename to src-docs/src/views/elastic_charts/sparklines.tsx
index 9e861901935..45db597dcb4 100644
--- a/src-docs/src/views/elastic_charts/sparklines.js
+++ b/src-docs/src/views/elastic_charts/sparklines.tsx
@@ -92,7 +92,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings
+                  theme={theme}
+                  showLegend={false}
+                  externalPointerEvents={{ tooltip: { visible: false } }}
+                />
                 <LineSeries
                   id="increase"
                   data={TIME_DATA_SMALL}
@@ -126,7 +130,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 16 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings
+                  theme={theme}
+                  showLegend={false}
+                  externalPointerEvents={{ tooltip: { visible: false } }}
+                />
                 <LineSeries
                   id="major"
                   data={TIME_DATA_MAJOR}
@@ -152,7 +160,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings
+                  theme={theme}
+                  showLegend={false}
+                  externalPointerEvents={{ tooltip: { visible: false } }}
+                />
                 <AreaSeries
                   id="subtle"
                   data={TIME_DATA_SMALL_REVERSE}
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index 5742642270f..ba0c16b5254 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -62,7 +62,7 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI
             </li>
             <li>
               <EuiCode language="js">
-                Settings.tooltip = &quot;none&quot;
+                Settings.externalPointerEvents.tooltip.visible = false
               </EuiCode>
             </li>
           </ul>
diff --git a/src-docs/src/views/elastic_charts/texture.js b/src-docs/src/views/elastic_charts/texture.tsx
similarity index 98%
rename from src-docs/src/views/elastic_charts/texture.js
rename to src-docs/src/views/elastic_charts/texture.tsx
index c275ba4fdd1..4da8fec2ac5 100644
--- a/src-docs/src/views/elastic_charts/texture.js
+++ b/src-docs/src/views/elastic_charts/texture.tsx
@@ -112,7 +112,7 @@ export default () => {
         />
         <Axis
           hide
-          position={Position.left}
+          position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx
index fc20de73060..2850e5d218d 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.tsx
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -328,7 +328,7 @@ export default () => {
             theme={customTheme}
             showLegend={showLegend}
             legendPosition="right"
-            showLegendDisplayValue={false}
+            showLegendExtra={false}
           />
           {charts}
           <Axis
@@ -425,7 +425,7 @@ export default () => {
     theme={${customColorsString}}
     showLegend={${showLegend}}
     legendPosition="right"
-    showLegendDisplayValue={false}
+    showLegendExtra={false}
   />
   <${chartType}
     id="bars"
diff --git a/src-docs/src/views/elastic_charts/time_chart.tsx b/src-docs/src/views/elastic_charts/time_chart.tsx
index f2af0d4168c..f84927b4d3d 100644
--- a/src-docs/src/views/elastic_charts/time_chart.tsx
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -110,7 +110,7 @@ export default () => {
           position="bottom"
           tickFormat={timeFormatter(niceTimeFormatByDay(1))}
           gridLine={{ visible: chartType !== 'BarSeries' }}
-          tickPadding={0}
+          style={{ tickLabel: { padding: 0 } }}
         />
         <Axis
           id="left-axis"

From 786b56aa912b5b02c106a1ea1c6d52a758b5ab84 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:05:06 -0700
Subject: [PATCH 05/19] Add missing `id`/misc props

---
 src-docs/src/views/elastic_charts/accessibility_sunburst.tsx | 1 +
 src-docs/src/views/elastic_charts/goal.tsx                   | 2 ++
 src-docs/src/views/elastic_charts/texture.tsx                | 1 +
 3 files changed, 4 insertions(+)

diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
index ce080c03c32..8a0a4e4703e 100644
--- a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
+++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -55,6 +55,7 @@ export default () => {
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
         />
         <Partition
+          id="partitionId"
           data={data}
           layout={PartitionLayout.sunburst}
           valueAccessor={({ count }) => count}
diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index 85fcc3ffd86..408d255ba71 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -58,6 +58,8 @@ export const GoalChart = () => {
             theme={euiChartTheme}
           />
           <Goal
+            id="goalId"
+            subtype="goal"
             base={-10}
             target={22}
             actual={12}
diff --git a/src-docs/src/views/elastic_charts/texture.tsx b/src-docs/src/views/elastic_charts/texture.tsx
index 4da8fec2ac5..aa2e70a4ef8 100644
--- a/src-docs/src/views/elastic_charts/texture.tsx
+++ b/src-docs/src/views/elastic_charts/texture.tsx
@@ -111,6 +111,7 @@ export default () => {
           data={SAMPLE_SMALL_DATA_2}
         />
         <Axis
+          id="yAxis"
           hide
           position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}

From 5574809792fbd1c2a3871854def4999532a0df46 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:08:52 -0700
Subject: [PATCH 06/19] Remove props that shouldn't be there

- some where moved to theme settings instead, others just shouldn't have been there at all in the first place?
---
 src-docs/src/views/elastic_charts/goal.tsx    |  5 +----
 src-docs/src/views/elastic_charts/pie.tsx     | 10 ++++++++--
 src-docs/src/views/elastic_charts/texture.tsx |  3 ---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index 408d255ba71..ad82644baec 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -22,8 +22,6 @@ export const GoalChart = () => {
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
-  const euiGoalConfig = euiChartTheme.euiGoalConfig;
-
   const isDesktop = useIsWithinBreakpoints(['l', 'xl']);
   const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot'];
   const bands = [-10, 0, 15, 25, 40];
@@ -55,7 +53,7 @@ export const GoalChart = () => {
             ariaLabelledBy={id}
             ariaDescription="This goal chart has a target of 22."
             ariaUseDefaultSummary={false}
-            theme={euiChartTheme}
+            theme={euiChartTheme.theme}
           />
           <Goal
             id="goalId"
@@ -72,7 +70,6 @@ export const GoalChart = () => {
             labelMinor="Celsius"
             centralMajor="12"
             centralMinor=""
-            config={{ euiGoalConfig }} // TODO
             angleStart={Math.PI}
             angleEnd={0}
             bandLabels={bandLabels}
diff --git a/src-docs/src/views/elastic_charts/pie.tsx b/src-docs/src/views/elastic_charts/pie.tsx
index 6c6adc191d5..667cc8193c2 100644
--- a/src-docs/src/views/elastic_charts/pie.tsx
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -54,6 +54,10 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
+  const themeOverrides = {
+    partition: { emptySizeRatio: 0.4 },
+  };
+
   return (
     <div>
       <EuiFlexGrid columns={2}>
@@ -63,7 +67,10 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
-            <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleOne} />
+            <Settings
+              theme={[themeOverrides, euiChartTheme.theme]}
+              ariaLabelledBy={exampleOne}
+            />
             <Partition
               id="pieByPR"
               data={STATUS_DATA}
@@ -104,7 +111,6 @@ export default () => {
                   },
                 },
               ]}
-              emptySizeRatio={0.4}
               clockwiseSectors={false}
             />
           </Chart>
diff --git a/src-docs/src/views/elastic_charts/texture.tsx b/src-docs/src/views/elastic_charts/texture.tsx
index aa2e70a4ef8..63500bd13be 100644
--- a/src-docs/src/views/elastic_charts/texture.tsx
+++ b/src-docs/src/views/elastic_charts/texture.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Chart,
-  CurveType,
   BarSeries,
   AreaSeries,
   Settings,
@@ -82,7 +81,6 @@ export default () => {
           }}
           stackAccessors={['yes']}
           data={SAMPLE_SMALL_DATA}
-          curve={CurveType.CURVE_MONOTONE_X}
         />
         <AreaSeries
           key={2}
@@ -92,7 +90,6 @@ export default () => {
           areaSeriesStyle={{
             area: {
               opacity: 0.05,
-              shape: 'circle',
               texture: {
                 opacity: 1,
                 shape: 'circle',

From d02aaa9dfeb1b3338e66b9a5beced6f4eb825e0e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:12:28 -0700
Subject: [PATCH 07/19] Fix `layers.shape.fillColor` types

---
 .../src/views/elastic_charts/accessibility_sunburst.tsx   | 6 +++---
 src-docs/src/views/elastic_charts/pie.tsx                 | 8 ++++----
 src-docs/src/views/elastic_charts/pie_slices.tsx          | 4 ++--
 src-docs/src/views/elastic_charts/treemap.tsx             | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
index 8a0a4e4703e..0f395cb97fc 100644
--- a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
+++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -19,7 +19,7 @@ export default () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const { vizColors } = euiChartTheme.theme.colors;
+  const { vizColors } = euiChartTheme.theme.colors!;
 
   type Data = { fruit: string; count: number };
   const data: Data[] = [
@@ -63,8 +63,8 @@ export default () => {
             {
               groupByRollup: ({ fruit }: Data) => fruit,
               shape: {
-                fillColor: (key, sortIndex) =>
-                  vizColors[sortIndex % vizColors.length],
+                fillColor: (_, sortIndex) =>
+                  vizColors![sortIndex % vizColors!.length],
               },
             },
           ]}
diff --git a/src-docs/src/views/elastic_charts/pie.tsx b/src-docs/src/views/elastic_charts/pie.tsx
index 667cc8193c2..26eb8fb532d 100644
--- a/src-docs/src/views/elastic_charts/pie.tsx
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -80,8 +80,8 @@ export default () => {
                 {
                   groupByRollup: (d: (typeof STATUS_DATA)[0]) => d.status,
                   shape: {
-                    fillColor: (key, sortIndex) =>
-                      euiChartTheme.theme.colors.vizColors[sortIndex],
+                    fillColor: (_, sortIndex) =>
+                      euiChartTheme.theme.colors!.vizColors![sortIndex],
                   },
                 },
               ]}
@@ -106,8 +106,8 @@ export default () => {
                 {
                   groupByRollup: (d: (typeof LANGUAGE_DATA)[0]) => d.language,
                   shape: {
-                    fillColor: (key, sortIndex) =>
-                      euiChartTheme.theme.colors.vizColors[sortIndex],
+                    fillColor: (_, sortIndex) =>
+                      euiChartTheme.theme.colors!.vizColors![sortIndex],
                   },
                 },
               ]}
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index b78c9c75c70..fa8e7e796db 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -167,8 +167,8 @@ export default () => {
               {
                 groupByRollup: (d: (typeof BROWSER_DATA_2019)[0]) => d.browser,
                 shape: {
-                  fillColor: (key, sortIndex) =>
-                    euiChartTheme.theme.colors.vizColors[sortIndex],
+                  fillColor: (_, sortIndex) =>
+                    euiChartTheme.theme.colors!.vizColors![sortIndex],
                 },
               },
             ]}
diff --git a/src-docs/src/views/elastic_charts/treemap.tsx b/src-docs/src/views/elastic_charts/treemap.tsx
index 8941ebe9e98..0a1728e6015 100644
--- a/src-docs/src/views/elastic_charts/treemap.tsx
+++ b/src-docs/src/views/elastic_charts/treemap.tsx
@@ -62,7 +62,7 @@ export default () => {
                 {
                   groupByRollup: (d: DataType) => d.total,
                   shape: {
-                    fillColor: euiChartTheme.theme.partition.sectorLineStroke,
+                    fillColor: euiChartTheme.theme.partition!.sectorLineStroke!,
                   },
                 },
                 {

From 90dd645d019774b5132c4145a5002ac1789bbb39 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:35:32 -0700
Subject: [PATCH 08/19] Fix `ChartTypeCard` props/types

- mixed logic is a bit of a headache try to simplify it via a conditional generic
---
 .../views/elastic_charts/category_chart.tsx   | 11 ++++------
 src-docs/src/views/elastic_charts/shared.tsx  | 11 ++++++----
 .../src/views/elastic_charts/time_chart.tsx   | 21 +++++++------------
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 5e3ed8132ec..2c4cf6aa142 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -27,6 +27,7 @@ import {
   ChartTypeCard,
   MultiChartCard,
   CHART_COMPONENTS,
+  type ChartType,
   ChartCard,
 } from './shared';
 
@@ -38,7 +39,7 @@ export default () => {
   const [rotated, setRotated] = useState(true);
   const [ordered, setOrdered] = useState(true);
   const [formatted, setFormatted] = useState(false);
-  const [chartType, setChartType] = useState('BarSeries');
+  const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
   const onMultiChange = (multiObject) => {
     const { multi, stacked } = multiObject;
@@ -58,10 +59,6 @@ export default () => {
     setFormatted(e.target.checked);
   };
 
-  const onChartTypeChange = (chartType) => {
-    setChartType(chartType);
-  };
-
   const onValueLabelsChange = (e) => {
     setValueLabels(e.target.checked);
   };
@@ -277,9 +274,9 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartTypeCard
+          <ChartTypeCard<{ mixed: false }>
             type="Although we recommend only bar charts, categorical"
-            onChange={onChartTypeChange}
+            onChange={(chartType) => setChartType(chartType)}
             disabled
           />
         </EuiFlexItem>
diff --git a/src-docs/src/views/elastic_charts/shared.tsx b/src-docs/src/views/elastic_charts/shared.tsx
index e0239b5f753..fc3990a1309 100644
--- a/src-docs/src/views/elastic_charts/shared.tsx
+++ b/src-docs/src/views/elastic_charts/shared.tsx
@@ -67,12 +67,15 @@ export const ChartCard: FunctionComponent<
   );
 };
 
-export const ChartTypeCard: FunctionComponent<{
+type ChartTypeCardProps<Mixed> = {
   type: string;
+  mixed?: 'enabled' | 'disabled';
+  onChange: [Mixed] extends [{ mixed: true }]
+    ? (chartType: ChartType | 'Mixed') => void
+    : (chartType: ChartType) => void;
   disabled?: boolean;
-  mixed?: boolean | 'enabled' | 'disabled';
-  onChange: (chartType: ChartType) => void;
-}> = (props) => {
+};
+export const ChartTypeCard = <Mixed,>(props: ChartTypeCardProps<Mixed>) => {
   const idPrefix = 'chartType';
 
   const toggleButtonsIcons: EuiRadioGroupOption[] = [
diff --git a/src-docs/src/views/elastic_charts/time_chart.tsx b/src-docs/src/views/elastic_charts/time_chart.tsx
index f84927b4d3d..da46f63c5cf 100644
--- a/src-docs/src/views/elastic_charts/time_chart.tsx
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -35,6 +35,7 @@ import { TIME_DATA, TIME_DATA_2 } from './data';
 import {
   ChartTypeCard,
   CHART_COMPONENTS,
+  type ChartType,
   MultiChartCard,
   ChartCard,
 } from './shared';
@@ -44,7 +45,7 @@ export default () => {
 
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
-  const [chartType, setChartType] = useState('BarSeries');
+  const [chartType, setChartType] = useState<ChartType | 'Mixed'>('BarSeries');
 
   const onMultiChange = (multiObject) => {
     const { multi, stacked } = multiObject;
@@ -52,21 +53,15 @@ export default () => {
     setStacked(stacked);
   };
 
-  const onChartTypeChange = (chartType) => {
-    setChartType(chartType);
-  };
-
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  let ChartType = CHART_COMPONENTS[chartType];
-  let ChartType2 = CHART_COMPONENTS[chartType];
-  if (chartType === 'Mixed') {
-    ChartType = BarSeries;
-    ChartType2 = LineSeries;
-  }
+  const ChartType =
+    chartType === 'Mixed' ? BarSeries : CHART_COMPONENTS[chartType];
+  const ChartType2 =
+    chartType === 'Mixed' ? LineSeries : CHART_COMPONENTS[chartType];
 
   const isBadChart = chartType === 'LineSeries' && stacked;
 
@@ -124,9 +119,9 @@ export default () => {
 
       <EuiFlexGrid columns={3}>
         <EuiFlexItem>
-          <ChartTypeCard
+          <ChartTypeCard<{ mixed: true }>
             type="Time series"
-            onChange={onChartTypeChange}
+            onChange={(chartType) => setChartType(chartType)}
             mixed={multi ? 'enabled' : 'disabled'}
           />
         </EuiFlexItem>

From 3855d3ffa40ed1fb56fe4df23e04c5c649391301 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:38:52 -0700
Subject: [PATCH 09/19] Fix `MultiChartCard` props/types

- moving onChange callback to inline removes the need for typing the params explicitly
---
 .../views/elastic_charts/category_chart.tsx   | 12 +++++-----
 src-docs/src/views/elastic_charts/sizes.tsx   | 22 +++----------------
 .../src/views/elastic_charts/time_chart.tsx   | 13 +++++------
 3 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 2c4cf6aa142..2f7b269a491 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -41,11 +41,6 @@ export default () => {
   const [formatted, setFormatted] = useState(false);
   const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
-  const onMultiChange = (multiObject) => {
-    const { multi, stacked } = multiObject;
-    setMulti(multi);
-    setStacked(stacked);
-  };
 
   const onRotatedChange = (e) => {
     setRotated(e.target.checked);
@@ -282,7 +277,12 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <MultiChartCard onChange={onMultiChange} />
+          <MultiChartCard
+            onChange={({ multi, stacked }) => {
+              setMulti(multi);
+              setStacked(stacked);
+            }}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index 2a03e2fdd03..fcd2339a274 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -60,24 +60,6 @@ class Sizes extends Component {
     this.changePropsBasedOnWidth(100);
   };
 
-  onStackedChange = (e) => {
-    this.setState({
-      stacked: e.target.checked,
-    });
-  };
-
-  onMultiChange = (multiObject) => {
-    this.setState({
-      ...multiObject,
-    });
-  };
-
-  onChartTypeChange = (optionId) => {
-    this.setState({
-      toggleIdSelected: optionId,
-    });
-  };
-
   onWidthChartsChange = (e) => {
     this.setState({
       width: e.target.value,
@@ -259,7 +241,9 @@ class Sizes extends Component {
           className="euiGuide__chartsPageCrosshairSection"
         >
           <EuiFlexItem>
-            <MultiChartCard onChange={this.onMultiChange} />
+            <MultiChartCard
+              onChange={(multiObject) => this.setState({ ...multiObject })}
+            />
           </EuiFlexItem>
           <EuiFlexItem>
             <ChartCard
diff --git a/src-docs/src/views/elastic_charts/time_chart.tsx b/src-docs/src/views/elastic_charts/time_chart.tsx
index da46f63c5cf..2e3a216f542 100644
--- a/src-docs/src/views/elastic_charts/time_chart.tsx
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -47,12 +47,6 @@ export default () => {
   const [stacked, setStacked] = useState(false);
   const [chartType, setChartType] = useState<ChartType | 'Mixed'>('BarSeries');
 
-  const onMultiChange = (multiObject) => {
-    const { multi, stacked } = multiObject;
-    setMulti(multi);
-    setStacked(stacked);
-  };
-
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK.theme
@@ -127,7 +121,12 @@ export default () => {
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <MultiChartCard onChange={onMultiChange} />
+          <MultiChartCard
+            onChange={({ multi, stacked }) => {
+              setMulti(multi);
+              setStacked(stacked);
+            }}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>

From fdbb82b5c5a37cc7f50f1572da2ed96424039d54 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:44:21 -0700
Subject: [PATCH 10/19] Fix more `onChange` types by moving them inline

- which removes the need to type the params explicitly
---
 .../views/elastic_charts/category_chart.tsx   | 24 ++--------
 .../src/views/elastic_charts/pie_slices.tsx   | 16 ++-----
 src-docs/src/views/elastic_charts/sizes.tsx   | 14 ++----
 .../elastic_charts/theming_categorical.tsx    | 48 +++++++++----------
 4 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 2f7b269a491..9fdada9b15d 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -42,22 +42,6 @@ export default () => {
   const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
 
-  const onRotatedChange = (e) => {
-    setRotated(e.target.checked);
-  };
-
-  const onOrderedChange = (e) => {
-    setOrdered(e.target.checked);
-  };
-
-  const onFormatChange = (e) => {
-    setFormatted(e.target.checked);
-  };
-
-  const onValueLabelsChange = (e) => {
-    setValueLabels(e.target.checked);
-  };
-
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK.theme
@@ -242,13 +226,13 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Order by count descending"
               checked={ordered}
-              onChange={onOrderedChange}
+              onChange={(e) => setOrdered(e.target.checked)}
             />
             <EuiSpacer size="s" />
             <EuiSwitch
               label="Rotate 90deg"
               checked={rotated}
-              onChange={onRotatedChange}
+              onChange={(e) => setRotated(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
@@ -263,7 +247,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Simulate thousands formatting"
               checked={formatted}
-              onChange={onFormatChange}
+              onChange={(e) => setFormatted(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
@@ -294,7 +278,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Show value labels"
               checked={valueLabels}
-              onChange={onValueLabelsChange}
+              onChange={(e) => setValueLabels(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index fa8e7e796db..692b903b200 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -83,10 +83,6 @@ export default () => {
   const [showLegend, setShowLegend] = useState(false);
   const [showValues, setShowValues] = useState(true);
 
-  const onNumChartsChange = (e) => {
-    setNumSlices(e.target.value);
-  };
-
   const onSliceOrderChange = (optionId) => {
     const sliceOrderLabel = sliceOrderRadios.find(
       ({ id }) => id === optionId
@@ -106,10 +102,6 @@ export default () => {
     setSliceOrderIdSelected(optionId);
   };
 
-  const onGroupChange = (e) => {
-    setGrouped(e.target.checked);
-  };
-
   const isBadChart = numSlices > 5 && !grouped;
   const isComplicatedChart = false;
 
@@ -187,9 +179,7 @@ export default () => {
               legend="Chart type"
               options={pieTypeRadios}
               idSelected={pieTypeIdSelected}
-              onChange={(id) => {
-                setPieTypeIdSelected(id);
-              }}
+              onChange={(id) => setPieTypeIdSelected(id)}
               buttonSize="compressed"
               isFullWidth
             />
@@ -231,7 +221,7 @@ export default () => {
                 max={10}
                 showTicks
                 value={numSlices}
-                onChange={onNumChartsChange}
+                onChange={(e) => setNumSlices(Number(e.currentTarget.value))}
                 levels={[
                   { min: 1, max: 5.5, color: 'success' },
                   { min: 5.5, max: 10, color: 'danger' },
@@ -244,7 +234,7 @@ export default () => {
               <EuiSwitch
                 label="Group 'Other' slices"
                 checked={numSlices <= 5 ? false : grouped}
-                onChange={onGroupChange}
+                onChange={(e) => setGrouped(e.target.checked)}
                 disabled={numSlices <= 5}
               />
             </EuiFormRow>
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index fcd2339a274..f7d424f8c04 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -60,14 +60,6 @@ class Sizes extends Component {
     this.changePropsBasedOnWidth(100);
   };
 
-  onWidthChartsChange = (e) => {
-    this.setState({
-      width: e.target.value,
-    });
-
-    this.changePropsBasedOnWidth(e.target.value);
-  };
-
   changePropsBasedOnWidth = (width) => {
     const data1 = TIME_DATA.slice();
     const data2 = TIME_DATA_2.slice();
@@ -255,7 +247,11 @@ class Sizes extends Component {
                   min={20}
                   max={100}
                   value={width}
-                  onChange={this.onWidthChartsChange}
+                  onChange={(e) => {
+                    const width = Number(e.currentTarget.value);
+                    this.setState({ width });
+                    this.changePropsBasedOnWidth(width);
+                  }}
                   aria-label="Width of panel"
                 />
               </EuiFormRow>
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx
index 2850e5d218d..35acbe7922c 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.tsx
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -76,27 +76,6 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const onNumChartsChange = (e) => {
-    updateCorrectChart(Number(e.target.value), colorType);
-    setNumCharts(e.target.value);
-  };
-
-  const onColorTypeChange = (optionId) => {
-    const colorType = colorTypeRadios.find(({ id }) => id === optionId).label;
-    updateCorrectChart(Number(numCharts), colorType);
-    setColorType(colorType);
-    setColorTypeIdSelected(optionId);
-  };
-
-  const onGroupChange = (e) => {
-    const colorType = e.target.checked
-      ? 'Grouped'
-      : colorTypeRadios.find(({ id }) => id === colorTypeIdSelected).label;
-    updateCorrectChart(Number(numCharts), colorType);
-    setGrouped(e.target.checked);
-    setColorType(colorType);
-  };
-
   const updateCorrectChart = (numCharts, chartType) => {
     switch (chartType) {
       case 'Categorical':
@@ -357,7 +336,14 @@ export default () => {
               compressed
               options={colorTypeRadios}
               idSelected={grouped ? colorTypeRadios[0].id : colorTypeIdSelected}
-              onChange={onColorTypeChange}
+              onChange={(optionId) => {
+                const colorType = colorTypeRadios.find(
+                  ({ id }) => id === optionId
+                )!.label;
+                updateCorrectChart(Number(numCharts), colorType);
+                setColorType(colorType);
+                setColorTypeIdSelected(optionId);
+              }}
               disabled={grouped}
             />
           </ChartCard>
@@ -381,7 +367,11 @@ export default () => {
                 showTicks
                 value={grouped ? '2' : numCharts}
                 disabled={grouped}
-                onChange={onNumChartsChange}
+                onChange={(e) => {
+                  const numCharts = Number(e.currentTarget.value);
+                  updateCorrectChart(numCharts, colorType);
+                  setNumCharts(numCharts);
+                }}
                 levels={[
                   { min: 1, max: 5.5, color: 'success' },
                   { min: 5.5, max: 10, color: 'danger' },
@@ -401,7 +391,17 @@ export default () => {
             <EuiSwitch
               label="Show grouped"
               checked={grouped}
-              onChange={onGroupChange}
+              onChange={(e) => {
+                const colorType = e.target.checked
+                  ? 'Grouped'
+                  : colorTypeRadios.find(
+                      ({ id }) => id === colorTypeIdSelected
+                    )!.label;
+
+                updateCorrectChart(Number(numCharts), colorType);
+                setGrouped(e.target.checked);
+                setColorType(colorType);
+              }}
             />
           </ChartCard>
         </EuiFlexItem>

From 216313784fa31d9dffaf651ecb4302a20b1a9417 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:46:44 -0700
Subject: [PATCH 11/19] `ChartCard` props/types fixes

- remove unused text/title props

- make `description` correctly conditional, and add more spacing to the affected card to make up for it
---
 src-docs/src/views/elastic_charts/pie_alts.tsx   |  1 -
 src-docs/src/views/elastic_charts/pie_slices.tsx |  2 +-
 src-docs/src/views/elastic_charts/shared.tsx     | 14 +++++++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/pie_alts.tsx b/src-docs/src/views/elastic_charts/pie_alts.tsx
index ed1a140ef69..122a82af6f3 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.tsx
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -213,7 +213,6 @@ export default () => {
 
         <EuiFlexItem>
           <ChartCard
-            textAlign="left"
             title="Bar chart options"
             description="Compare how the following options change the understanding of the data with that of the sunburst or treemap chart."
           >
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index 692b903b200..35d2498d5ef 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -174,6 +174,7 @@ export default () => {
       <EuiFlexGrid columns={3}>
         <EuiFlexItem>
           <ChartCard title="Chart type and labels">
+            <EuiSpacer size="s" />
             <EuiButtonGroup
               color="primary"
               legend="Chart type"
@@ -243,7 +244,6 @@ export default () => {
         <EuiFlexItem>
           <ChartCard
             title="Slice order"
-            titleSize="xxs"
             description={
               <>
                 Partition supports the specialized slice order with{' '}
diff --git a/src-docs/src/views/elastic_charts/shared.tsx b/src-docs/src/views/elastic_charts/shared.tsx
index fc3990a1309..f55223badc7 100644
--- a/src-docs/src/views/elastic_charts/shared.tsx
+++ b/src-docs/src/views/elastic_charts/shared.tsx
@@ -49,7 +49,7 @@ export const ExternalBadge = () => {
 export const ChartCard: FunctionComponent<
   PropsWithChildren & {
     title: ReactNode;
-    description: ReactNode;
+    description?: ReactNode;
   }
 > = ({ title, description, children }) => {
   return (
@@ -58,10 +58,14 @@ export const ChartCard: FunctionComponent<
         <span>{title}</span>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiText size="s">
-        <p>{description}</p>
-      </EuiText>
-      <EuiSpacer size="s" />
+      {description && (
+        <>
+          <EuiText size="s">
+            <p>{description}</p>
+          </EuiText>
+          <EuiSpacer size="s" />
+        </>
+      )}
       {children}
     </EuiPanel>
   );

From 7e44a7b89104b81b4d06d2ca00b14d95fd80c11e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:47:31 -0700
Subject: [PATCH 12/19] Fix theme context to use typed hook

---
 src-docs/src/views/elastic_charts/goal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index ad82644baec..c00bc74d3cc 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Chart, Settings, Goal } from '@elastic/charts';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import {
   htmlIdGenerator,
+  useEuiTheme,
   useIsWithinBreakpoints,
   euiPalettePositive,
 } from '../../../../src/services';
 import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
-import { ThemeContext } from '../../components';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -15,9 +15,10 @@ import {
 } from '../../../../src/themes/charts/themes';
 
 export const GoalChart = () => {
+  const { colorMode } = useEuiTheme();
   const id = htmlIdGenerator('goal')();
-  const themeContext = useContext(ThemeContext);
-  const isDarkTheme = themeContext.theme.includes('dark');
+
+  const isDarkTheme = colorMode === 'DARK';
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;

From fc22d2e9879dec76b94ebb861a5b5d2813458a08 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:51:11 -0700
Subject: [PATCH 13/19] Fix more fn param types

---
 ...essibility_bullet.js => accessibility_bullet.tsx} |  2 +-
 src-docs/src/views/elastic_charts/category_chart.tsx |  3 ++-
 src-docs/src/views/elastic_charts/goal.tsx           |  2 +-
 src-docs/src/views/elastic_charts/pie_alts.tsx       |  8 ++++----
 src-docs/src/views/elastic_charts/pie_slices.tsx     |  7 +++----
 src-docs/src/views/elastic_charts/sizes.tsx          |  5 +++--
 .../src/views/elastic_charts/theming_categorical.tsx | 12 ++++++------
 7 files changed, 20 insertions(+), 19 deletions(-)
 rename src-docs/src/views/elastic_charts/{accessibility_bullet.js => accessibility_bullet.tsx} (97%)

diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
similarity index 97%
rename from src-docs/src/views/elastic_charts/accessibility_bullet.js
rename to src-docs/src/views/elastic_charts/accessibility_bullet.tsx
index ea958ae4318..167f716d3bd 100644
--- a/src-docs/src/views/elastic_charts/accessibility_bullet.js
+++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
@@ -41,7 +41,7 @@ export default () => {
     '150': spectrum[3],
     '250': spectrum[4],
   };
-  const bandFillColor = (x) => colorMap[x];
+  const bandFillColor = (x: number) => colorMap[x];
   return (
     <>
       <EuiTitle size="xs" className="eui-textCenter">
diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 9fdada9b15d..0f6899f3490 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -154,7 +154,8 @@ const customTheme = {
   />
 </Chart>`;
 
-  const removeEmptyLines = (string) => string.replace(/(^[ \t]*\n)/gm, '');
+  const removeEmptyLines = (string: string) =>
+    string.replace(/(^[ \t]*\n)/gm, '');
 
   const textToCopy = valueLabels
     ? `${chartVariablesForValueLabels}
diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index c00bc74d3cc..21346672da4 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -41,7 +41,7 @@ export const GoalChart = () => {
     return acc;
   }, {});
 
-  const bandFillColor = (x) => colorMapTheme[x];
+  const bandFillColor = (x: number) => colorMapTheme[x];
   return (
     <EuiFlexGrid direction={isDesktop ? 'row' : 'column'} columns={2}>
       <EuiFlexItem>
diff --git a/src-docs/src/views/elastic_charts/pie_alts.tsx b/src-docs/src/views/elastic_charts/pie_alts.tsx
index 122a82af6f3..4678e03c389 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.tsx
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -53,7 +53,7 @@ export default () => {
   );
   if (formatted) {
     color = [
-      euiPaletteForTemperature()[0],
+      euiPaletteForTemperature(0)[0],
       euiPaletteGray(5)[isDarkTheme ? 4 : 0],
     ];
   }
@@ -77,15 +77,15 @@ export default () => {
 
       data = orderBy(DATASET, 'issueType', 'desc');
       const sortedData = sortBy(data, [
-        ({ vizType }) => totals[vizType],
+        ({ vizType }: (typeof DATASET)[0]) => totals[vizType],
       ]).reverse();
       data = sortedData;
     }
   }
 
-  const tickFormat = (tick) => {
+  const tickFormat = (tick: string) => {
     if (formatted) {
-      return `${Number(tick * 100).toFixed(0)}%`;
+      return `${(Number(tick) * 100).toFixed(0)}%`;
     } else if (!grouped && String(tick).length > 1) {
       return String(tick).substring(0, String(tick).length - 3);
     } else {
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index 35d2498d5ef..7c9726a9b22 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -83,10 +83,9 @@ export default () => {
   const [showLegend, setShowLegend] = useState(false);
   const [showValues, setShowValues] = useState(true);
 
-  const onSliceOrderChange = (optionId) => {
-    const sliceOrderLabel = sliceOrderRadios.find(
-      ({ id }) => id === optionId
-    ).label;
+  const onSliceOrderChange = (optionId: string) => {
+    const sliceOrderLabel = sliceOrderRadios.find(({ id }) => id === optionId)!
+      .label!;
     if (sliceOrderLabel.includes('Counter')) {
       setSliceOrderConfig({ clockwiseSectors: false });
       setSliceOrderConfigText('clockwiseSectors={false}');
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index f7d424f8c04..497b67fc51a 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -9,6 +9,7 @@ import {
   niceTimeFormatByDay,
   LineAnnotation,
   BarSeries,
+  type PointerValue,
 } from '@elastic/charts';
 
 import {
@@ -60,7 +61,7 @@ class Sizes extends Component {
     this.changePropsBasedOnWidth(100);
   };
 
-  changePropsBasedOnWidth = (width) => {
+  changePropsBasedOnWidth = (width: number) => {
     const data1 = TIME_DATA.slice();
     const data2 = TIME_DATA_2.slice();
     let tooltipProps;
@@ -77,7 +78,7 @@ class Sizes extends Component {
     }
 
     if (width < this.mediumSize) {
-      const headerFormatter = (tooltipData) => {
+      const headerFormatter = (tooltipData: PointerValue) => {
         return `${formatDate(
           tooltipData.value,
           dateFormatAliases.shortDateTime
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx
index 35acbe7922c..a2adac49205 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.tsx
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -76,7 +76,7 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const updateCorrectChart = (numCharts, chartType) => {
+  const updateCorrectChart = (numCharts: number, chartType: string) => {
     switch (chartType) {
       case 'Categorical':
         createCategoryChart(numCharts);
@@ -100,7 +100,7 @@ export default () => {
     }
   };
 
-  const createCategoryChart = (numCharts) => {
+  const createCategoryChart = (numCharts: number) => {
     const dg = new DataGenerator();
     const data = dg.generateGroupedSeries(20, numCharts).map((item) => {
       item.g = `Categorical ${item.g.toUpperCase()}`;
@@ -114,7 +114,7 @@ export default () => {
     setChartType('LineSeries');
   };
 
-  const createQuantityChart = (numCharts) => {
+  const createQuantityChart = (numCharts: number) => {
     const vizColors = euiPalettePositive(numCharts);
 
     // convert series labels to percentages
@@ -138,7 +138,7 @@ export default () => {
     setChartType('BarSeries');
   };
 
-  const createTrendChart = (numCharts) => {
+  const createTrendChart = (numCharts: number) => {
     const vizColors = euiPaletteForStatus(numCharts);
 
     // convert series labels to better/worse
@@ -173,7 +173,7 @@ export default () => {
     setChartType('BarSeries');
   };
 
-  const createHighlightChart = (numCharts) => {
+  const createHighlightChart = (numCharts: number) => {
     const vizColors = euiPaletteGray(numCharts);
     vizColors[vizColors.length - 1] = highlightColor;
 
@@ -250,7 +250,7 @@ export default () => {
         return item;
       });
 
-      const isOdd = index % 2;
+      const isOdd = index % 2 === 0;
 
       const chart = (
         <ChartType

From a811de6633e7e9e846f33c0550d6f94b91f238db Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:53:06 -0700
Subject: [PATCH 14/19] Fix more misc var type definitions

---
 .../elastic_charts/accessibility_bullet.tsx   | 12 ++++----
 .../views/elastic_charts/category_chart.tsx   |  8 +++---
 src-docs/src/views/elastic_charts/goal.tsx    |  4 +--
 .../src/views/elastic_charts/pie_alts.tsx     |  8 +++---
 .../src/views/elastic_charts/pie_slices.tsx   |  9 ++++--
 src-docs/src/views/elastic_charts/sizes.tsx   | 28 +++++++++++++++++--
 .../elastic_charts/theming_categorical.tsx    | 17 ++++++-----
 7 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
index 167f716d3bd..01e386a7b7c 100644
--- a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
+++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
@@ -34,12 +34,12 @@ export default () => {
     spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse();
   }
 
-  const colorMap = {
-    '0': spectrum[0],
-    '100': spectrum[1],
-    '125': spectrum[2],
-    '150': spectrum[3],
-    '250': spectrum[4],
+  const colorMap: Record<number, string> = {
+    0: spectrum[0],
+    100: spectrum[1],
+    125: spectrum[2],
+    150: spectrum[3],
+    250: spectrum[4],
   };
   const bandFillColor = (x: number) => colorMap[x];
   return (
diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 0f6899f3490..2ba9a70b991 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -59,7 +59,7 @@ export default () => {
     ...theme,
     barSeriesStyle: {
       displayValue: {
-        ...theme.barSeriesStyle.displayValue,
+        ...theme.barSeriesStyle?.displayValue,
         offsetX: rotated ? 4 : 0,
         offsetY: rotated ? 0 : -4,
         ...(multi && stacked
@@ -67,15 +67,15 @@ export default () => {
               alignment: {
                 vertical: 'middle',
                 horizontal: 'center',
-              },
+              } as const,
             }
           : {
               alignment: rotated
                 ? {
-                    vertical: 'middle',
+                    vertical: 'middle' as const,
                   }
                 : {
-                    horizontal: 'center',
+                    horizontal: 'center' as const,
                   },
             }),
       },
diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index 21346672da4..5edcac5b28f 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -28,7 +28,7 @@ export const GoalChart = () => {
   const bands = [-10, 0, 15, 25, 40];
 
   const spectrum = euiPalettePositive(5);
-  const opacityMapHex = {
+  const opacityMapHex: Record<number, string> = {
     '-10': spectrum[0],
     '0': spectrum[1],
     '15': spectrum[2],
@@ -39,7 +39,7 @@ export const GoalChart = () => {
   const colorMapTheme = bands.reduce((acc, band) => {
     acc[band] = opacityMapHex[band];
     return acc;
-  }, {});
+  }, {} as Record<number, string>);
 
   const bandFillColor = (x: number) => colorMapTheme[x];
   return (
diff --git a/src-docs/src/views/elastic_charts/pie_alts.tsx b/src-docs/src/views/elastic_charts/pie_alts.tsx
index 4678e03c389..9446eac4e6b 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.tsx
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import mapValues from 'lodash/mapValues';
 import orderBy from 'lodash/orderBy';
@@ -95,7 +95,7 @@ export default () => {
 
   let isMisleadingChart = false;
   let isBadChart = false;
-  let description =
+  let description: ReactNode =
     'This chart is a good alternative to the standard multi-tier pie (or sunburst) chart. It clearly represents the actual values while maintaining visual comparison.';
   let title = 'Good alternative';
 
@@ -139,7 +139,7 @@ export default () => {
             <BarSeries
               id="rain"
               name="Rain"
-              data={data}
+              data={data as typeof DAYS_OF_RAIN}
               xAccessor="season"
               yAccessors={['days']}
               splitSeriesAccessors={['precipitation']}
@@ -177,7 +177,7 @@ export default () => {
             <BarSeries
               id="issues"
               name="Issues"
-              data={data}
+              data={data as typeof GITHUB_DATASET}
               xAccessor="vizType"
               yAccessors={['count']}
               splitSeriesAccessors={['issueType']}
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index 7c9726a9b22..b135aea51d0 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -66,7 +66,10 @@ export default () => {
   const [sliceOrderIdSelected, setSliceOrderIdSelected] = useState(
     sliceOrderRadios[0].id
   );
-  const [sliceOrderConfig, setSliceOrderConfig] = useState({
+  const [sliceOrderConfig, setSliceOrderConfig] = useState<{
+    clockwiseSectors?: boolean;
+    specialFirstInnermostSector?: boolean;
+  }>({
     clockwiseSectors: false,
   });
   const [sliceOrderConfigText, setSliceOrderConfigText] = useState(
@@ -77,7 +80,7 @@ export default () => {
     pieTypeRadios[0].id
   );
 
-  const [numSlices, setNumSlices] = useState('3');
+  const [numSlices, setNumSlices] = useState(3);
 
   const [grouped, setGrouped] = useState(true);
   const [showLegend, setShowLegend] = useState(false);
@@ -133,7 +136,7 @@ export default () => {
 
   const themeOverrides = {
     partition: {
-      emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4,
+      emptySizeRatio: pieTypeIdSelected.includes('Donut') ? 0.4 : undefined,
     },
   };
 
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index 497b67fc51a..50729c2dfca 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -3,8 +3,11 @@ import moment from 'moment';
 import {
   Chart,
   Settings,
+  type SettingsProps,
   Tooltip,
+  type TooltipProps,
   Axis,
+  type AxisProps,
   timeFormatter,
   niceTimeFormatByDay,
   LineAnnotation,
@@ -34,14 +37,33 @@ import {
   formatDate,
   dateFormatAliases,
   withEuiTheme,
+  type WithEuiThemeProps,
 } from '../../../../src/services';
 
 import { MultiChartCard, ChartCard } from './shared';
 
 import { TIME_DATA, TIME_DATA_2 } from './data';
 
-class Sizes extends Component {
-  constructor(props) {
+type State = {
+  multi: boolean;
+  stacked: boolean;
+  width: number;
+  data1: typeof TIME_DATA;
+  data2: typeof TIME_DATA_2;
+  tooltipProps?: TooltipProps;
+  legendPosition?: SettingsProps['legendPosition'];
+  xAxisTitle?: AxisProps['title'];
+  xAxisFormatter?: AxisProps['tickFormat'];
+  xAxisStyle?: AxisProps['style'];
+  yAxisStyle?: AxisProps['style'];
+  changeDescription?: string;
+};
+class Sizes extends Component<WithEuiThemeProps, State> {
+  smallSize: number;
+  mediumSize: number;
+  xsmallSize: number;
+
+  constructor(props: WithEuiThemeProps) {
     super(props);
 
     this.mediumSize = 50;
@@ -65,7 +87,7 @@ class Sizes extends Component {
     const data1 = TIME_DATA.slice();
     const data2 = TIME_DATA_2.slice();
     let tooltipProps;
-    let legendPosition = 'right';
+    let legendPosition: SettingsProps['legendPosition'] = 'right';
     const xAxisFormatter = timeFormatter(niceTimeFormatByDay(1));
     let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`;
     let xAxisStyle;
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx
index a2adac49205..8ffef39feb2 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.tsx
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -21,7 +21,7 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import { CHART_COMPONENTS, ChartCard } from './shared';
+import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared';
 import {
   euiPaletteColorBlind,
   euiPalettePositive,
@@ -29,6 +29,7 @@ import {
   euiPaletteGray,
   useEuiTheme,
 } from '../../../../src/services';
+import type { EuiPalette } from '../../../../src/services/color/eui_palettes';
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -60,12 +61,14 @@ export default () => {
     colorTypeRadios[0].id
   );
   const [colorType, setColorType] = useState(colorTypeRadios[0].label);
-  const [numCharts, setNumCharts] = useState('3');
-  const [data, setData] = useState([]);
+  const [numCharts, setNumCharts] = useState(3);
+  const [data, setData] = useState<Array<{ x: number; y: number; g: string }>>(
+    []
+  );
   const [dataString, setDataString] = useState('[{x: 1, y: 5.5, g: 0}]');
-  const [vizColors, setVizColors] = useState();
-  const [vizColorsString, setVizColorsString] = useState();
-  const [chartType, setChartType] = useState('LineSeries');
+  const [vizColors, setVizColors] = useState<EuiPalette | undefined>();
+  const [vizColorsString, setVizColorsString] = useState('');
+  const [chartType, setChartType] = useState<ChartType>('LineSeries');
 
   useEffect(() => {
     createCategoryChart(3);
@@ -110,7 +113,7 @@ export default () => {
     setData(data);
     setDataString("[{x: 1, y: 5.5, g: 'Categorical 1'}]");
     setVizColors(undefined);
-    setVizColorsString(undefined);
+    setVizColorsString('');
     setChartType('LineSeries');
   };
 

From f4703920ca938793f96ce5c572472be0c70c2644 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:55:53 -0700
Subject: [PATCH 15/19] Clean up palette obj iteration types

- including obj iteration microperf improvements
---
 src-docs/src/views/elastic_charts/theming.tsx | 34 +++++++------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/theming.tsx b/src-docs/src/views/elastic_charts/theming.tsx
index 925baf34e3c..8810a9e814d 100644
--- a/src-docs/src/views/elastic_charts/theming.tsx
+++ b/src-docs/src/views/elastic_charts/theming.tsx
@@ -46,27 +46,21 @@ const paletteData = {
   euiPaletteGray,
 };
 
-const paletteNames = Object.keys(paletteData);
+const palettes = Object.entries(paletteData).map(([paletteName, palette]) => {
+  return {
+    value: paletteName,
+    title: paletteName,
+    palette:
+      palette === euiPaletteColorBlind
+        ? euiPaletteColorBlind({ sortBy: 'natural' })
+        : palette(10),
+    type: 'fixed' as const,
+  };
+});
 
 export default () => {
   const { colorMode } = useEuiTheme();
 
-  const palettes = paletteNames.map((paletteName, index) => {
-    const options =
-      index > 0
-        ? 10
-        : {
-            sortBy: 'natural',
-          };
-
-    return {
-      value: paletteName,
-      title: paletteName,
-      palette: paletteData[paletteNames[index]](options),
-      type: 'fixed',
-    };
-  });
-
   const [barPalette, setBarPalette] = useState('euiPaletteColorBlind');
 
   /**
@@ -84,14 +78,12 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const barPaletteIndex = paletteNames.findIndex((item) => item === barPalette);
-
   const customTheme =
-    barPaletteIndex > 0
+    barPalette !== 'euiPaletteColorBlind'
       ? [
           {
             colors: {
-              vizColors: paletteData[paletteNames[barPaletteIndex]](5),
+              vizColors: paletteData[barPalette as keyof typeof paletteData](5),
             },
           },
           theme,

From 82f65478bffe2ce68dc6f3d339dfd123924143ce Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:56:04 -0700
Subject: [PATCH 16/19] Convert all Demo JS tabs to `TSX`

---
 src-docs/src/views/elastic_charts/accessibility_example.js | 6 +++---
 src-docs/src/views/elastic_charts/pie_example.js           | 4 ++--
 src-docs/src/views/elastic_charts/sparklines_example.js    | 2 +-
 src-docs/src/views/elastic_charts/theming_example.js       | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
index 3cdfe7be46b..4ad80adb94a 100644
--- a/src-docs/src/views/elastic_charts/accessibility_example.js
+++ b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -209,7 +209,7 @@ export const ElasticChartsAccessibilityExample = {
 </Chart>`,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: SunburstSource,
         },
       ],
@@ -283,7 +283,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <TextureMultiSeriesChart />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: TextureMultiSeriesChartSource,
         },
       ],
@@ -327,7 +327,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <AccessibilityBullet />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: BulletChartSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
index eb0ae03d7b0..11229ce620b 100644
--- a/src-docs/src/views/elastic_charts/pie_example.js
+++ b/src-docs/src/views/elastic_charts/pie_example.js
@@ -146,7 +146,7 @@ export const ElasticChartsPieExample = {
       title: 'Pie and donut charts',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: pieSource,
         },
       ],
@@ -270,7 +270,7 @@ const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIG
       title: 'Sunbursts and treemaps',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: treemapsSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index ba0c16b5254..383f7a3ee85 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -30,7 +30,7 @@ export const ElasticChartsSparklinesExample = {
       title: 'Sparklines',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: sparklinesSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js
index ce86740d63e..9c48b22e2ad 100644
--- a/src-docs/src/views/elastic_charts/theming_example.js
+++ b/src-docs/src/views/elastic_charts/theming_example.js
@@ -43,7 +43,7 @@ export const ElasticChartsThemingExample = {
       title: 'Theming via EUI',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: themingSource,
         },
       ],

From dfa2a69a34e9c1185e43741ff8fa1dc6032f2884 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 15:57:37 -0700
Subject: [PATCH 17/19] Remove React 18 @ts-ignores

- charts lib appears to work now with react 18
---
 src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx  | 1 -
 .../views/elastic_charts/metric/metric_chart_grid_column.tsx    | 1 -
 .../src/views/elastic_charts/metric/metric_chart_grid_row.tsx   | 1 -
 .../src/views/elastic_charts/metric/metric_chart_no_data.tsx    | 2 --
 .../src/views/elastic_charts/metric/metric_chart_overview.tsx   | 1 -
 .../views/elastic_charts/metric/metric_chart_progress_bar.tsx   | 2 --
 .../src/views/elastic_charts/metric/metric_chart_resizing.tsx   | 1 -
 .../views/elastic_charts/metric/metric_chart_single_value.tsx   | 1 -
 src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx | 1 -
 9 files changed, 11 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
index 4508de3f285..e8fb53581fd 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
@@ -149,7 +149,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 800 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[800, 300]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric id="1" data={DATA} />
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
index 5e1810534fa..d5c6bff2679 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 400]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
index 0c690b90b8a..4209e1876fb 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 600 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[600, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
index 1b1fa0ae520..eea02bf9a56 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
@@ -32,7 +32,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">No Data</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 baseTheme={chartBaseTheme}
@@ -64,7 +63,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">Filtered Out</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 theme={euiChartTheme.theme}
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
index 0f13121c6b6..15862ec3c2f 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
@@ -26,7 +26,6 @@ export default () => {
   }));
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings theme={euiChartTheme.theme} baseTheme={chartBaseTheme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
index 412c4040c4e..cd1df762b94 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
@@ -33,7 +33,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
@@ -65,7 +64,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
index cd46d472587..4b47c179674 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
@@ -41,7 +41,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', height: '100%', width: '100%' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={['100%', '100%']}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
index 9083061b319..ad973dca3e9 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
@@ -74,7 +74,6 @@ export default () => {
     <EuiFlexGroup direction={'column'}>
       <EuiFlexItem grow={0}>
         <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
index 2e42a469ea1..00653322f43 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
@@ -28,7 +28,6 @@ export default () => {
 
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

From c99b5e36a303a40cdaea0f4e0c8d4c9f48ba1b34 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Oct 2023 16:03:20 -0700
Subject: [PATCH 18/19] [misc] Fix DOM nesting error

---
 .../elastic_charts/metric/metric_chart_example.js      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_example.js b/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
index 8e1891d9292..690f391676f 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
@@ -465,9 +465,11 @@ export const MetricChartExample = {
     {
       title: 'No Data',
       text: (
-        <p>
-          Various situations could lead to an uncertain state. We designed two{' '}
-          <strong>empty states</strong> that should cover most of those cases:
+        <>
+          <p>
+            Various situations could lead to an uncertain state. We designed two{' '}
+            <strong>empty states</strong> that should cover most of those cases:
+          </p>
           <ul>
             <li>
               When an applied filter makes the metric uncomputable (missing
@@ -483,7 +485,7 @@ export const MetricChartExample = {
               component won&apos;t be rendered, and an empty box is rendered.
             </li>
           </ul>
-        </p>
+        </>
       ),
       demo: <NoData />,
     },

From 9c1c992c1d0ab769898ab1145538d9b755e5b2d0 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Wed, 11 Oct 2023 11:04:33 -0700
Subject: [PATCH 19/19] fix: minor changes in api corrections

---
 src-docs/src/views/elastic_charts/pie.tsx     | 10 +++++++--
 .../src/views/elastic_charts/sparklines.tsx   | 21 ++++++-------------
 .../elastic_charts/sparklines_example.js      |  4 +---
 .../src/views/elastic_charts/time_chart.tsx   |  2 +-
 4 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/pie.tsx b/src-docs/src/views/elastic_charts/pie.tsx
index 26eb8fb532d..aac1e141b04 100644
--- a/src-docs/src/views/elastic_charts/pie.tsx
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
+import {
+  Chart,
+  Partition,
+  Settings,
+  PartitionLayout,
+  PartialTheme,
+} from '@elastic/charts';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -54,7 +60,7 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
-  const themeOverrides = {
+  const themeOverrides: PartialTheme = {
     partition: { emptySizeRatio: 0.4 },
   };
 
diff --git a/src-docs/src/views/elastic_charts/sparklines.tsx b/src-docs/src/views/elastic_charts/sparklines.tsx
index 45db597dcb4..95159a38ec1 100644
--- a/src-docs/src/views/elastic_charts/sparklines.tsx
+++ b/src-docs/src/views/elastic_charts/sparklines.tsx
@@ -92,11 +92,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings
-                  theme={theme}
-                  showLegend={false}
-                  externalPointerEvents={{ tooltip: { visible: false } }}
-                />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <LineSeries
                   id="increase"
                   data={TIME_DATA_SMALL}
@@ -130,11 +127,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 16 }}>
-                <Settings
-                  theme={theme}
-                  showLegend={false}
-                  externalPointerEvents={{ tooltip: { visible: false } }}
-                />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <LineSeries
                   id="major"
                   data={TIME_DATA_MAJOR}
@@ -160,11 +154,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings
-                  theme={theme}
-                  showLegend={false}
-                  externalPointerEvents={{ tooltip: { visible: false } }}
-                />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <AreaSeries
                   id="subtle"
                   data={TIME_DATA_SMALL_REVERSE}
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index 383f7a3ee85..a1fdf1cf090 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -61,9 +61,7 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI
               <EuiCode language="js">Settings.showLegend = false</EuiCode>
             </li>
             <li>
-              <EuiCode language="js">
-                Settings.externalPointerEvents.tooltip.visible = false
-              </EuiCode>
+              <EuiCode language="js">Tooltip.type = &quot;none&quot;</EuiCode>
             </li>
           </ul>
         </>
diff --git a/src-docs/src/views/elastic_charts/time_chart.tsx b/src-docs/src/views/elastic_charts/time_chart.tsx
index 2e3a216f542..7b325b442f0 100644
--- a/src-docs/src/views/elastic_charts/time_chart.tsx
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -99,7 +99,7 @@ export default () => {
           position="bottom"
           tickFormat={timeFormatter(niceTimeFormatByDay(1))}
           gridLine={{ visible: chartType !== 'BarSeries' }}
-          style={{ tickLabel: { padding: 0 } }}
+          style={{ tickLine: { padding: 0 } }}
         />
         <Axis
           id="left-axis"