feat(xy): apply the data value formatter to data values over bars (#1419

)
elastic · Oct 15, 2021 · e673fc7 · e673fc7
1 parent 2ee97aa
commit e673fc7
Show file tree

Hide file tree

Showing 82 changed files with 90 additions and 31 deletions.
diff --git a/...al-tests-for-all-stories-bar-chart-data-value-visually-looks-correct-1-snap.png b/...al-tests-for-all-stories-bar-chart-data-value-visually-looks-correct-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/...rizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/...horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/...orizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png
diff --git a/integration/tests/bar_stories.test.ts b/integration/tests/bar_stories.test.ts
@@ -104,6 +104,14 @@ describe('Bar series stories', () => {
   });
 
   describe('value labels positioning', () => {
+    it('clip both geometry and chart area values', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/bar-chart--with-value-label&knob-show single series=&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide label if overflows chart edges=true&knob-hide label if overflows bar geometry=true&knob-debug=&knob-value font size=11&knob-value color=%23000&knob-offsetX=0&knob-offsetY=10&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0&knob-legend=right',
+      );
+    });
+  });
+
+  describe('value label positioning and formatting', () => {
     eachRotation.describe((rotation) => {
       describe.each<NonNullable<DisplayValueStyle['alignment']>['vertical']>([
         VerticalAlignment.Middle,
@@ -115,18 +123,13 @@ describe('Bar series stories', () => {
           HorizontalAlignment.Center,
           HorizontalAlignment.Right,
         ])('Horizontal Alignment - %s', (horizontalAlignment) => {
-          const url = `http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-chartRotation=${rotation}&knob-Horizontal alignment=${horizontalAlignment}&knob-Vertical alignment=${verticalAlignment}`;
+          const url = `http://localhost:9001/?path=/story/bar-chart--data-value&args=&globals=theme:light&knob-chartRotation=${rotation}&knob-Horizontal alignment=${horizontalAlignment}&knob-Vertical alignment=${verticalAlignment}`;
           it('place the value labels on the correct area', async () => {
             await common.expectChartAtUrlToMatchScreenshot(url);
           });
         });
       });
     });
-    it('clip both geometry and chart area values', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/bar-chart--with-value-label&knob-show single series=&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide label if overflows chart edges=true&knob-hide label if overflows bar geometry=true&knob-debug=&knob-value font size=11&knob-value color=%23000&knob-offsetX=0&knob-offsetY=10&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0&knob-legend=right',
-      );
-    });
   });
 
   describe('functional accessors', () => {

diff --git a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts
@@ -14,7 +14,6 @@ import { AnnotationId, AxisId, GroupId } from '../../../utils/ids';
 import { Point } from '../../../utils/point';
 import { AxisStyle } from '../../../utils/themes/theme';
 import { SmallMultipleScales } from '../state/selectors/compute_small_multiple_scales';
-import { isHorizontalRotation } from '../state/utils/common';
 import { getAxesSpecForSpecId } from '../state/utils/spec';
 import { ComputedGeometries } from '../state/utils/types';
 import { AnnotationDomainType, AnnotationSpec, AxisSpec, isLineAnnotation } from '../utils/specs';
@@ -29,12 +28,9 @@ export function getAnnotationAxis(
   domainType: AnnotationDomainType,
   chartRotation: Rotation,
 ): Position | undefined {
-  const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId);
-  const isHorizontalRotated = isHorizontalRotation(chartRotation);
+  const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId, chartRotation);
   const isXDomainAnnotation = isXDomain(domainType);
-  const annotationAxis = isXDomainAnnotation ? xAxis : yAxis;
-  const rotatedAnnotation = isHorizontalRotated ? annotationAxis : isXDomainAnnotation ? yAxis : xAxis;
-  return rotatedAnnotation ? rotatedAnnotation.position : undefined;
+  return isXDomainAnnotation ? xAxis?.position : yAxis?.position;
 }
 
 /** @internal */

diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts
@@ -11,7 +11,7 @@ import { LegendItem } from '../../../common/legend';
 import { SeriesKey, SeriesIdentifier } from '../../../common/series_id';
 import { ScaleType } from '../../../scales/constants';
 import { TickFormatterOptions } from '../../../specs';
-import { mergePartial } from '../../../utils/common';
+import { mergePartial, Rotation } from '../../../utils/common';
 import { BandedAccessorType } from '../../../utils/geometry';
 import { getLegendCompareFn } from '../../../utils/series_sort';
 import { PointStyle, Theme } from '../../../utils/themes/theme';
@@ -104,6 +104,7 @@ export function computeLegend(
   serialIdentifierDataSeriesMap: Record<string, DataSeries>,
   deselectedDataSeries: SeriesIdentifier[] = [],
   theme: Theme,
+  chartRotation: Rotation,
 ): LegendItem[] {
   const legendItems: LegendItem[] = [];
   const defaultColor = theme.colors.defaultVizColor;
@@ -132,7 +133,7 @@ export function computeLegend(
     const labelY1 = banded ? getBandedLegendItemLabel(name, BandedAccessorType.Y1, postFixes) : name;
 
     // Use this to get axis spec w/ tick formatter
-    const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+    const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
     const formatter = spec.tickFormat ?? yAxis?.tickFormat ?? defaultTickFormatter;
     const { hideInLegend } = spec;
 

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts
@@ -52,6 +52,7 @@ export const computeLegendSelector = createCustomCachedSelector(
       siDataSeriesMap,
       deselectedDataSeries,
       chartTheme,
+      settings.rotation,
     );
   },
 );
