Victory Chart: Legend overlaps x-axis labels on vertical charts

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLabel.tsx

@@ -5,6 +5,7 @@ import {useChartTypefaces} from '@components/Charts/context/ChartFontsContext';
 import getChartSkiaTypeface from '@components/Charts/utils/getChartSkiaTypeface';
 import type {LabelItem} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
 import computeTextAnchorPosition from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/computeTextAnchorPosition';
+import getSkiaLineMetrics from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getSkiaLineMetrics';
 import {getLocalizedVictoryChartLabelText} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/localizeVictoryChartLabelText';
 import resolveChartThemeColor from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
 import useTheme from '@hooks/useTheme';
@@ -45,12 +46,11 @@ function VictoryChartLabel({x, y, text, color, fontSize, fontWeight, fontFamily,
                 fontWeight: lineFontWeight,
             });
             const lineFont = typeface && lineFontSize ? Skia.Font(typeface, lineFontSize) : null;
-            const fontMetrics = lineFont?.getMetrics();
+            const {ascent, lineHeight: metricsLineHeight} = getSkiaLineMetrics(lineFont);
             const lineWidth = lineFont?.getGlyphWidths(lineFont.getGlyphIDs(line)).reduce((totalWidth, width) => totalWidth + width, 0) ?? 0;
             const customLineHeight = lineLineHeight ? lineLineHeight * (lineFontSize ?? 0) : 0;
-            const metricsLineHeight = fontMetrics ? -fontMetrics.ascent + fontMetrics.descent + fontMetrics.leading : 0;
             const lineX = x;
-            const lineY = acc.y - (fontMetrics?.ascent ?? 0);
+            const lineY = acc.y + ascent;
             acc.y += customLineHeight || metricsLineHeight;
 
             acc.lines.push({

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLegend.tsx

@@ -4,6 +4,7 @@ import React, {Fragment} from 'react';
 import {useChartTypefaces} from '@components/Charts/context/ChartFontsContext';
 import getChartSkiaTypeface from '@components/Charts/utils/getChartSkiaTypeface';
 import type {LegendItem} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
+import getSkiaLineMetrics from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getSkiaLineMetrics';
 import resolveChartThemeColor from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
 import useTheme from '@hooks/useTheme';
 
@@ -34,13 +35,13 @@ function VictoryChartLegend({x, y, entries, gutter, symbolSpacer, chartWidth}: V
         (acc, {text, color, fontSize, fontWeight, fontFamily, fontStyle, symbolColor, symbolSize}) => {
             const typeface = getChartSkiaTypeface(typefaces, {fontFamily, fontStyle, fontWeight});
             const font = typeface && fontSize ? Skia.Font(typeface, fontSize) : null;
-            const fontMetrics = font?.getMetrics();
-            const lineHeight = fontMetrics ? fontMetrics.ascent + fontMetrics.descent + fontMetrics.leading : 0;
+            const {ascent, descent, lineHeight} = getSkiaLineMetrics(font);
+            const rowCenterY = y + lineHeight / 2;
             const symbolX = acc.x;
-            const symbolY = y;
+            const symbolY = rowCenterY;
             acc.x += (symbolSize ?? 0) + (symbolSpacer ?? 0);
             const textX = acc.x;
-            const textY = y - lineHeight / 2;
+            const textY = rowCenterY + (ascent - descent) / 2;
             acc.x += (font?.getGlyphWidths(font.getGlyphIDs(text)).reduce((totalWidth, width) => totalWidth + width, 0) ?? 0) + (gutter ?? 0);
             const resolvedColor = resolveChartThemeColor(color, theme);
 

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getSkiaLineMetrics.ts

@@ -0,0 +1,25 @@
+import type {SkFont} from '@shopify/react-native-skia';
+
+type SkiaLineMetrics = {
+    /** Distance from the baseline up to the glyph tops, as a positive value. */
+    ascent: number;
+    /** Distance from the baseline down to the glyph bottoms, as a positive value. */
+    descent: number;
+    /** Extra spacing requested by the font between consecutive lines. */
+    leading: number;
+    /** Conventional, always non-negative line height (`ascent + descent + leading`). */
+    lineHeight: number;
+};
+
+function getSkiaLineMetrics(font: SkFont | null): SkiaLineMetrics {
+    const metrics = font?.getMetrics();
+    if (!metrics) {
+        return {ascent: 0, descent: 0, leading: 0, lineHeight: 0};
+    }
+    const ascent = Math.abs(metrics.ascent);
+    const descent = Math.abs(metrics.descent);
+    const leading = Math.abs(metrics.leading);
+    return {ascent, descent, leading, lineHeight: ascent + descent + leading};
+}
+
+export default getSkiaLineMetrics;