Improve chart label alignment and spacing

Author: mhawryluk

src/components/Charts/BarChart/BarChartContent.tsx

@@ -232,7 +232,6 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
                     labelColor={theme.textSupporting}
                     xScale={args.xScale}
                     chartBoundsBottom={args.chartBounds.bottom}
-                    centerRotatedLabels
                 />
                 <ChartYAxisLabels
                     yTicks={args.yTicks}

src/components/Charts/components/ChartXAxisLabels.tsx

@@ -46,9 +46,6 @@ type ChartXAxisLabelsProps = {
 
     /** Y-pixel coordinate of the bottom edge of the chart plot area. */
     chartBoundsBottom: number;
-
-    /** When true, rotated labels are centered on the tick. When false, they are right-aligned (end of text at tick). */
-    centerRotatedLabels?: boolean;
 };
 
 function ChartXAxisLabels({
@@ -65,7 +62,6 @@ function ChartXAxisLabels({
     labelColor,
     xScale,
     chartBoundsBottom,
-    centerRotatedLabels = false,
 }: ChartXAxisLabelsProps) {
     const angleRad = (Math.abs(labelRotation) * Math.PI) / 180;
     const truncatedLabels = (() => {
@@ -89,8 +85,7 @@ function ChartXAxisLabels({
     const {ascent, descent} = getFontLineMetrics(fontMgr, fontSize);
 
     const correction = rotatedLabelCenterCorrection(ascent, descent, angleRad);
-    const centeredUpwardOffset = centerRotatedLabels && angleRad > 0 ? (Math.max(...renderedWidths) / 2) * Math.sin(angleRad) : 0;
-    const labelY = chartBoundsBottom + AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) + centeredUpwardOffset;
+    const labelY = chartBoundsBottom + AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad);
 
     return truncatedLabels.map((label, i) => {
         if (i % labelSkipInterval !== 0 || label.length === 0) {
@@ -117,7 +112,7 @@ function ChartXAxisLabels({
             );
         }
 
-        const textX = centerRotatedLabels ? tickX - renderWidth / 2 : tickX - renderWidth;
+        const textX = tickX - renderWidth;
         const origin = vec(tickX, labelY);
 
         return (

src/components/Charts/hooks/useChartLabelLayout.ts

@@ -122,15 +122,15 @@ function useChartLabelLayout({
     // Approximate truncated widths for hit-testing: exact for non-truncated labels,
     // at most ellipsisWidth px over for truncated ones — acceptable for bounding boxes.
     const truncatedLabelWidths = labelMaxWidths.map((maxW, i) => Math.min(labelWidths.at(i) ?? 0, maxW));
-    const finalMaxWidth = Math.max(...truncatedLabelWidths);
 
     let skipInterval = 1;
     if (rotation === LABEL_ROTATIONS.VERTICAL) {
-        const verticalWidth = effectiveWidth(finalMaxWidth, lineHeight, rotation);
-        const visibleCount = maxVisibleCount(labelAreaWidth, verticalWidth);
+        const visibleCount = maxVisibleCount(labelAreaWidth, lineHeight);
         skipInterval = visibleCount >= data.length ? 1 : Math.ceil(data.length / Math.max(1, visibleCount));
     }
 
+    const finalMaxWidth = Math.max(...truncatedLabelWidths.filter((_, i) => i % skipInterval === 0));
+
     const lastIndex = data.length - 1;
 
     return {

src/components/Search/SearchChartView.tsx

@@ -5,6 +5,7 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {formatToParts} from '@libs/NumberFormatUtils';
 import {buildSearchQueryJSON, buildSearchQueryString} from '@libs/SearchQueryUtils';
+import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import CHART_GROUP_BY_CONFIG from './chartGroupByConfig';
@@ -78,7 +79,7 @@ function SearchChartView({queryJSON, view, groupBy, data, isLoading}: SearchChar
     return (
         <ChartComponent
             data={data}
-            getLabel={getLabel}
+            getLabel={(item) => StringUtils.normalize(getLabel(item))}
             getFilterQuery={getFilterQuery}
             onItemPress={handleItemPress}
             isLoading={isLoading}

src/styles/index.ts

@@ -6007,10 +6007,10 @@ const staticStyles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusLarge,
         },
         chartContent: {
-            minHeight: CHART_CONTENT_MIN_HEIGHT,
+            height: CHART_CONTENT_MIN_HEIGHT,
         },
         chartActivityIndicator: {
-            minHeight: CHART_CONTENT_MIN_HEIGHT,
+            height: CHART_CONTENT_MIN_HEIGHT,
             justifyContent: 'center',
             alignItems: 'center',
         },