feat(bar_chart): scaled font size for value labels

src/chart_types/xy_chart/renderer/canvas/primitives/text.ts

@@ -35,6 +35,7 @@ export function renderText(
   },
   degree: number = 0,
   translation?: Partial<Point>,
+  scale: number = 1,
 ) {
   if (text === undefined || text === null) {
     return;
@@ -49,7 +50,9 @@ export function renderText(
       if (translation?.x || translation?.y) {
         ctx.translate(translation?.x ?? 0, translation?.y ?? 0);
       }
-      ctx.fillText(text, origin.x, origin.y);
+      ctx.translate(origin.x, origin.y);
+      ctx.scale(scale, scale);
+      ctx.fillText(text, 0, 0);
     });
   });
 }
@@ -81,14 +84,14 @@ export function wrapLines(
   const shouldAddEllipsis = false;
   const textArr: string[] = [];
   const textMeasureProcessor = measureText(ctx);
-  const getTextWidth = (text: string) => {
+  const getTextWidth = (textString: string) => {
     const measuredText = textMeasureProcessor(fontSize, [
       {
-        text,
+        text: textString,
         ...font,
       },
     ]);
-    const measure = measuredText[0];
+    const [measure] = measuredText;
     if (measure) {
       return measure.width;
     }

src/chart_types/xy_chart/renderer/canvas/values/bar.ts

@@ -38,14 +38,14 @@ interface BarValuesProps {
 /** @internal */
 export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesProps) {
   const { bars, debug, chartRotation, chartDimensions, theme } = props;
-  const { fontFamily, fontStyle, fill, fontSize } = theme.barSeriesStyle.displayValue;
+  const { fontFamily, fontStyle, fill } = theme.barSeriesStyle.displayValue;
   const barsLength = bars.length;
   for (let i = 0; i < barsLength; i++) {
     const { displayValue } = bars[i];
     if (!displayValue) {
       continue;
     }
-    const { text } = displayValue;
+    const { text, fontSize, fontScale } = displayValue;
     let textLines = {
       lines: [text],
       width: displayValue.width,
@@ -80,13 +80,13 @@ export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesP
     const { width, height } = textLines;
     const linesLength = textLines.lines.length;
 
-    for (let i = 0; i < linesLength; i++) {
-      const text = textLines.lines[i];
-      const origin = repositionTextLine({ x, y }, chartRotation, i, linesLength, { height, width });
+    for (let j = 0; j < linesLength; j++) {
+      const textLine = textLines.lines[j];
+      const origin = repositionTextLine({ x, y }, chartRotation, j, linesLength, { height, width });
       renderText(
         ctx,
         origin,
-        text,
+        textLine,
         {
           ...font,
           fill,
@@ -95,6 +95,8 @@ export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesP
           baseline,
         },
         -chartRotation,
+        undefined,
+        fontScale,
       );
     }
   }

src/chart_types/xy_chart/rendering/rendering.ts

@@ -46,6 +46,7 @@ import {
   GeometryStateStyle,
   LineStyle,
   BubbleSeriesStyle,
+  DisplayValueStyle,
 } from '../../../utils/themes/theme';
 import { IndexedGeometryMap, GeometryType } from '../utils/indexed_geometry_map';
 import { DataSeriesDatum, DataSeries, XYChartSeriesIdentifier } from '../utils/series';
@@ -56,6 +57,59 @@ export interface MarkSizeOptions {
   enabled: boolean;
   ratio?: number;
 }
+/**
+ * Returns a safe scaling factor for label text for fixed or range size inputs
+ * @internal
+ */
+function getFinalFontScalingFactor(
+  scale: number,
+  fixedFontSize: number,
+  limits: DisplayValueStyle['fontSize'],
+): number {
+  if (typeof limits === 'number') {
+    // it's a fixed size, so it's always ok
+    return 1;
+  }
+  const finalFontSize = scale * fixedFontSize;
+  return finalFontSize <= limits.max && finalFontSize >= limits.min ? scale : 0;
+}
+
+/**
+ * Workout the text box size and fixedFontSize based on a collection of options
+ * @internal
+ */
+function computeBoxWidth(
+  text: string,
+  {
+    padding,
+    fontSize,
+    fontFamily,
+    bboxCalculator,
+    width,
+  }: {
+    padding: number;
+    fontSize: number | { min: number; max: number };
+    fontFamily: string;
+    bboxCalculator: CanvasTextBBoxCalculator;
+    width: number;
+  },
+  displayValueSettings: DisplayValueSpec | undefined,
+): { fixedFontScale: number; displayValueWidth: number } {
+  const fixedFontScale = typeof fontSize === 'number' ? fontSize : fontSize.min;
+
+  const computedDisplayValueWidth = bboxCalculator.compute(text || '', padding, fixedFontScale, fontFamily).width;
+  if (typeof fontSize !== 'number') {
+    return {
+      fixedFontScale,
+      displayValueWidth: computedDisplayValueWidth,
+    };
+  }
+  return {
+    fixedFontScale,
+    displayValueWidth:
+      displayValueSettings && displayValueSettings.isValueContainedInElement ? width : computedDisplayValueWidth,
+  };
+}
 
 /**
  * Returns value of `y1` or `filled.y1` or null
@@ -306,6 +360,7 @@ export function renderBars(
   styleAccessor?: BarStyleAccessor,
   minBarHeight?: number,
   stackMode?: StackMode,
+  chartRotation?: number,
 ): {
   barGeometries: BarGeometry[];
   indexedGeometryMap: IndexedGeometryMap;
@@ -384,25 +439,37 @@ export function renderBars(
 
     // only show displayValue for even bars if showOverlappingValue
     const displayValueText =
-      displayValueSettings && displayValueSettings.isAlternatingValueLabel
-        ? barGeometries.length % 2 === 0
-          ? formattedDisplayValue
-          : undefined
+      displayValueSettings && displayValueSettings.isAlternatingValueLabel && barGeometries.length % 2
+        ? undefined
         : formattedDisplayValue;
 
-    const computedDisplayValueWidth = bboxCalculator.compute(displayValueText || '', padding, fontSize, fontFamily)
-      .width;
-    const displayValueWidth =
-      displayValueSettings && displayValueSettings.isValueContainedInElement ? width : computedDisplayValueWidth;
+    const { displayValueWidth, fixedFontScale } = computeBoxWidth(
+      displayValueText || '',
+      { padding, fontSize, fontFamily, bboxCalculator, width },
+      displayValueSettings,
+    );
+
+    const isHorizontalRotation = chartRotation == null || [0, 180].includes(chartRotation);
+    // Take 70% of space for the label text
+    const fontSizeFactor = 0.7;
+    // Pick the right side of the label's box to use as factor reference
+    const referenceWidth = isHorizontalRotation ? displayValueWidth : fixedFontScale;
+
+    const tempTextScalingFactor = (width * fontSizeFactor) / referenceWidth;
+    const textScalingFactor = getFinalFontScalingFactor(tempTextScalingFactor, fixedFontScale, fontSize);
 
     const hideClippedValue = displayValueSettings ? displayValueSettings.hideClippedValue : undefined;
+    // Based on rotation scale the width of the text box
+    const bboxWidthFactor = isHorizontalRotation ? textScalingFactor : 1;
 
     const displayValue =
       displayValueSettings && displayValueSettings.showValueLabel
         ? {
+            fontScale: textScalingFactor,
+            fontSize: fixedFontScale,
             text: displayValueText,
-            width: displayValueWidth,
-            height: fontSize,
+            width: bboxWidthFactor * displayValueWidth,
+            height: textScalingFactor * fixedFontScale,
             hideClippedValue,
             isValueContainedInElement: displayValueSettings.isValueContainedInElement,
           }

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

@@ -324,6 +324,7 @@ export function computeSeriesGeometries(
       chartTheme,
       enableHistogramMode,
       stackMode,
+      chartRotation,
     );
     orderIndex = counts[SeriesTypes.Bar] > 0 ? orderIndex + 1 : orderIndex;
     areas.push(...geometries.areas);
@@ -363,6 +364,8 @@ export function computeSeriesGeometries(
       axesSpecs,
       chartTheme,
       enableHistogramMode,
+      undefined,
+      chartRotation,
     );
     orderIndex = counts[SeriesTypes.Bar] > 0 ? orderIndex + counts[SeriesTypes.Bar] : orderIndex;
 
@@ -464,7 +467,8 @@ function renderGeometries(
   axesSpecs: AxisSpec[],
   chartTheme: Theme,
   enableHistogramMode: boolean,
-  stackMode?: StackMode,
+  stackMode: StackMode | undefined,
+  chartRotation: number,
 ): {
   points: PointGeometry[];
   bars: BarGeometry[];
@@ -527,6 +531,7 @@ function renderGeometries(
         spec.styleAccessor,
         spec.minBarHeight,
         stackMode,
+        chartRotation,
       );
       indexedGeometryMap.merge(renderedBars.indexedGeometryMap);
       bars.push(...renderedBars.barGeometries);

src/mocks/geometries.ts

@@ -69,6 +69,7 @@ export class MockBarGeometry {
     height: 0,
     color,
     displayValue: {
+      fontSize: 10,
       text: '',
       width: 0,
       height: 0,

src/utils/geometry.ts

@@ -69,6 +69,8 @@ export interface BarGeometry {
   height: number;
   color: Color;
   displayValue?: {
+    fontScale?: number;
+    fontSize: number;
     text: any;
     width: number;
     height: number;

src/utils/themes/theme.ts

@@ -290,7 +290,14 @@ export interface Theme {
 export type PartialTheme = RecursivePartial<Theme>;
 
 /** @public */
-export type DisplayValueStyle = TextStyle & {
+export type DisplayValueStyle = Omit<TextStyle, 'fontSize'> & {
+  fontSize:
+    | number
+    | {
+        min: number;
+        max: number;
+      };
+} & {
   offsetX: number;
   offsetY: number;
 };