diff --git a/...s/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts b/...s/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
@@ -138,7 +138,7 @@ function getTooltipAndHighlightFromValue(
     if (!spec) {
       return acc;
     }
-    const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+    const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
 
     // yScales is ensured by the enclosing if
     const yScale = scales.yScales.get(getSpecDomainGroupId(spec));
@@ -163,21 +163,12 @@ function getTooltipAndHighlightFromValue(
     }
 
     // format the tooltip values
-    const yAxisFormatSpec = [0, 180].includes(chartRotation) ? yAxis : xAxis;
-    const formattedTooltip = formatTooltip(
-      indexedGeometry,
-      spec,
-      false,
-      isHighlighted,
-      hasSingleSeries,
-      yAxisFormatSpec,
-    );
+    const formattedTooltip = formatTooltip(indexedGeometry, spec, false, isHighlighted, hasSingleSeries, yAxis);
 
     // format only one time the x value
     if (!header) {
       // if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter
-      const xAxisFormatSpec = [0, 180].includes(chartRotation) ? xAxis : yAxis;
-      const formatterAxis = tooltipHeaderFormatter ? undefined : xAxisFormatSpec;
+      const formatterAxis = tooltipHeaderFormatter ? undefined : xAxis;
       header = formatTooltip(indexedGeometry, spec, true, false, hasSingleSeries, formatterAxis);
     }
 

diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts b/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts
@@ -7,8 +7,9 @@
  */
 
 import { BasicSeriesSpec, DEFAULT_GLOBAL_ID, Spec } from '../../../../specs';
+import { Rotation } from '../../../../utils/common';
 import { GroupId } from '../../../../utils/ids';
-import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils';
+import { isXDomain } from '../../utils/axis_utils';
 import { AxisSpec } from '../../utils/specs';
 
 /** @internal */
@@ -17,10 +18,10 @@ export function getSpecsById<T extends Spec>(specs: T[], id: string): T | undefi
 }
 
 /** @internal */
-export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId) {
+export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId, chartRotation: Rotation = 0) {
   return axesSpecs.reduce<{ xAxis?: AxisSpec; yAxis?: AxisSpec }>((result, spec) => {
-    if (spec.groupId === groupId && isHorizontalAxis(spec.position)) result.xAxis = spec;
-    if (spec.groupId === groupId && isVerticalAxis(spec.position)) result.yAxis = spec;
+    if (spec.groupId === groupId && isXDomain(spec.position, chartRotation)) result.xAxis = spec;
+    else if (spec.groupId === groupId && !isXDomain(spec.position, chartRotation)) result.yAxis = spec;
     return result;
   }, {});
 }

diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
@@ -347,8 +347,9 @@ function renderGeometries(
       if (shift === -1) continue; // skip bar dataSeries if index is not available
 
       const barSeriesStyle = mergePartial(chartTheme.barSeriesStyle, spec.barSeriesStyle);
-      const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
+      const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation);
       const valueFormatter = yAxis?.tickFormat ?? fallBackTickFormatter;
+
       const displayValueSettings = spec.displayValueSettings
         ? { valueFormatter, ...spec.displayValueSettings }
         : undefined;

diff --git a/storybook/stories/bar/58_data_values.story.tsx b/storybook/stories/bar/58_data_values.story.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 { select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Axis, BarSeries, Chart, ScaleType, Settings, PartialTheme } from '@elastic/charts';
+
+import { BARCHART_1Y0G_LINEAR } from '../../../packages/charts/src/utils/data_samples/test_dataset';
+import { useBaseTheme } from '../../use_base_theme';
+import { getChartRotationKnob } from '../utils/knobs';
+
+export const Example = () => {
+  const theme: PartialTheme = {
+    barSeriesStyle: {
+      displayValue: {
+        fontSize: 15,
+        fill: { textBorder: 2.5, color: 'white', borderColor: 'black' },
+        alignment: {
+          horizontal: select(
+            'Horizontal alignment',
+            {
+              Default: undefined,
+              Left: 'left',
+              Center: 'center',
+              Right: 'right',
+            },
+            undefined,
+          ),
+          vertical: select(
+            'Vertical alignment',
+            {
+              Default: undefined,
+              Top: 'top',
+              Middle: 'middle',
+              Bottom: 'bottom',
+            },
+            undefined,
+          ),
+        },
+      },
+    },
+  };
+
+  return (
+    <Chart>
+      <Settings theme={theme} baseTheme={useBaseTheme()} rotation={getChartRotationKnob()} />
+      <BarSeries
+        id="bars"
+        data={BARCHART_1Y0G_LINEAR}
+        yAccessors={['y']}
+        xScaleType={ScaleType.Linear}
+        displayValueSettings={{ showValueLabel: true }}
+      />
+      <Axis id="bottom-axis" position="bottom" tickFormat={(d) => `${d} H`} />
+      <Axis id="left-axis" position="left" tickFormat={(d) => `${d} V`} />
+    </Chart>
+  );
+};
diff --git a/storybook/stories/bar/bars.stories.tsx b/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';