[XY axis] Fixes the values inside bar charts (#106198) (#106370)

* [XY axis] Fixes the values inside bar charts * Apply PR comments
elastic · Jul 21, 2021 · 5270b83 · 5270b83
1 parent f4276af
commit 5270b83
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -60,23 +60,15 @@ type XYSettingsProps = Pick<
   legendPosition: Position;
 };
 
-function getValueLabelsStyling(isHorizontal: boolean) {
-  const VALUE_LABELS_MAX_FONTSIZE = 15;
+function getValueLabelsStyling() {
+  const VALUE_LABELS_MAX_FONTSIZE = 12;
   const VALUE_LABELS_MIN_FONTSIZE = 10;
-  const VALUE_LABELS_VERTICAL_OFFSET = -10;
-  const VALUE_LABELS_HORIZONTAL_OFFSET = 10;
 
   return {
     displayValue: {
       fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
-      fill: { textInverted: true, textBorder: 2 },
-      alignment: isHorizontal
-        ? {
-            vertical: VerticalAlignment.Middle,
-          }
-        : { horizontal: HorizontalAlignment.Center },
-      offsetX: isHorizontal ? VALUE_LABELS_HORIZONTAL_OFFSET : 0,
-      offsetY: isHorizontal ? 0 : VALUE_LABELS_VERTICAL_OFFSET,
+      fill: { textInverted: false, textContrast: true },
+      alignment: { horizontal: HorizontalAlignment.Center, vertical: VerticalAlignment.Middle },
     },
   };
 }
@@ -103,7 +95,7 @@ export const XYSettings: FC<XYSettingsProps> = ({
   const theme = themeService.useChartsTheme();
   const baseTheme = themeService.useChartsBaseTheme();
   const dimmingOpacity = getUISettings().get<number | undefined>('visualization:dimmingOpacity');
-  const valueLabelsStyling = getValueLabelsStyling(rotation === 90 || rotation === -90);
+  const valueLabelsStyling = getValueLabelsStyling();
 
   const themeOverrides: PartialTheme = {
     markSizeRatio,

diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
@@ -131,7 +131,12 @@ export const renderAllSeries = (
               minBarHeight={2}
               displayValueSettings={{
                 showValueLabel,
-                overflowConstraints: [LabelOverflowConstraint.ChartEdges],
+                isValueContainedInElement: false,
+                isAlternatingValueLabel: false,
+                overflowConstraints: [
+                  LabelOverflowConstraint.ChartEdges,
+                  LabelOverflowConstraint.BarGeometry,
+                ],
               }}
             />
           );