diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
index f413b122d913c..6e04d1a4ff958 100644
--- a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
@@ -8,7 +8,7 @@
import React from 'react';
import { render } from 'react-dom';
import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
import { PaletteRegistry } from 'src/plugins/charts/public';
import { Visualization, OperationMetadata, AccessorConfig } from '../types';
import { toExpression, toPreviewExpression } from './to_expression';
@@ -265,10 +265,15 @@ export const getPieVisualization = ({
}
}
return metricColumnsWithArrayValues.map((label) => (
- <>
- {label} contains array values. Your visualization may not render as
- expected.
- >
+ {label},
+ }}
+ />
));
},
diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
index 8fbc8e8b2ef7a..c1041e1fefcfd 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
@@ -929,12 +929,17 @@ describe('xy_visualization', () => {
);
expect(warningMessages).toHaveLength(1);
expect(warningMessages && warningMessages[0]).toMatchInlineSnapshot(`
-
-
- Label B
-
- contains array values. Your visualization may not render as expected.
-
+
+ Label B
+ ,
+ }
+ }
+ />
`);
});
});
diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
index fa9d46be11d68..ad2c9fd713985 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
@@ -9,7 +9,7 @@ import React from 'react';
import { uniq } from 'lodash';
import { render } from 'react-dom';
import { Position } from '@elastic/charts';
-import { I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { PaletteRegistry } from 'src/plugins/charts/public';
import { DataPublicPluginStart } from 'src/plugins/data/public';
@@ -439,10 +439,15 @@ export const getXyVisualization = ({
}
}
return accessorsWithArrayValues.map((label) => (
- <>
- {label} contains array values. Your visualization may not render as
- expected.
- >
+ {label},
+ }}
+ />
));
},
});