feat: apply the data value formatter

packages/charts/src/chart_types/xy_chart/state/utils/utils.ts

@@ -369,8 +369,10 @@ function renderGeometries(
         mergeOptionalPartialValues: true,
       });
 
-      const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
-      const valueFormatter = yAxis?.tickFormat ?? fallBackTickFormatter;
+      const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+      const valueFormatter = [0, 180].includes(chartRotation)
+        ? yAxis?.tickFormat ?? fallBackTickFormatter
+        : xAxis?.tickFormat ?? fallBackTickFormatter;
 
       const displayValueSettings = spec.displayValueSettings
         ? { valueFormatter, ...spec.displayValueSettings }

packages/charts/src/utils/data_samples/test_dataset_github.ts

@@ -274,6 +274,76 @@ export const GITHUB_DATASET = [
   },
 ];
 
+/** @internal */
+export const GITHUB_DATASET_HIGH_VALUES = [
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Data Table',
+    issueType: 'Bug',
+    count: 24000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Heatmap',
+    issueType: 'Bug',
+    count: 12000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Markdown',
+    issueType: 'Bug',
+    count: 6000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'MetricVis',
+    issueType: 'Bug',
+    count: 16000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Pie Chart',
+    issueType: 'Bug',
+    count: 7000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Tagcloud',
+    issueType: 'Bug',
+    count: 19000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'TSVB',
+    issueType: 'Bug',
+    count: 86000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Timelion',
+    issueType: 'Bug',
+    count: 58000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Vega vis',
+    issueType: 'Bug',
+    count: 11000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Point Series',
+    issueType: 'Bug',
+    count: 1000,
+  },
+  {
+    authorAssociation: 'Team Member',
+    vizType: 'Inspector',
+    issueType: 'Bug',
+    count: 15000,
+  },
+];
+
 /** @internal */
 export const GROUPED_BAR_CHART = [
   {

storybook/stories/bar/58_data_values.story.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { boolean, select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Axis, BarSeries, Chart, ScaleType, Settings } from '@elastic/charts';
+
+import { GITHUB_DATASET_HIGH_VALUES } from '../../../packages/charts/src/utils/data_samples/test_dataset_github';
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  const noTickFormat = boolean('turn off special tickFormat', false);
+  const rotation = select(
+    'Rotation degree',
+    {
+      '0 deg(default)': 0,
+      '90 deg': 90,
+      '-90 deg': -90,
+      '180 deg': 180,
+    },
+    0,
+  );
+  return (
+    <Chart>
+      <Settings theme={[useBaseTheme()]} rotation={rotation} />
+      <BarSeries
+        id="issues"
+        name="Issues"
+        data={GITHUB_DATASET_HIGH_VALUES}
+        xAccessor="vizType"
+        yAccessors={['count']}
+        xScaleType={ScaleType.Ordinal}
+        displayValueSettings={{ showValueLabel: true }}
+      />
+      <Axis
+        id="bottom-axis"
+        position="bottom"
+        tickFormat={
+          (!noTickFormat && rotation === 90) || (!noTickFormat && rotation === -90)
+            ? (d: string) => `${Math.round(Number(d) / 1000)}k`
+            : undefined
+        }
+      />
+      <Axis
+        id="left-axis"
+        position="left"
+        tickFormat={
+          (!noTickFormat && rotation === 0) || (!noTickFormat && rotation === 180)
+            ? (d: string) => `${Math.round(Number(d) / 1000)}k`
+            : undefined
+        }
+      />
+    </Chart>
+  );
+};

storybook/stories/bar/bars.stories.tsx

@@ -71,3 +71,4 @@ export { Example as tooltipBoundary } from './55_tooltip_boundary.story';
 export { Example as testDualYAxis } from './49_test_dual_axis.story';
 export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain.story';
 export { Example as testRectBorder } from './57_test_rect_border_bars.story';
+export { Example as dataValue } from './58_data_values.story';