[Lens] passing locale to charts (#168571)

## Summary <img width="973" alt="Screenshot 2023-10-17 at 11 13 20" src="ff08efbe-dec7-4a45-ad25-17debb679864"> Passes `locale={i18n.getLocale()}` to <Settings/> Component for elastic charts. For now it only matters for translating months, days etc in time histogram chart, but I'd rather pass it everywhere in case if we introduce some copy in the future. Fixes https://github.com/elastic/kibana/issues/166240
2025-04-23 09:19:04 -04:00 · 2023-10-17 12:12:38 +02:00 · 2023-10-17 12:12:38 +02:00 · 9e951f59ac
commit 9e951f59ac
parent 291f5eabc1
97 changed files with 208 additions and 35 deletions
--- a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx
+++ b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx
@ -484,6 +484,7 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
            <Chart size={{ height: 200, width: 300 - 32 }}>
              <Tooltip type={TooltipType.None} />
              <Settings
+                locale={i18n.getLocale()}
                theme={customChartTheme}
                baseTheme={chartBaseTheme}
                xDomain={
@ -533,7 +534,12 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
            size={{ height: 200, width: '100%' }}
          >
            <Tooltip type={TooltipType.None} />
-            <Settings rotation={90} theme={customChartTheme} baseTheme={chartBaseTheme} />
+            <Settings
+              locale={i18n.getLocale()}
+              rotation={90}
+              theme={customChartTheme}
+              baseTheme={chartBaseTheme}
+            />

            <Axis
              id="key"
--- a/src/plugins/chart_expressions/expression_gauge/public/components/snapshots/gauge_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/snapshots/gauge_component.test.tsx.snap
@ -8,6 +8,7 @@ exports[`GaugeComponent renders the chart 1`] = `
    ariaUseDefaultSummary={true}
    baseTheme={Object {}}
    debugState={false}
+    locale="en"
    noResults={
      <EmptyPlaceholder
        icon={[Function]}
--- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
@ -14,6 +14,7 @@ import type { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
 import { getOverridesFor } from '@kbn/chart-expressions-common';
 import { isVisDimension } from '@kbn/visualizations-plugin/common/utils';
+import { i18n } from '@kbn/i18n';
 import {
  GaugeRenderProps,
  GaugeLabelMajorMode,
@ -370,6 +371,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
            ariaLabel={args.ariaLabel}
            ariaUseDefaultSummary={!args.ariaLabel}
            onRenderChange={onRenderChange}
+            locale={i18n.getLocale()}
            {...getOverridesFor(overrides, 'settings')}
          />
          <Goal
--- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
+++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
@ -738,6 +738,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
              onBrushEnd={interactive ? (onBrushEnd as BrushEndListener) : undefined}
              ariaLabel={args.ariaLabel}
              ariaUseDefaultSummary={!args.ariaLabel}
+              locale={i18n.getLocale()}
              {...settingsOverrides}
            />
            <Heatmap
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@ -303,6 +303,7 @@ export const MetricVis = ({
      >
        <Chart {...getOverridesFor(overrides, 'chart')}>
          <Settings
+            locale={i18n.getLocale()}
            theme={[
              {
                background: { color: 'transparent' },
--- a/src/plugins/chart_expressions/expression_partition_vis/public/components/snapshots/partition_vis_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/snapshots/partition_vis_component.test.tsx.snap
@ -245,6 +245,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
          legendPosition="right"
          legendSize={130}
          legendSort={[Function]}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="donut"
@ -639,6 +640,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
          legendColorPicker={[Function]}
          legendPosition="right"
          legendSize={130}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="mosaic"
@ -1097,6 +1099,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
          legendPosition="right"
          legendSize={130}
          legendSort={[Function]}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="pie"
@ -1555,6 +1558,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
          legendPosition="right"
          legendSize={130}
          legendSort={[Function]}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="pie"
@ -1949,6 +1953,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
          legendColorPicker={[Function]}
          legendPosition="right"
          legendSize={130}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="treemap"
@ -2302,6 +2307,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
          legendPosition="right"
          legendSize={130}
          legendSort={[Function]}
+          locale="en"
          noResults={
            <VisualizationNoResults
              chartType="waffle"
--- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
@ -591,6 +591,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                onRenderChange={onRenderChange}
                ariaLabel={props.visParams.ariaLabel}
                ariaUseDefaultSummary={!props.visParams.ariaLabel}
+                locale={i18n.getLocale()}
                {...settingsOverrides}
              />
              <Partition
--- a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
@ -8,6 +8,7 @@

 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import { throttle } from 'lodash';
 import { EuiIconTip, EuiResizeObserver } from '@elastic/eui';
 import { IconChartTagcloud } from '@kbn/chart-icons';
@ -237,6 +238,7 @@ export const TagCloudChart = ({
              onRenderChange={onRenderChange}
              ariaLabel={visParams.ariaLabel}
              ariaUseDefaultSummary={!visParams.ariaLabel}
+              locale={i18n.getLocale()}
              {...getOverridesFor(overrides, 'settings')}
            />
            <Wordcloud
--- a/src/plugins/chart_expressions/expression_xy/public/components/snapshots/xy_chart.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_xy/public/components/snapshots/xy_chart.test.tsx.snap
@ -597,6 +597,7 @@ exports[`XYChart component it renders area 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -1606,6 +1607,7 @@ exports[`XYChart component it renders bar 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -2615,6 +2617,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -3624,6 +3627,7 @@ exports[`XYChart component it renders line 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -4633,6 +4637,7 @@ exports[`XYChart component it renders stacked area 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -5642,6 +5647,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -6651,6 +6657,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -7690,6 +7697,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -8937,6 +8945,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
@ -10177,6 +10186,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
        }
        legendPosition="top"
        legendSize={130}
+        locale="en"
        noResults={
          <EmptyPlaceholder
            className="xyChart__empty"
--- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
+++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
@ -33,6 +33,7 @@ import {
 } from '@elastic/charts';
 import { partition } from 'lodash';
 import { IconType } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { PaletteRegistry } from '@kbn/coloring';
 import { RenderMode } from '@kbn/expressions-plugin/common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
@ -852,6 +853,7 @@ export function XYChart({
                  }
                : undefined
            }
+            locale={i18n.getLocale()}
            {...settingsOverrides}
          />
          <XYCurrentTime
--- a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
+++ b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
@ -26,6 +26,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useActiveCursor } from '@kbn/charts-plugin/public';

 import type { IInterpreterRenderHandlers } from '@kbn/expressions-plugin/common';
+import { i18n } from '@kbn/i18n';
 import { AreaSeriesComponent, BarSeriesComponent } from './series';

 import {
@ -219,6 +220,7 @@ export const TimelionVisComponent = ({
          baseTheme={chartBaseTheme}
          ariaLabel={ariaLabel}
          ariaUseDefaultSummary={!ariaLabel}
+          locale={i18n.getLocale()}
        />

        <Axis
--- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
@ -9,6 +9,7 @@
 import React, { useRef, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { i18n } from '@kbn/i18n';
 import {
  MULTILAYER_TIME_AXIS_STYLE,
  renderEndzoneTooltip,
@ -231,6 +232,7 @@ export const TimeSeries = ({
        externalPointerEvents={{
          tooltip: { visible: syncTooltips, placement: Placement.Right },
        }}
+        locale={i18n.getLocale()}
      />

      {annotations.map(({ id, data, icon, color }) => {
--- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
+++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@ -489,6 +489,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
            debugState={window._echDebugStateFlag ?? false}
            showLegend={false}
            showLegendExtra={false}
+            locale={i18n.getLocale()}
          />
          <Axis id="aiops-histogram-left-axis" position={Position.Left} ticks={2} integersOnly />
          <Axis
--- a/x-pack/packages/ml/data_grid/components/column_chart.tsx
+++ b/x-pack/packages/ml/data_grid/components/column_chart.tsx
@ -13,6 +13,7 @@ import { euiTextTruncate, type EuiDataGridColumn } from '@elastic/eui';

 import { euiThemeVars } from '@kbn/ui-theme';

+import { i18n } from '@kbn/i18n';
 import { isUnsupportedChartData, ChartData } from '../lib/field_histograms';

 import { useColumnChart } from '../hooks/use_column_chart';
@ -82,6 +83,7 @@ export const ColumnChart: FC<Props> = ({
            <Settings
              // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
              theme={columnChartTheme}
+              locale={i18n.getLocale()}
            />
            <BarSeries
              id="histogram"
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/storage_treemap/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/storage_treemap/index.tsx
@ -22,6 +22,7 @@ import { Chart, Partition, PartitionLayout, Settings } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';

+import { i18n } from '@kbn/i18n';
 import {
  FlattenedBucket,
  getLayersMultiDimensional,
@ -158,6 +159,7 @@ const StorageTreemapComponent: React.FC<Props> = ({
              showLegend={false}
              theme={[treemapTheme, theme]}
              onElementClick={onElementClick}
+              locale={i18n.getLocale()}
            />
            <Partition
              data={flattenedBuckets}
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/ecs_summary_donut_chart/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/ecs_summary_donut_chart/index.tsx
@ -30,6 +30,7 @@ import {
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';

+import { i18n } from '@kbn/i18n';
 import { ChartLegend } from './chart_legend';
 import {
  getFillColor,
@ -38,7 +39,7 @@ import {
  getTabId,
 } from '../data_quality_panel/tabs/summary_tab/helpers';
 import { allMetadataIsEmpty } from './helpers';
-import * as i18n from './translations';
+import * as translations from './translations';
 import type { PartitionedFieldMetadata } from '../types';

 export const DEFAULT_HEIGHT = 180; // px
@ -135,7 +136,7 @@ const EcsSummaryDonutChartComponent: React.FC<Props> = ({
  return (
    <>
      <EuiTitle size="xs">
-        <h4 className="eui-textCenter">{i18n.CHART_TITLE}</h4>
+        <h4 className="eui-textCenter">{translations.CHART_TITLE}</h4>
      </EuiTitle>

      <EuiSpacer />
@ -155,10 +156,14 @@ const EcsSummaryDonutChartComponent: React.FC<Props> = ({
            justifyContent="center"
          >
            <EuiFlexItem className="eui-textTruncate">
-              <EuiButtonEmpty aria-label={i18n.FIELDS} color="text" onClick={showDefaultTab}>
+              <EuiButtonEmpty
+                aria-label={translations.FIELDS}
+                color="text"
+                onClick={showDefaultTab}
+              >
                <EuiText size="m">{partitionedFieldMetadata.all.length}</EuiText>
                <EuiText className="eui-textTruncate" size="s">
-                  {i18n.FIELDS}
+                  {translations.FIELDS}
                </EuiText>
              </EuiButtonEmpty>
            </EuiFlexItem>
@ -169,6 +174,7 @@ const EcsSummaryDonutChartComponent: React.FC<Props> = ({
              baseTheme={baseTheme}
              onElementClick={onElementClick}
              theme={[donutTheme, theme]}
+              locale={i18n.getLocale()}
            />
            <Partition
              data={summaryData}
--- a/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx
+++ b/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx
@ -22,6 +22,7 @@ import { EuiLoadingChart, EuiTextColor } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { SignificantTermHistogramItem } from '@kbn/ml-agg-utils';

+import { i18n } from '@kbn/i18n';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { useEuiTheme } from '../../hooks/use_eui_theme';

@ -105,7 +106,11 @@ export const MiniHistogram: FC<MiniHistogramProps> = ({
    <div css={cssChartSize}>
      <Chart>
        <Tooltip type={TooltipType.None} />
-        <Settings theme={[miniHistogramChartTheme, defaultChartTheme]} showLegend={false} />
+        <Settings
+          theme={[miniHistogramChartTheme, defaultChartTheme]}
+          showLegend={false}
+          locale={i18n.getLocale()}
+        />
        <BarSeries
          id="doc_count_overall"
          xScaleType={ScaleType.Time}
--- a/x-pack/plugins/apm/public/components/alerting/ui_components/chart_preview/index.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@ -26,6 +26,7 @@ import { IUiSettingsClient } from '@kbn/core/public';
 import { TimeUnitChar } from '@kbn/observability-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { useTheme } from '../../../../hooks/use_theme';
 import { getTimeZone } from '../../../shared/charts/helper/timezone';
@ -129,6 +130,7 @@ export function ChartPreview({
          showLegend={true}
          legendPosition={'bottom'}
          legendSize={legendSize}
+          locale={i18n.getLocale()}
        />
        <LineAnnotation
          dataValues={[{ dataValue: threshold }]}
--- a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx
@ -106,6 +106,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
                ? EUI_CHARTS_THEME_DARK.theme
                : EUI_CHARTS_THEME_LIGHT.theme
            }
+            locale={i18n.getLocale()}
          />
          <Axis
            id="x-axis"
--- a/x-pack/plugins/apm/public/components/app/mobile/service_overview/most_used_charts/sunburst_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/service_overview/most_used_charts/sunburst_chart.tsx
@ -100,7 +100,7 @@ export function SunburstChart({
      >
        {isDataAvailable ? (
          <Chart>
-            <Settings theme={theme} />
+            <Settings theme={theme} locale={i18n.getLocale()} />
            <Partition
              id={chartKey}
              data={data}
--- a/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
+++ b/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
@ -204,6 +204,7 @@ export function StorageDetailsPerService({
                      },
                      ...chartTheme,
                    ]}
+                    locale={i18n.getLocale()}
                    showLegend
                  />
                  <Partition
--- a/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx
@ -16,6 +16,7 @@ import {
  Settings,
 } from '@elastic/charts';
 import { useChartTheme } from '@kbn/observability-shared-plugin/public';
+import { i18n } from '@kbn/i18n';
 import { useProgressiveFetcher } from '../../../hooks/use_progressive_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { useApmParams } from '../../../hooks/use_apm_params';
@ -102,6 +103,7 @@ export function StorageChart() {
          ]}
          showLegend
          legendPosition={Position.Right}
+          locale={i18n.getLocale()}
        />
        <Axis
          id="x-axis"
--- a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx
@ -124,6 +124,7 @@ export function BreakdownChart({
              visible: true,
            },
          }}
+          locale={i18n.getLocale()}
        />
        <Axis
          id="x-axis"
--- a/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx
@ -207,6 +207,7 @@ export function DurationDistributionChart({
            showLegend={true}
            legendPosition={Position.Bottom}
            onBrushEnd={onChartSelection}
+            locale={i18n.getLocale()}
          />
          {selectionAnnotation !== undefined && (
            <RectAnnotation
--- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@ -131,6 +131,7 @@ export function InstancesLatencyDistributionChart({
            showLegend
            theme={chartTheme}
            xDomain={xDomain}
+            locale={i18n.getLocale()}
          />
          <BubbleSeries
            color={theme.eui.euiColorVis0}
--- a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
@ -24,6 +24,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import { useChartTheme } from '@kbn/observability-shared-plugin/public';
+import { i18n } from '@kbn/i18n';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { useTheme } from '../../../../hooks/use_theme';
 import { unit } from '../../../../utils/style';
@ -143,6 +144,7 @@ function SparkPlotItem({
        <Settings
          theme={[sparkplotChartTheme, ...defaultChartTheme]}
          showLegend={false}
+          locale={i18n.getLocale()}
        />
        <Tooltip type="none" />
        {type && type === 'bar' ? (
--- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
@ -204,6 +204,7 @@ export function TimeseriesChart({
              onToggleLegend(legend);
            }
          }}
+          locale={i18n.getLocale()}
        />
        <Axis
          id="x-axis"
--- a/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx
@ -15,6 +15,7 @@ import { css } from '@emotion/css';
 import { useChartTheme } from '@kbn/observability-shared-plugin/public';
 import { uniqueId } from 'lodash';
 import React, { useMemo, useRef } from 'react';
+import { i18n } from '@kbn/i18n';
 import {
  FETCH_STATUS,
  useFetcher,
@ -145,6 +146,7 @@ export function CriticalPathFlamegraph(
                  ...chartTheme,
                ]}
                onElementClick={(elements) => {}}
+                locale={i18n.getLocale()}
              />
              <Flame
                id="aggregated_critical_path"
--- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx
@ -95,6 +95,7 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => {
        baseTheme={charts.theme.useChartsBaseTheme()}
        showLegend={false}
        legendPosition="right"
+        locale={i18n.getLocale()}
      />
      <AreaSeries
        // EuiChart is using this id in the tooltip label
--- a/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx
@ -206,7 +206,7 @@ export const VulnerabilityTrendGraph = () => {
    >
      <div style={chartStyle}>
        <Chart>
-          <Settings legendPosition="right" showLegend theme={theme} />
+          <Settings legendPosition="right" showLegend theme={theme} locale={i18n.getLocale()} />
          <Axis
            id="bottom"
            position={'bottom'}
--- a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx
@ -154,6 +154,7 @@ export const DocumentCountChart: FC<Props> = ({
            onElementClick={onElementClick}
            theme={chartTheme}
            baseTheme={chartBaseTheme}
+            locale={i18n.getLocale()}
          />
          <Axis
            id="bottom"
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
@ -11,6 +11,7 @@ import { Axis, BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';

 import { FormattedMessage } from '@kbn/i18n-react';
 import { roundToDecimalPlace } from '@kbn/ml-number-utils';
+import { i18n } from '@kbn/i18n';
 import { TopValues } from '../../../top_values';
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
@ -73,7 +74,7 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =
            tickFormat={(d: any) => getFormattedValue(d, count)}
          />

-          <Settings showLegend={false} theme={theme} />
+          <Settings showLegend={false} theme={theme} locale={i18n.getLocale()} />
          <BarSeries
            id={config.fieldName || fieldFormat}
            data={[
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.tsx
@ -15,6 +15,7 @@ import { isUnsupportedChartData, type ChartData } from '@kbn/ml-data-grid';

 import './column_chart.scss';

+import { i18n } from '@kbn/i18n';
 import { useColumnChart } from './use_column_chart';

 interface Props {
@ -50,6 +51,7 @@ export const ColumnChart: FC<Props> = ({
              chartPaddings: zeroSize,
              crosshair: { band: { visible: false } },
            }}
+            locale={i18n.getLocale()}
          />
          <Axis
            id="bottom"
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx
@ -84,7 +84,7 @@ export const MetricDistributionChart: FC<Props> = ({
    >
      <Chart size={{ width, height }}>
        <Tooltip headerFormatter={headerFormatter} />
-        <Settings theme={theme} />
+        <Settings theme={theme} locale={i18n.getLocale()} />
        <Axis
          id="bottom"
          position={Position.Bottom}
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx
@ -8,6 +8,7 @@
 import { Axis, BarSeries, Chart, Tooltip, Position, ScaleType, Settings } from '@elastic/charts';
 import React from 'react';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { i18n } from '@kbn/i18n';
 import { NoChartsData } from './no_charts_data';
 import type { Feature } from '../types';
 import { COMPARISON_LABEL, DATA_COMPARISON_TYPE } from '../constants';
@ -36,7 +37,7 @@ export const DataDriftDistributionChart = ({
    <div css={{ width: '100%', height: CHART_HEIGHT }}>
      <Chart>
        <Tooltip body={DataComparisonChartTooltipBody} />
-        <Settings />
+        <Settings locale={i18n.getLocale()} />
        <Axis
          id="bottom"
          position={Position.Bottom}
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx
@ -59,7 +59,7 @@ export const OverlapDistributionComparison = ({
        hide={true}
      />

-      <Settings showLegend={false} />
+      <Settings showLegend={false} locale={i18n.getLocale()} />
      <AreaSeries
        id="dataVisualizer.overlapDistributionComparisonChart"
        name={i18n.translate('xpack.dataVisualizer.dataDrift.distributionComparisonChartName', {
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/single_distribution_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/single_distribution_chart.tsx
@ -13,6 +13,7 @@ import { Axis, BarSeries, Chart, Position, ScaleType, Settings, Tooltip } from '
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import type { Histogram } from '@kbn/ml-chi2test';

+import { i18n } from '@kbn/i18n';
 import { DataComparisonChartTooltipBody } from '../data_drift_chart_tooltip_body';
 import { DATA_COMPARISON_TYPE } from '../constants';
 import type { DataDriftField, Feature } from '../types';
@ -43,7 +44,7 @@ export const SingleDistributionChart = ({
    <Chart>
      <Tooltip body={DataComparisonChartTooltipBody} />

-      <Settings />
+      <Settings locale={i18n.getLocale()} />
      <Axis
        id="vertical"
        position={Position.Left}
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx
@ -145,6 +145,7 @@ export const AnalyticsCollectionChart: React.FC<
          }
        }}
        onElementOut={() => setHoverChart(null)}
+        locale={i18n.getLocale()}
      />

      {charts.map(({ data: chartData, id, name, chartColor }) => (
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx
@ -190,6 +190,7 @@ export const AnalyticsCollectionCard: React.FC<
              chartMargins: { bottom: 0, left: 0, right: 0, top: 0 },
            }}
            showLegend={false}
+            locale={i18n.getLocale()}
          />
          <Tooltip type="none" />
          <AreaSeries
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx
@ -13,6 +13,8 @@ import moment from 'moment';

 import { Chart, Settings, LineSeries, CurveType, Axis, Tooltip } from '@elastic/charts';

+import { i18n } from '@kbn/i18n';
+
 import { KibanaLogic } from '../../../../shared/kibana';

 import { X_AXIS_DATE_FORMAT, TOOLTIP_DATE_FORMAT } from '../constants';
@ -40,6 +42,7 @@ export const AnalyticsChart: React.FC<Props> = ({ height = 300, lines }) => {
      <Settings
        theme={charts.theme.useChartsTheme()}
        baseTheme={charts.theme.useChartsBaseTheme()}
+        locale={i18n.getLocale()}
      />
      {lines.map(({ id, data, isDashed }) => (
        <LineSeries
--- a/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx
+++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx
@ -51,7 +51,7 @@ export const Threshold = ({
      data-test-subj={`threshold-${threshold}-${value}`}
    >
      <Chart>
-        <Settings theme={theme} baseTheme={baseTheme} />
+        <Settings theme={theme} baseTheme={baseTheme} locale={i18n.getLocale()} />
        <Metric
          id={id}
          data={[
--- a/x-pack/plugins/infra/public/alerting/inventory/components/expression_chart.tsx
+++ b/x-pack/plugins/infra/public/alerting/inventory/components/expression_chart.tsx
@ -10,6 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 import { useTimelineChartTheme } from '../../../utils/use_timeline_chart_theme';
 import { InventoryMetricConditions } from '../../../../common/alerting/metrics';
 import { Color } from '../../../../common/color_palette';
@ -191,7 +192,7 @@ export const ExpressionChart: React.FC<Props> = ({
            tickFormat={dateFormatter}
          />
          <Axis id={'values'} position={Position.Left} tickFormat={yAxisFormater} domain={domain} />
-          <Settings baseTheme={chartTheme.baseTheme} />
+          <Settings baseTheme={chartTheme.baseTheme} locale={i18n.getLocale()} />
          <Tooltip {...tooltipProps} />
        </Chart>
      </ChartContainer>
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
@ -7,6 +7,7 @@

 import React, { ReactElement, useMemo } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
+import { i18n } from '@kbn/i18n';
 import {
  ScaleType,
  AnnotationDomainType,
@ -330,7 +331,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
            tickFormat={yAxisFormatter}
            domain={chartDomain}
          />
-          <Settings baseTheme={chartTheme.baseTheme} />
+          <Settings baseTheme={chartTheme.baseTheme} locale={i18n.getLocale()} />
          <Tooltip {...tooltipProps} />
        </Chart>
      </ChartContainer>
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
@ -22,6 +22,7 @@ import { useActiveCursor } from '@kbn/charts-plugin/public';
 import { DataViewBase } from '@kbn/es-query';
 import { first, last } from 'lodash';

+import { i18n } from '@kbn/i18n';
 import { useTimelineChartTheme } from '../../../utils/use_timeline_chart_theme';
 import { MetricsSourceConfiguration } from '../../../../common/metrics_sources';
 import { Color } from '../../../../common/color_palette';
@ -200,6 +201,7 @@ export const ExpressionChart: React.FC<Props> = ({
              tooltip: { visible: true },
            }}
            baseTheme={chartTheme.baseTheme}
+            locale={i18n.getLocale()}
          />
        </Chart>
      </ChartContainer>
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/process_row_charts.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/process_row_charts.tsx
@ -127,7 +127,11 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
          gridLine={{ visible: true }}
        />
        <Tooltip headerFormatter={({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS')} />
-        <Settings baseTheme={chartTheme.baseTheme} theme={chartTheme.theme} />
+        <Settings
+          baseTheme={chartTheme.baseTheme}
+          theme={chartTheme.theme}
+          locale={i18n.getLocale()}
+        />
      </Chart>
    </ChartContainer>
  );
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
@ -12,6 +12,7 @@ import {
  EUI_SPARKLINE_THEME_PARTIAL,
  EUI_CHARTS_THEME_DARK,
 } from '@elastic/eui/dist/eui_charts_theme';
+import { i18n } from '@kbn/i18n';
 import { useIsDarkMode } from '../../../../../hooks/use_is_dark_mode';
 import { useKibanaTimeZoneSetting } from '../../../../../hooks/use_kibana_time_zone_setting';
 import { TimeRange } from '../../../../../../common/time';
@ -55,7 +56,7 @@ export const SingleMetricSparkline: React.FunctionComponent<{
  return (
    <Chart size={sparklineSize}>
      <Tooltip type={TooltipType.None} />
-      <Settings showLegend={false} theme={theme} xDomain={xDomain} />
+      <Settings showLegend={false} theme={theme} xDomain={xDomain} locale={i18n.getLocale()} />
      <AreaSeries
        id="metric"
        data={metric}
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@ -299,6 +299,7 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
            onElementClick={onClickPoint}
            baseTheme={chartTheme.baseTheme}
            theme={chartTheme.theme}
+            locale={i18n.getLocale()}
          />
        </Chart>
      </TimelineChartContainer>
--- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
@ -139,6 +139,7 @@ export const ChartSectionVis = ({
            showLegend
            showLegendExtra
            legendPosition="right"
+            locale={i18n.getLocale()}
          />
        </Chart>
      </div>
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
@ -20,6 +20,7 @@ import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
 import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer';
@ -164,7 +165,11 @@ export const MetricsExplorerChart = ({
              domain={domain}
            />
            <Tooltip {...tooltipProps} />
-            <Settings onBrushEnd={handleTimeChange} baseTheme={chartTheme.baseTheme} />
+            <Settings
+              onBrushEnd={handleTimeChange}
+              baseTheme={chartTheme.baseTheme}
+              locale={i18n.getLocale()}
+            />
          </Chart>
        ) : options.metrics.length > 0 ? (
          <MetricsExplorerEmptyChart />
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
@ -130,6 +130,7 @@ export const DecisionPathChart = ({
          // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
          theme={theme}
          rotation={90}
+          locale={i18n.getLocale()}
        />
        {regressionBaselineData && (
          <LineAnnotation
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
@ -298,6 +298,7 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
                  // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
                  theme={theme}
                  showLegend={showLegend}
+                  locale={i18n.getLocale()}
                />

                <Axis
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
@ -238,7 +238,7 @@ function ExplorerChartContainer({
      {/* so that we can use chart's ref which controls the activeCursor api */}
      <div style={{ width: 0, height: 0 }}>
        <Chart ref={chartRef}>
-          <Settings noResults={<div />} width={0} height={0} />
+          <Settings noResults={<div />} width={0} height={0} locale={i18n.getLocale()} />
          {/* Just need an empty chart to access cursor service */}
          <BarSeries id={'count'} xAccessor="x" yAccessors={['y']} data={[]} />
        </Chart>
--- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@ -452,6 +452,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                        xDomain={xDomain}
                        debugState={window._echDebugStateFlag ?? false}
                        onBrushEnd={onBrushEnd as BrushEndListener}
+                        locale={i18n.getLocale()}
                      />

                      <Heatmap
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx
@ -427,6 +427,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                              },
                            },
                          }}
+                          locale={i18n.getLocale()}
                        />
                        <Axis
                          id="bottom"
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx
@ -7,6 +7,7 @@

 import React, { FC } from 'react';
 import { Chart, Settings, TooltipType, Tooltip } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
 import { ModelItem, Anomaly } from '../../../../common/results_loader';
 import { Anomalies } from '../common/anomalies';
 import { ModelBounds } from './model_bounds';
@ -51,6 +52,7 @@ export const AnomalyChart: FC<Props> = ({
          <Settings
            // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
            xDomain={xDomain}
+            locale={i18n.getLocale()}
          />
          <Axes chartData={data} />
          <Anomalies anomalyData={anomalyData} />
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
@ -17,6 +17,7 @@ import {
  Tooltip,
 } from '@elastic/charts';
 import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
 import { Axes } from '../common/axes';
 import { LineChartPoint } from '../../../../common/chart_loader';
 import { Anomaly } from '../../../../common/results_loader';
@ -78,6 +79,7 @@ export const EventRateChart: FC<Props> = ({
            onBrushEnd={onBrushEnd}
            // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
            theme={theme}
+            locale={i18n.getLocale()}
          />

          {overlayRanges &&
--- a/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx
+++ b/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx
@ -173,7 +173,7 @@ export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {

        {data.length ? (
          <Chart>
-            <Settings baseTheme={baseTheme} theme={theme.theme} />
+            <Settings baseTheme={baseTheme} theme={theme.theme} locale={i18n.getLocale()} />
            <Partition<MemoryUsageInfo>
              id="memoryUsageTreeMap"
              data={data}
--- a/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx
+++ b/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx
@ -119,6 +119,7 @@ export const MemoryPreviewChart: FC<MemoryPreviewChartProps> = ({ memoryOverview
      <Settings
        // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
        rotation={90}
+        locale={i18n.getLocale()}
      />

      <Axis
--- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx
+++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx
@ -51,7 +51,7 @@ export function Threshold({
      data-test-subj={`thresholdRule-${threshold}-${value}`}
    >
      <Chart>
-        <Settings theme={theme} baseTheme={baseTheme} />
+        <Settings theme={theme} baseTheme={baseTheme} locale={i18n.getLocale()} />
        <Metric
          id={id}
          data={[
--- a/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx
+++ b/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx
@ -23,6 +23,7 @@ import { DataViewBase } from '@kbn/es-query';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { first, last } from 'lodash';
 import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../utils/kibana_react';
 import {
  MetricsExplorerAggregation,
@ -205,6 +206,7 @@ export function ExpressionChart({
              tooltip: { visible: true },
            }}
            theme={getChartTheme(isDarkMode)}
+            locale={i18n.getLocale()}
          />
        </Chart>
      </ChartContainer>
--- a/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx
+++ b/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx
@ -133,6 +133,7 @@ export function SloOverview({ sloId, sloInstanceId, lastReloadRequestTime }: Emb
              )
            );
          }}
+          locale={i18n.getLocale()}
        />
        <Metric id={`${slo?.id}-${slo?.instanceId}`} data={[metricData]} />
      </Chart>
--- a/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx
@ -150,6 +150,7 @@ export function APMSection({ bucketSize }: Props) {
          theme={chartTheme}
          showLegend={false}
          xDomain={{ min, max }}
+          locale={i18n.getLocale()}
        />
        {series?.transactions.coordinates && (
          <>
--- a/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx
@ -143,6 +143,7 @@ export function LogsSection({ bucketSize }: Props) {
          legendPosition={Position.Right}
          xDomain={{ min, max }}
          showLegendExtra
+          locale={i18n.getLocale()}
        />
        {series &&
          Object.keys(series).map((key) => {
--- a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
@ -15,6 +15,7 @@ import {
 } from '@elastic/eui/dist/eui_charts_theme';
 import { ThemeContext } from 'styled-components';

+import { i18n } from '@kbn/i18n';
 import { NumberOrNull } from '../../../../..';

 interface Props {
@ -47,7 +48,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }:
      <EuiFlexItem grow={false}>
        <Chart size={{ height: 18, width: 40 }}>
          <Tooltip type={TooltipType.None} />
-          <Settings theme={theme} showLegend={false} />
+          <Settings theme={theme} showLegend={false} locale={i18n.getLocale()} />
          <AreaSeries
            id={id}
            data={timeseries}
--- a/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx
@ -150,6 +150,7 @@ export function UptimeSection({ bucketSize }: Props) {
          showLegend={false}
          legendPosition={Position.Right}
          xDomain={{ min, max }}
+          locale={i18n.getLocale()}
        />
        <UptimeBarSeries
          id="down"
--- a/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
@ -23,6 +23,7 @@ import { useActiveCursor } from '@kbn/charts-plugin/public';
 import moment from 'moment';
 import React, { useRef } from 'react';

+import { i18n } from '@kbn/i18n';
 import { ChartData } from '../../../typings';
 import { useKibana } from '../../../utils/kibana_react';

@ -71,6 +72,7 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) {
        }}
        pointerUpdateDebounce={0}
        pointerUpdateTrigger={'x'}
+        locale={i18n.getLocale()}
      />
      <Axis
        id="bottom"
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx
@ -124,6 +124,7 @@ export function DataPreviewChart() {
                noResults={
                  <EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />
                }
+                locale={i18n.getLocale()}
              />

              <Axis
--- a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx
@ -20,6 +20,7 @@ import React from 'react';
 import { EuiLoadingChart, useEuiTheme } from '@elastic/eui';
 import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';

+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../utils/kibana_react';

 interface Data {
@ -57,6 +58,7 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) {
        baseTheme={baseTheme}
        showLegend={false}
        theme={[theme, EUI_SPARKLINE_THEME_PARTIAL]}
+        locale={i18n.getLocale()}
      />
      <Tooltip type={TooltipType.None} />
      <Axis
--- a/x-pack/plugins/profiling/public/components/flamegraph/index.tsx
+++ b/x-pack/plugins/profiling/public/components/flamegraph/index.tsx
@ -20,6 +20,7 @@ import { Maybe } from '@kbn/observability-plugin/common/typings';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useUiTracker } from '@kbn/observability-shared-plugin/public';
 import type { ElasticFlameGraph } from '@kbn/profiling-utils';
+import { i18n } from '@kbn/i18n';
 import { getFlamegraphModel } from '../../utils/get_flamegraph_model';
 import { FlameGraphLegend } from './flame_graph_legend';
 import { FrameInformationWindow } from '../frame_information_window';
@ -126,6 +127,7 @@ export function FlameGraph({
                        setHighlightedVmIndex(selectedElement!.vmIndex);
                      }
                    }}
+                    locale={i18n.getLocale()}
                  />
                  <Tooltip
                    actions={[{ label: '', onSelect: () => {} }]}
--- a/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx
+++ b/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx
@ -21,6 +21,7 @@ import {
 import { EuiPanel } from '@elastic/eui';
 import { keyBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
+import { i18n } from '@kbn/i18n';
 import { TopNSample, TopNSubchart } from '../../../common/topn';
 import { useKibanaTimeZoneSetting } from '../../hooks/use_kibana_timezone_setting';
 import { useProfilingChartsTheme } from '../../hooks/use_profiling_charts_theme';
@ -120,6 +121,7 @@ export function StackedBarChart({
        onElementOut={() => {
          setHighlightedSample(undefined);
        }}
+        locale={i18n.getLocale()}
      />
      <Tooltip customTooltip={CustomTooltipWithSubChart} />
      {charts.map((chart) => (
--- a/x-pack/plugins/profiling/public/components/subchart.tsx
+++ b/x-pack/plugins/profiling/public/components/subchart.tsx
@ -220,7 +220,12 @@ export function SubChart({
      <EuiFlexItem grow={false} style={{ position: 'relative' }}>
        <Chart size={{ height, width }}>
          <Tooltip showNullValues={false} />
-          <Settings showLegend={false} baseTheme={chartsBaseTheme} theme={chartsTheme} />
+          <Settings
+            showLegend={false}
+            baseTheme={chartsBaseTheme}
+            theme={chartsTheme}
+            locale={i18n.getLocale()}
+          />
          <AreaSeries
            id={category}
            name={category}
--- a/x-pack/plugins/profiling/public/views/storage_explorer/data_breakdown/grouped_index_details_chart.tsx
+++ b/x-pack/plugins/profiling/public/views/storage_explorer/data_breakdown/grouped_index_details_chart.tsx
@ -50,6 +50,7 @@ export function GroupedIndexDetailsChart({ data = [] }: Props) {
                color: 'transparent',
              },
            }}
+            locale={i18n.getLocale()}
          />
          <Partition
            layout="sunburst"
--- a/x-pack/plugins/profiling/public/views/storage_explorer/host_breakdown/host_breakdown_chart.tsx
+++ b/x-pack/plugins/profiling/public/views/storage_explorer/host_breakdown/host_breakdown_chart.tsx
@ -15,6 +15,7 @@ import {
 } from '@elastic/charts';
 import { asDynamicBytes } from '@kbn/observability-plugin/common';
 import React, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 import type { StorageExplorerHostDetailsTimeseries } from '../../../../common/storage_explorer';
 import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_timezone_setting';
 import { useProfilingChartsTheme } from '../../../hooks/use_profiling_charts_theme';
@ -53,6 +54,7 @@ export function HostBreakdownChart({ data = [] }: Props) {
        legendPosition={Position.Right}
        baseTheme={chartsBaseTheme}
        theme={chartsTheme}
+        locale={i18n.getLocale()}
      />
      <Axis
        id="x-axis"
--- a/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx
@ -12,6 +12,7 @@ import { isEmpty } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';

+import { i18n } from '@kbn/i18n';
 import { useThemes } from '../charts/common';
 import { DraggableLegend } from '../charts/draggable_legend';
 import type { LegendItem } from '../charts/draggable_legend_item';
@ -178,6 +179,7 @@ const AlertsTreemapComponent: React.FC<Props> = ({
                showLegend={false}
                theme={[treemapTheme, theme]}
                onElementClick={onElementClick}
+                locale={i18n.getLocale()}
              />
              <Partition
                data={normalizedData}
--- a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
@ -12,6 +12,7 @@ import { Axis, AreaSeries, Chart, Position, ScaleType, Settings } from '@elastic
 import { getOr, get, isNull, isNumber } from 'lodash/fp';

 import { EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useThrottledResizeObserver } from '../utils';
 import { ChartPlaceHolder } from './chart_place_holder';
 import { useTimeZone } from '../../lib/kibana';
@ -88,6 +89,7 @@ export const AreaChartBaseComponent = ({
  const xAxisId = `group-${data[0].key}-x`;
  const yAxisId = `group-${data[0].key}-y`;
  const settings: SettingsProps = {
+    locale: i18n.getLocale(),
    ...chartDefaultSettings,
    ...themes,
    ...get('configs.settings', chartConfigs),
--- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
@ -7,6 +7,7 @@

 import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 import type { SettingsProps } from '@elastic/charts';
 import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
 import { getOr, get, isNumber } from 'lodash/fp';
@ -118,7 +119,11 @@ export const BarChartBaseComponent = ({

  return chartConfigs.width && chartConfigs.height ? (
    <Chart>
-      <Settings {...settings} showLegend={settings.showLegend && !forceHiddenLegend} />
+      <Settings
+        {...settings}
+        showLegend={settings.showLegend && !forceHiddenLegend}
+        locale={i18n.getLocale()}
+      />
      {data.map((series) => {
        const barSeriesKey = series.key;
        return checkIfAllTheDataInTheSeriesAreValid(series) ? (
--- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx
@ -21,6 +21,7 @@ import { isEmpty } from 'lodash';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled from 'styled-components';

+import { i18n } from '@kbn/i18n';
 import { useThemes } from './common';
 import { DraggableLegend } from './draggable_legend';
 import type { LegendItem } from './draggable_legend_item';
@ -199,6 +200,7 @@ export const DonutChart = ({
              theme={[donutTheme, theme]}
              baseTheme={baseTheme}
              onElementClick={onElementClicked}
+              locale={i18n.getLocale()}
            />
            <Partition
              id="donut-chart"
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
@ -6,6 +6,7 @@
 */

 import type { ChartSizeArray } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
 import { Axis, Chart, HistogramBarSeries, Position, Settings, ScaleType } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
 import React, { useMemo } from 'react';
@ -81,6 +82,7 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
                showLegendExtra={showLegend}
                theme={theme}
                baseTheme={baseTheme}
+                locale={i18n.getLocale()}
              />

              <Axis id={xAxisId} position={Position.Bottom} tickFormat={tickFormat} />
--- a/x-pack/plugins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx
+++ b/x-pack/plugins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx
@ -21,12 +21,13 @@ import {
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiPanel } from '@elastic/eui';
 import styled from 'styled-components';
 import { euiThemeVars } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
 import { chartDefaultSettings, useThemes } from '../../../../common/components/charts/common';
 import { useTimeZone } from '../../../../common/lib/kibana';
 import { histogramDateTimeFormatter } from '../../../../common/components/utils';
 import { HeaderSection } from '../../../../common/components/header_section';
 import { InspectButton, InspectButtonContainer } from '../../../../common/components/inspect';
-import * as i18n from './translations';
+import * as translations from './translations';
 import { PreferenceFormattedDate } from '../../../../common/components/formatted_date';
 import type {
  HostRiskScore,
@ -145,7 +146,12 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
                  ) : (
                    <Chart>
                      <Tooltip headerFormatter={headerFormatter} />
-                      <Settings {...chartDefaultSettings} baseTheme={baseTheme} theme={theme} />
+                      <Settings
+                        {...chartDefaultSettings}
+                        baseTheme={baseTheme}
+                        theme={theme}
+                        locale={i18n.getLocale()}
+                      />
                      <Axis
                        id="bottom"
                        position={Position.Bottom}
@ -176,7 +182,7 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
                      />
                      <LineSeries
                        id="RiskOverTime"
-                        name={i18n.RISK_SCORE}
+                        name={translations.RISK_SCORE}
                        xScaleType={ScaleType.Time}
                        yScaleType={ScaleType.Linear}
                        xAccessor="x"
@ -192,7 +198,7 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
                          {
                            dataValue: RISKY_THRESHOLD,
                            details: `${RISKY_THRESHOLD}`,
-                            header: i18n.RISK_THRESHOLD,
+                            header: translations.RISK_THRESHOLD,
                          },
                        ]}
                        markerPosition="left"
@ -205,7 +211,7 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
                        }}
                        marker={
                          <StyledEuiText color={euiThemeVars.euiColorDarkestShade}>
-                            {i18n.RISKY}
+                            {translations.RISKY}
                          </StyledEuiText>
                        }
                      />
--- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx
@ -34,6 +34,7 @@ import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { AggregationType, Comparator } from '@kbn/triggers-actions-ui-plugin/public';
 import { parseDuration } from '@kbn/alerting-plugin/common/parse_duration';
+import { i18n } from '@kbn/i18n';
 import {
  getThresholdRuleVisualizationData,
  GetThresholdRuleVisualizationDataParams,
@ -270,6 +271,7 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
              showLegend={!!termField}
              showLegendExtra
              legendPosition={Position.Bottom}
+              locale={i18n.getLocale()}
            />
            <Axis
              id="bottom"
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx
@ -9,9 +9,8 @@ import React, { useMemo } from 'react';

 import { EuiPanel, useEuiTheme, EuiResizeObserver, EuiSpacer } from '@elastic/eui';
 import { Chart, Settings, Heatmap, ScaleType, Tooltip } from '@elastic/charts';
-
+import { i18n } from '@kbn/i18n';
 import { usePingStatusesIsLoading } from '../hooks/use_ping_statuses';
-
 import { MonitorStatusHeader } from './monitor_status_header';
 import { MonitorStatusCellTooltip } from './monitor_status_cell_tooltip';
 import { MonitorStatusLegend } from './monitor_status_legend';
@ -77,6 +76,7 @@ export const MonitorStatusPanel = ({
                onBrushEnd={(brushArea) => {
                  onBrushed?.(getBrushData(brushArea));
                }}
+                locale={i18n.getLocale()}
              />
              <Heatmap
                id="monitor-details-monitor-status-chart"
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@ -120,6 +120,7 @@ export const MetricItem = ({
              }
            }}
            baseTheme={DARK_THEME}
+            locale={i18n.getLocale()}
          />
          <Metric
            id={`${monitor.configId}-${monitor.location?.id}`}
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx
@ -68,7 +68,11 @@ export const NetworkTimingsDonut = () => {

      <EuiSpacer size="m" />
      <Chart size={{ height: 240 }}>
-        <Settings theme={[themeOverrides, LIGHT_THEME ?? {}]} showLegend={false} />
+        <Settings
+          theme={[themeOverrides, LIGHT_THEME ?? {}]}
+          showLegend={false}
+          locale={i18n.getLocale()}
+        />
        <Partition
          id="spec_1"
          data={networkTimings.timingsWithLabels}
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx
@ -21,6 +21,7 @@ import {
  Tooltip,
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useChartTheme } from '../../../../../../hooks/use_chart_theme';
 import { BAR_HEIGHT } from './constants';
 import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
@ -102,6 +103,7 @@ export const WaterfallBarChart = ({
          theme={{ ...theme, tooltip: { maxWidth: 500 } }}
          onProjectionClick={handleProjectionClick}
          onElementClick={handleElementClick}
+          locale={i18n.getLocale()}
        />

        <Axis
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
@ -20,6 +20,7 @@ import {
  Tooltip,
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useChartTheme } from '../../../../../../hooks/use_chart_theme';
 import { WaterfallChartFixedAxisContainer } from './styles';
 import { WaterfallChartMarkers } from './waterfall_marker/waterfall_markers';
@ -49,6 +50,7 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
            },
            theme,
          ]}
+          locale={i18n.getLocale()}
        />

        <Axis
--- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx
+++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx
@ -9,6 +9,7 @@ import React, { VFC } from 'react';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 import { EuiComboBoxOptionOption, EuiThemeProvider } from '@elastic/eui';
 import { TimeRangeBounds } from '@kbn/data-plugin/common';
+import { i18n } from '@kbn/i18n';
 import { IndicatorBarchartLegendAction } from './legend_action';
 import { barChartTimeAxisLabelFormatter } from '../../../../utils/dates';
 import type { ChartSeries } from '../../services/fetch_aggregated_indicators';
@ -54,6 +55,7 @@ export const IndicatorsBarChart: VFC<IndicatorsBarChartProps> = ({
          legendPosition={Position.Right}
          legendSize={DEFAULT_LEGEND_SIZE}
          legendAction={({ label }) => <IndicatorBarchartLegendAction field={field} data={label} />}
+          locale={i18n.getLocale()}
        />
        <Axis
          id={`${ID}TimeAxis`}
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
@ -20,6 +20,7 @@ import {
 } from '@elastic/charts';
 import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
 import { AlertStatus } from '@kbn/rule-data-utils';
+import { i18n } from '@kbn/i18n';
 import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, WIDGET_TITLE } from './constants';
 import { Alert, ChartProps } from '../types';
@ -98,7 +99,7 @@ export const AlertSummaryWidgetCompact = ({
            <EuiFlexItem style={{ minWidth: '200px' }}>
              <Chart size={{ height: 50 }}>
                <Tooltip type={TooltipType.None} />
-                <Settings theme={chartTheme} baseTheme={baseTheme} />
+                <Settings theme={chartTheme} baseTheme={baseTheme} locale={i18n.getLocale()} />
                <Axis
                  hide
                  id="activeAlertsAxis"
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
@ -18,6 +18,7 @@ import {
  Tooltip,
 } from '@elastic/charts';
 import { EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, TOOLTIP_DATE_FORMAT } from './constants';
 import { Alert, ChartProps } from '../types';
@ -75,6 +76,7 @@ export const AlertSummaryWidgetFullSize = ({
              theme={chartTheme}
              baseTheme={baseTheme}
              onBrushEnd={onBrushEnd}
+              locale={i18n.getLocale()}
            />
            <Axis
              id="bottom"
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@ -113,6 +113,7 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
                    line: { stroke: lightEuiTheme.euiColorAccent },
                  },
                }}
+                locale={i18n.getLocale()}
              />
              <BarSeries
                id="executionDuration"
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/snapshots/donut_chart.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/snapshots/donut_chart.test.tsx.snap
@ -514,6 +514,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
            },
          }
        }
+        locale="en"
        theme={
          Array [
            Object {
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx
@ -61,6 +61,7 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => {
          <Settings
            theme={[themeOverrides, chartTheme.theme ?? {}]}
            baseTheme={chartTheme.baseTheme}
+            locale={i18n.getLocale()}
          />
          <Partition
            id="spec_1"
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
@ -110,6 +110,7 @@ export const DurationChartComponent = ({
            legendPosition={Position.Right}
            onBrushEnd={onBrushEnd}
            onLegendItemClick={legendToggleVisibility}
+            locale={i18n.getLocale()}
            {...chartTheme}
          />
          <Axis
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/monitor_bar_series.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/monitor_bar_series.tsx
@ -78,6 +78,7 @@ export const MonitorBarSeries = ({ histogramSeries, minInterval }: MonitorBarSer
          }}
          onBrushEnd={onBrushEnd}
          onElementClick={onBarClicked}
+          locale={i18n.getLocale()}
          {...chartTheme}
        />
        <Axis
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx
@ -142,6 +142,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
            showLegend={false}
            onBrushEnd={onBrushEnd}
            onElementClick={onBarClicked}
+            locale={i18n.getLocale()}
            {...chartTheme}
          />
          <Axis
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
@ -20,6 +20,7 @@ import {
  CustomTooltip as CustomChartTooltip,
  Tooltip,
 } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
 import { BAR_HEIGHT } from './constants';
 import { useChartTheme } from '../../../../../hooks/use_chart_theme';
 import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
@ -99,6 +100,7 @@ export const WaterfallBarChart = ({
          theme={theme}
          onProjectionClick={handleProjectionClick}
          onElementClick={handleElementClick}
+          locale={i18n.getLocale()}
        />

        <Axis
--- a/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
+++ b/x-pack/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
@ -19,6 +19,7 @@ import {
  TooltipType,
  Tooltip,
 } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
 import { useChartTheme } from '../../../../../hooks/use_chart_theme';
 import { WaterfallChartFixedAxisContainer } from './styles';
 import { WaterfallChartMarkers } from './waterfall_markers';
@ -36,7 +37,7 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
    <WaterfallChartFixedAxisContainer>
      <Chart className="axis-only-chart" data-test-subj="axisOnlyChart">
        <Tooltip type={TooltipType.None} />
-        <Settings showLegend={false} rotation={90} theme={theme} />
+        <Settings showLegend={false} rotation={90} theme={theme} locale={i18n.getLocale()} />

        <Axis
          id="time"
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx
@ -22,6 +22,7 @@ import { IUiSettingsClient } from '@kbn/core/public';
 import { EuiCallOut, EuiLoadingChart, EuiSpacer, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';

+import { i18n } from '@kbn/i18n';
 import { VisualizeOptions } from '../../../../models/visualize_options';
 import { ThresholdWatch } from '../../../../models/watch/threshold_watch';

@ -220,6 +221,7 @@ export const WatchVisualization = () => {
              showLegend={!!watch.termField}
              showLegendExtra
              legendPosition={Position.Bottom}
+              locale={i18n.getLocale()}
            />
            <Axis
              id="bottom"