[Lens] Chart switch redesign (#187475)

## Summary 1. The main change is chart switch redesign: <img width="401" alt="Screenshot 2024-08-26 at 15 08 50" src="https://github.com/user-attachments/assets/a2da17d5-b068-4eeb-9723-0b64cc6cbcf0"> 2. Toolbar changes for most of the visualization (refer to design files) <img width="930" alt="Screenshot 2024-08-26 at 15 09 14" src="https://github.com/user-attachments/assets/7f76aed3-99d8-438b-b304-91042c99381d"> <img width="942" alt="Screenshot 2024-08-26 at 15 08 56" src="https://github.com/user-attachments/assets/5bed1916-8723-42b5-8f7d-4b363c5736c9"> #### Subtasks - reorders the elements in the charts switch - redesigns chart switch visually - adds deprecated group (metric) - changes the add subtype layer menu - adds description to chart switch - subselect for bar/gauge visualizations - adds border to workspace panel - changes `boxesHorizontal` icon to `boxesVertical` Resolves #179260 also fixes #182677 switching between chart types
elastic · Sep 5, 2024 · 9e8244f · 9e8244f
1 parent ff630fd
commit 9e8244f
Show file tree

Hide file tree

Showing 133 changed files with 3,172 additions and 2,636 deletions.
diff --git a/docs/management/rollups/create_and_manage_rollups.asciidoc b/docs/management/rollups/create_and_manage_rollups.asciidoc
@@ -165,7 +165,7 @@ as your source to see both the raw and rolled up data.
 [role="screenshot"]
 image::images/management-create-rollup-bar-chart.png[Create visualization of rolled up data]
 
-. Select *Bar vertical stacked* in the chart type dropdown.
+. Select *Bar* in the chart type dropdown.
 
 . Add the `@timestamp` field to the *Horizontal axis*.
 

diff --git a/packages/kbn-chart-icons/index.ts b/packages/kbn-chart-icons/index.ts
@@ -38,10 +38,18 @@ export {
   EuiIconLegend,
   IconRegionMap,
   IconChartHeatmap,
+  IconChartGauge,
   IconChartHorizontalBullet,
+  IconDonutHoleLarge,
+  IconDonutHoleMedium,
+  IconDonutHoleSmall,
   IconChartVerticalBullet,
+  IconChartLinearSimple,
   IconChartGaugeSemiCircle,
+  IconChartGaugeSemiCircleSimple,
   IconChartGaugeArc,
+  IconChartGaugeArcSimple,
   IconChartGaugeCircle,
+  IconChartGaugeCircleSimple,
   IconChartTagcloud,
 } from './src/assets';
diff --git a/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx b/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx
@@ -42,8 +42,12 @@ import {
   EuiIconLegend,
   IconRegionMap,
   IconChartHeatmap,
+  IconChartGauge,
   IconChartHorizontalBullet,
   IconChartVerticalBullet,
+  IconDonutHoleLarge,
+  IconDonutHoleMedium,
+  IconDonutHoleSmall,
 } from '../..';
 
 export default {
@@ -183,10 +187,17 @@ const IconsArray: Array<{
     title: 'IconChartHorizontalBullet',
     Component: IconChartHorizontalBullet,
   },
+  {
+    title: 'IconChartGauge',
+    Component: IconChartGauge,
+  },
   {
     title: 'IconChartVerticalBullet',
     Component: IconChartVerticalBullet,
   },
+  { title: 'IconDonutHoleLarge', Component: IconDonutHoleLarge },
+  { title: 'IconDonutHoleMedium', Component: IconDonutHoleMedium },
+  { title: 'IconDonutHoleSmall', Component: IconDonutHoleSmall },
 ];
 
 interface RootComponentProps {

diff --git a/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
@@ -8,17 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from '../icon_simple_wrapper';
 
-export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconCircle = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M7.427.522c-.813.081-1.398.21-2.039.45a7.318 7.318 0 0 0-2.67 1.72A7.045 7.045 0 0 0 1.28 4.68 7.241 7.241 0 0 0 .507 8c0 1.196.243 2.24.773 3.32a7.047 7.047 0 0 0 1.425 1.975A7.047 7.047 0 0 0 4.68 14.72a7.254 7.254 0 0 0 3.32.773 7.254 7.254 0 0 0 3.32-.773 7.047 7.047 0 0 0 1.975-1.425 7.047 7.047 0 0 0 1.425-1.975A7.254 7.254 0 0 0 15.493 8a7.254 7.254 0 0 0-.773-3.32 7.045 7.045 0 0 0-1.438-1.988C12.111 1.524 10.695.818 9.027.571 8.773.533 7.659.499 7.427.522m1.426 1.041a6.519 6.519 0 0 1 3.091 1.271c.329.246.976.893 1.222 1.222.561.751.976 1.634 1.164 2.479a6.766 6.766 0 0 1 0 2.93c-.414 1.861-1.725 3.513-3.463 4.363a6.76 6.76 0 0 1-1.987.616c-.424.065-1.336.065-1.76 0-1.948-.296-3.592-1.359-4.627-2.993a7.502 7.502 0 0 1-.634-1.332A6.158 6.158 0 0 1 1.514 8c0-1.039.201-1.925.646-2.84.34-.698.686-1.18 1.253-1.747A5.956 5.956 0 0 1 5.16 2.16a6.452 6.452 0 0 1 3.693-.597" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
@@ -8,18 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from '../icon_simple_wrapper';
 
-export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width="16"
-    height="16"
-    fill="none"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />
-  </svg>
+export const IconTriangle = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
+    <path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />{' '}
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_bottom.tsx b/packages/kbn-chart-icons/src/assets/axis_bottom.tsx
@@ -7,26 +7,12 @@
  */
 
 import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisBottom = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisBottom = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M5 1.5a.5.5 0 111 0v7a.5.5 0 01-1 0v-7zM15.39 11.39a1.5 1.5 0 010 2.12l-2.122 2.122a.5.5 0 11-.707-.707l2.121-2.122a.5.5 0 000-.707l-2.121-2.12a.5.5 0 11.707-.708l2.121 2.121zM3.439 9.269a.5.5 0 010 .707l-2.122 2.121a.5.5 0 000 .707l2.122 2.121a.5.5 0 01-.707.708L.61 13.51a1.5 1.5 0 010-2.121l2.122-2.121a.5.5 0 01.707 0zM8 3a.5.5 0 01.5.5v5a.5.5 0 01-1 0v-5A.5.5 0 018 3zM11 5.5a.5.5 0 00-1 0v3a.5.5 0 001 0v-3z" />
     <path d="M3.5 12a.5.5 0 000 1h9a.5.5 0 000-1h-9z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_left.tsx b/packages/kbn-chart-icons/src/assets/axis_left.tsx
@@ -6,28 +6,14 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisLeft = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisLeft = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M7.378 3.585a.5.5 0 00.353-.854L5.61.611a1.5 1.5 0 00-2.121 0L1.367 2.73a.5.5 0 00.708.707l2.12-2.12a.5.5 0 01.708 0l2.121 2.12a.5.5 0 00.354.147z" />
     <path d="M5.046 3.088v4.129l.005.04v5.658a.5.5 0 01-.992.09l-.01-.09V8.786l-.004-.04V3.087a.5.5 0 01.992-.09l.01.09z" />
     <path d="M4.55 15.829a1.5 1.5 0 001.06-.44l2.122-2.121a.5.5 0 10-.707-.707l-2.121 2.121a.5.5 0 01-.708 0l-2.12-2.121a.5.5 0 00-.708.707l2.121 2.121a1.5 1.5 0 001.061.44zM13.5 4a.5.5 0 01.5.5v7a.5.5 0 11-1 0v-7a.5.5 0 01.5-.5zM10.5 6.5a.5.5 0 011 0v5a.5.5 0 11-1 0v-5zM8.5 8a.5.5 0 00-.5.5v3a.5.5 0 101 0v-3a.5.5 0 00-.5-.5z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_right.tsx b/packages/kbn-chart-icons/src/assets/axis_right.tsx
@@ -6,28 +6,14 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisRight = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisRight = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M8.622 3.585a.5.5 0 01-.353-.854L10.39.611a1.5 1.5 0 012.121 0l2.122 2.12a.5.5 0 11-.707.707l-2.122-2.12a.5.5 0 00-.707 0l-2.121 2.12a.5.5 0 01-.354.147z" />
     <path d="M11.95 12.915V8.786l.005-.04V3.087a.5.5 0 00-.992-.09l-.01.09v4.129l-.004.04v5.658a.5.5 0 00.992.09l.01-.09z" />
     <path d="M11.45 15.829a1.5 1.5 0 01-1.06-.44l-2.122-2.121a.5.5 0 11.707-.707l2.121 2.121a.5.5 0 00.707 0l2.122-2.121a.5.5 0 01.707.707l-2.121 2.121a1.5 1.5 0 01-1.061.44zM2.5 4a.5.5 0 00-.5.5v7a.5.5 0 101 0v-7a.5.5 0 00-.5-.5zM5.5 6.5a.5.5 0 00-1 0v5a.5.5 0 101 0v-5zM7.5 8a.5.5 0 01.5.5v3a.5.5 0 11-1 0v-3a.5.5 0 01.5-.5z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/axis_top.tsx b/packages/kbn-chart-icons/src/assets/axis_top.tsx
@@ -6,31 +6,17 @@
  * Side Public License, v 1.
  */
 
+import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
+import { IconSimpleWrapper } from './icon_simple_wrapper';
 
-export const EuiIconAxisTop = ({
-  title,
-  titleId,
-  ...props
-}: {
-  title: string;
-  titleId: string;
-}) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const EuiIconAxisTop = (props: Omit<EuiIconProps, 'type'>) => (
+  <IconSimpleWrapper {...props}>
     <path d="M4.99991 7.49999C4.99991 7.22384 5.22376 6.99999 5.49991 6.99999C5.77605 6.99999 5.99991 7.22384 5.99991 7.49999V14.5C5.99991 14.7761 5.77605 15 5.49991 15C5.22376 15 4.99991 14.7761 4.99991 14.5V7.49999Z" />
     <path d="M15.3893 2.38929C15.6706 2.67059 15.8287 3.05212 15.8287 3.44995C15.8287 3.84777 15.6706 4.2293 15.3893 4.51061L13.268 6.63193C13.1742 6.7257 13.0471 6.77838 12.9145 6.77838C12.7818 6.77838 12.6547 6.7257 12.5609 6.63193C12.4671 6.53816 12.4145 6.41098 12.4145 6.27838C12.4145 6.14577 12.4671 6.01859 12.5609 5.92482L14.6822 3.8035C14.776 3.70973 14.8287 3.58256 14.8287 3.44995C14.8287 3.31734 14.776 3.19016 14.6822 3.09639L12.5609 0.975075C12.4671 0.881307 12.4145 0.754129 12.4145 0.621522C12.4145 0.488914 12.4671 0.361736 12.5609 0.267968C12.6547 0.1742 12.7819 0.121521 12.9145 0.121521C13.0471 0.121521 13.1742 0.1742 13.268 0.267968L15.3893 2.38929Z" />
     <path d="M3.43867 0.26864C3.53243 0.362408 3.58511 0.489585 3.58511 0.622193C3.58511 0.754801 3.53243 0.881978 3.43867 0.975746L1.31735 3.09707C1.22358 3.19083 1.1709 3.31801 1.1709 3.45062C1.1709 3.58323 1.22358 3.71041 1.31735 3.80417L3.43867 5.92549C3.53243 6.01926 3.58511 6.14644 3.58511 6.27905C3.58511 6.41166 3.53243 6.53883 3.43867 6.6326C3.3449 6.72637 3.21772 6.77905 3.08511 6.77905C2.9525 6.77905 2.82533 6.72637 2.73156 6.6326L0.610239 4.51128C0.328934 4.22998 0.170898 3.84844 0.170898 3.45062C0.170898 3.0528 0.328934 2.67126 0.610238 2.38996L2.73156 0.26864C2.82533 0.174871 2.9525 0.122192 3.08511 0.122192C3.21772 0.122192 3.3449 0.174871 3.43867 0.26864Z" />
     <path d="M7.99991 6.99999C8.27605 6.99999 8.49991 7.22384 8.49991 7.49999V12.5C8.49991 12.7761 8.27605 13 7.99991 13C7.72377 13 7.49991 12.7761 7.49991 12.5V7.49999C7.49991 7.22384 7.72377 6.99999 7.99991 6.99999Z" />
     <path d="M10.9999 7.49999C10.9999 7.22384 10.776 6.99999 10.4999 6.99999C10.2238 6.99999 9.99991 7.22384 9.99991 7.49999V10.5C9.99991 10.7761 10.2238 11 10.4999 11C10.776 11 10.9999 10.7761 10.9999 10.5V7.49999Z" />
     <path d="M3.50015 2.99999C3.22401 2.99999 3.00015 3.22384 3.00015 3.49999C3.00015 3.77613 3.22401 3.99999 3.50015 3.99999H12.5002C12.7763 3.99999 13.0002 3.77613 13.0002 3.49999C13.0002 3.22384 12.7763 2.99999 12.5002 2.99999H3.50015Z" />
-  </svg>
+  </IconSimpleWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area.tsx b/packages/kbn-chart-icons/src/assets/chart_area.tsx
@@ -9,18 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartArea = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
       className={colors.accent}
@@ -29,5 +21,5 @@ export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, '
       d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx b/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
@@ -9,22 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartAreaPercentage = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartAreaPercentage = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
       className={colors.accent}
@@ -33,5 +21,5 @@ export const IconChartAreaPercentage = ({
       d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx b/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
@@ -9,18 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={31}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartAreaStacked = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
       className={colors.accent}
@@ -29,5 +21,5 @@ export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconP
       d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
       className={colors.subdued}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_bar.tsx b/packages/kbn-chart-icons/src/assets/chart_bar.tsx
@@ -9,18 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartBar = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <path
       d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
       className={colors.subdued}
@@ -29,5 +21,5 @@ export const IconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
       d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
       className={colors.accent}
     />
-  </svg>
+  </ChartIconWrapper>
 );
diff --git a/packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
@@ -9,22 +9,10 @@
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 import { colors } from './common_styles';
+import { ChartIconWrapper } from './icon_simple_wrapper';
 
-export const IconChartBarAnnotations = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width="30"
-    height="22"
-    viewBox="0 0 30 22"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
+export const IconChartBarAnnotations = (props: Omit<EuiIconProps, 'type'>) => (
+  <ChartIconWrapper {...props}>
     <g>
       <path
         className={colors.subdued}
@@ -35,5 +23,5 @@ export const IconChartBarAnnotations = ({
         d="M10 1a1 1 0 011-1h3a1 1 0 011 1h3v4h-3a1 1 0 01-1-1h-2v9a1 1 0 11-2 0V1z"
       />
     </g>
-  </svg>
+  </ChartIconWrapper>
 );