From 8b25d1696d541064867c05fbf2c35c41d7a1e978 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Sat, 23 May 2026 17:21:30 -0300
Subject: [PATCH 1/5] add polar charts

---
 .../components/VictoryChartPolar.tsx          | 36 ++++++++++++++---
 .../VictoryChartRenderer/constants.ts         |  6 ++-
 .../context/VictoryChartContext.tsx           |  8 ++--
 .../parsers/parserRegistry.ts                 |  2 +
 .../parsers/processVictoryChartTree.ts        |  9 ++++-
 .../parsers/victoryPieParser.ts               | 39 +++++++++++++++++++
 .../VictoryChartRenderer/types.ts             | 25 +++++++++++-
 7 files changed, 113 insertions(+), 12 deletions(-)
 create mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
index 72a8edd94690..056a45f5b82a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
@@ -1,14 +1,38 @@
-import {useEffect} from 'react';
-import Log from '@libs/Log';
+import React from 'react';
+import {Pie, PolarChart} from 'victory-native';
+import {POLAR_COLOR_KEY, POLAR_LABEL_KEY, POLAR_VALUE_KEY} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
+import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
+import VictoryChartLabels from './VictoryChartLabels';
+import VictoryChartLegend from './VictoryChartLegend';
 
 /**
- * Renders the PolarChart with data drawn from context.
+ * Renders the PolarChart (pie) with data, labels, and legend drawn from context.
  */
 function VictoryChartPolar() {
-    useEffect(() => Log.warn('Trying to render unsupported polar charts'), []);
+    const {polarConfig, labelItems, legendItems} = useVictoryChartContext();
 
-    // Support for polar chars will be added in a follow up https://github.com/Expensify/App/issues/90546
-    return null;
+    if (!polarConfig) {
+        return null;
+    }
+
+    return (
+        <PolarChart
+            data={polarConfig.data}
+            labelKey={POLAR_LABEL_KEY}
+            valueKey={POLAR_VALUE_KEY}
+            colorKey={POLAR_COLOR_KEY}
+        >
+            <Pie.Chart
+                innerRadius={polarConfig.innerRadius}
+                startAngle={polarConfig.startAngle}
+                circleSweepDegrees={polarConfig.circleSweepDegrees}
+            >
+                {() => <Pie.Slice />}
+            </Pie.Chart>
+            <VictoryChartLabels labelItems={labelItems} />
+            <VictoryChartLegend legendItems={legendItems} />
+        </PolarChart>
+    );
 }
 
 VictoryChartPolar.displayName = 'VictoryChartPolar';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants.ts
index 67cd247e8c6f..a8caf58534ec 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants.ts
@@ -1,9 +1,13 @@
 const X_KEY = 'x';
 const Y_KEY_PREFIX = 'y';
 
+const POLAR_LABEL_KEY = 'polarLabel' as const;
+const POLAR_VALUE_KEY = 'polarValue' as const;
+const POLAR_COLOR_KEY = 'polarColor' as const;
+
 const CHART_TYPE = {
     CARTESIAN: 'cartesian',
     POLAR: 'polar',
 } as const;
 
-export {X_KEY, Y_KEY_PREFIX, CHART_TYPE};
+export {X_KEY, Y_KEY_PREFIX, POLAR_LABEL_KEY, POLAR_VALUE_KEY, POLAR_COLOR_KEY, CHART_TYPE};
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext.tsx
index 329e8f690e12..bd1ecf973b93 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext.tsx
@@ -3,7 +3,7 @@ import type {TNode} from 'react-native-render-html';
 import {useChartDefaultTypeface} from '@components/Charts/hooks';
 import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
 import processVictoryChartTree from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree';
-import type {ChartType, ProcessNodeResult} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
+import type {ChartType, PolarConfig, ProcessNodeResult} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
 import parseStyles from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseStyles';
 
 type VictoryChartContextValue = {
@@ -15,6 +15,7 @@ type VictoryChartContextValue = {
     yAxis: ProcessNodeResult['yAxis'];
     labelItems: ProcessNodeResult['labelItems'];
     legendItems: ProcessNodeResult['legendItems'];
+    polarConfig: PolarConfig | undefined;
     chartContentStyles: ReturnType<typeof parseStyles>['nodeStyles'];
     chartContainerStyles: ReturnType<typeof parseStyles>['parentNodeStyles'];
     type: ChartType | null;
@@ -28,11 +29,11 @@ const VictoryChartContext = createContext<VictoryChartContextValue | null>(null)
  */
 function VictoryChartProvider({tnode, children}: {tnode: TNode; children: React.ReactNode}) {
     const {regular: regularTypeface} = useChartDefaultTypeface();
-    const {data, xKey, yKeys, xAxis, yAxis, labelItems, legendItems} = processVictoryChartTree(tnode, regularTypeface);
+    const {data, xKey, yKeys, xAxis, yAxis, labelItems, legendItems, polarConfig} = processVictoryChartTree(tnode, regularTypeface);
     const {nodeStyles: chartContentStyles, parentNodeStyles: chartContainerStyles} = parseStyles(tnode);
 
     const hasCartesianData = Object.keys(data).length > 0;
-    const hasPolarData = false;
+    const hasPolarData = (polarConfig?.data.length ?? 0) > 0;
     let type: ChartType | null = null;
 
     // XNOR Check. There must be one and only one valid chart
@@ -57,6 +58,7 @@ function VictoryChartProvider({tnode, children}: {tnode: TNode; children: React.
         yAxis,
         labelItems,
         legendItems,
+        polarConfig,
         chartContentStyles,
         chartContainerStyles,
         type,
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/parserRegistry.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/parserRegistry.ts
index d20acff2a2cc..465095bd3d69 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/parserRegistry.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/parserRegistry.ts
@@ -2,6 +2,7 @@ import type {NodeParser} from '@components/HTMLEngineProvider/HTMLRenderers/Vict
 import parseVictoryAxisNode from './victoryAxisParser';
 import parseVictoryLabelNode from './victoryLabelParser';
 import parseVictoryLegendNode from './victoryLegendParser';
+import parseVictoryPieNode from './victoryPieParser';
 import parseVictorySeriesNode from './victorySeriesParser';
 
 /**
@@ -14,6 +15,7 @@ const PARSER_REGISTRY: Partial<Record<string, NodeParser>> = {
     victoryaxis: parseVictoryAxisNode,
     victorylabel: parseVictoryLabelNode,
     victorylegend: parseVictoryLegendNode,
+    victorypie: parseVictoryPieNode,
 };
 
 export default PARSER_REGISTRY;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree.ts
index a5f1762d94e8..53b458f27499 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree.ts
@@ -16,6 +16,7 @@ function processVictoryChartTree(tnode: TNode, typeface: SkTypeface | null): Pro
     let yAxis: ProcessNodeResult['yAxis'];
     const labelItems: ProcessNodeResult['labelItems'] = [];
     const legendItems: ProcessNodeResult['legendItems'] = [];
+    let polarConfig: ProcessNodeResult['polarConfig'];
 
     const parser = PARSER_REGISTRY[tnode.tagName ?? ''];
     if (parser) {
@@ -38,6 +39,9 @@ function processVictoryChartTree(tnode: TNode, typeface: SkTypeface | null): Pro
         if (result.legendItems) {
             legendItems.push(...result.legendItems);
         }
+        if (result.polarConfig) {
+            polarConfig = result.polarConfig;
+        }
     }
 
     for (const child of tnode.children) {
@@ -52,9 +56,12 @@ function processVictoryChartTree(tnode: TNode, typeface: SkTypeface | null): Pro
         }
         labelItems.push(...childResult.labelItems);
         legendItems.push(...childResult.legendItems);
+        if (childResult.polarConfig) {
+            polarConfig = childResult.polarConfig;
+        }
     }
 
-    return {data, xKey: X_KEY, yKeys, xAxis, yAxis, labelItems, legendItems};
+    return {data, xKey: X_KEY, yKeys, xAxis, yAxis, labelItems, legendItems, polarConfig};
 }
 
 export default processVictoryChartTree;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
new file mode 100644
index 000000000000..b30569399608
--- /dev/null
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
@@ -0,0 +1,39 @@
+import type {TNode} from 'react-native-render-html';
+import {getChartColor} from '@components/Charts/utils';
+import {POLAR_COLOR_KEY, POLAR_LABEL_KEY, POLAR_VALUE_KEY} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
+import type {PartialProcessNodeResult, PolarChartData, RawChartData} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
+import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+
+/**
+ * Parse pie config from a `<victorypie>` node.
+ * Data points use the same {x, y} format as cartesian series; colorscale provides per-slice colors.
+ */
+function parseVictoryPieNode(tnode: TNode): PartialProcessNodeResult {
+    const points = parseAttribute<RawChartData[]>(tnode.attributes.data) ?? [];
+    const colorScale = parseAttribute<string[]>(tnode.attributes.colorscale) ?? [];
+    const innerRadius = parseAttribute<number>(tnode.attributes.innerradius);
+    const startAngle = parseAttribute<number>(tnode.attributes.startangle);
+    const endAngle = parseAttribute<number>(tnode.attributes.endangle);
+
+    const circleSweepDegrees =
+        endAngle !== undefined && startAngle !== undefined
+            ? endAngle - startAngle
+            : endAngle;
+
+    const data: PolarChartData[] = points.map((point, index) => ({
+        [POLAR_LABEL_KEY]: String(point.x),
+        [POLAR_VALUE_KEY]: point.y,
+        [POLAR_COLOR_KEY]: colorScale.at(index) ?? getChartColor(index),
+    }));
+
+    return {
+        polarConfig: {
+            data,
+            innerRadius,
+            startAngle,
+            circleSweepDegrees,
+        },
+    };
+}
+
+export default parseVictoryPieNode;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
index 7fb426a6ef1c..abbe120c7b84 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
@@ -3,7 +3,7 @@ import type {ComponentProps} from 'react';
 import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
 import type {ValueOf} from 'type-fest';
 import type {CartesianChart} from 'victory-native';
-import type {CHART_TYPE, X_KEY, Y_KEY_PREFIX} from './constants';
+import type {CHART_TYPE, POLAR_COLOR_KEY, POLAR_LABEL_KEY, POLAR_VALUE_KEY, X_KEY, Y_KEY_PREFIX} from './constants';
 
 type VictoryChartRendererProps = CustomRendererProps<TBlock>;
 
@@ -49,6 +49,23 @@ type RawLegendStyle = {
 type XKey = typeof X_KEY;
 type YKey = `${typeof Y_KEY_PREFIX}${string}`;
 
+type PolarLabelKey = typeof POLAR_LABEL_KEY;
+type PolarValueKey = typeof POLAR_VALUE_KEY;
+type PolarColorKey = typeof POLAR_COLOR_KEY;
+
+type PolarChartData = {
+    polarLabel: string;
+    polarValue: number;
+    polarColor: string;
+};
+
+type PolarConfig = {
+    data: PolarChartData[];
+    innerRadius?: number;
+    startAngle?: number;
+    circleSweepDegrees?: number;
+};
+
 type CartesianChartData = {
     [X_KEY]: string | number;
     [key: `${YKey}`]: number;
@@ -123,6 +140,7 @@ type ProcessNodeResult = {
     yAxis: CartesianChartProps['yAxis'];
     labelItems: LabelItem[];
     legendItems: LegendItem[];
+    polarConfig?: PolarConfig;
 };
 
 /** Partial slice produced by a single per-tag parser before merging. */
@@ -141,6 +159,11 @@ export type {
     RawLegendStyle,
     XKey,
     YKey,
+    PolarLabelKey,
+    PolarValueKey,
+    PolarColorKey,
+    PolarChartData,
+    PolarConfig,
     CartesianChartData,
     CartesianChartProps,
     LabelItem,

From eb78bc25c233f4c86a15e36b6a5a42278d1c8d91 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Sun, 24 May 2026 08:52:15 -0400
Subject: [PATCH 2/5] fix prettier

---
 .../VictoryChartRenderer/parsers/victoryPieParser.ts         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
index b30569399608..50071e07e854 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
@@ -15,10 +15,7 @@ function parseVictoryPieNode(tnode: TNode): PartialProcessNodeResult {
     const startAngle = parseAttribute<number>(tnode.attributes.startangle);
     const endAngle = parseAttribute<number>(tnode.attributes.endangle);
 
-    const circleSweepDegrees =
-        endAngle !== undefined && startAngle !== undefined
-            ? endAngle - startAngle
-            : endAngle;
+    const circleSweepDegrees = endAngle !== undefined && startAngle !== undefined ? endAngle - startAngle : endAngle;
 
     const data: PolarChartData[] = points.map((point, index) => ({
         [POLAR_LABEL_KEY]: String(point.x),

From a5c7021f5ba7f3b9c8a5b54d487839e45aa42986 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Sun, 24 May 2026 09:50:00 -0400
Subject: [PATCH 3/5] fix lint

---
 .../parsers/victoryLabelParser.ts             | 54 ++++++++++++++++---
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
index 37420261b889..0ce0e5fd3a3e 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
@@ -2,19 +2,57 @@ import type {TNode} from 'react-native-render-html';
 import type {LabelItem, PartialProcessNodeResult, RawLabelStyle} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
 import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
 
+function extractLabelProps(style: RawLabelStyle | undefined): Pick<LabelItem, 'color' | 'fontSize' | 'fontWeight'> {
+    return {
+        color: style?.fill,
+        fontSize: style?.fontSize !== undefined ? Number(style.fontSize) : undefined,
+        fontWeight: Number(style?.fontWeight) === 700 ? 'bold' : undefined,
+    };
+}
+
 /**
  * Parse label config from a `<victorylabel>` node.
+ *
+ * Supports both single-line labels (string text + object style) and multi-line
+ * labels (array text + array style), expanding each line into its own LabelItem.
+ * Y positions for lines after the first are offset by fontSize × lineHeight derived
+ * from the optional `lineheight` attribute (number or array of per-line multipliers).
  */
 function parseVictoryLabelNode(tnode: TNode): PartialProcessNodeResult {
     const x = parseAttribute<number>(tnode.attributes.x) ?? 0;
-    const y = parseAttribute<number>(tnode.attributes.y) ?? 0;
-    const text = parseAttribute<string>(tnode.attributes.text) ?? '';
-    const style = parseAttribute<RawLabelStyle>(tnode.attributes.style);
-    const color = style?.fill;
-    const fontSize = style?.fontSize !== undefined ? Number(style.fontSize) : undefined;
-    const fontWeight = Number(style?.fontWeight) === 700 ? 'bold' : undefined;
-    const labelItem: LabelItem = {x, y, text, color, fontSize, fontWeight};
-    return {labelItems: [labelItem]};
+    const baseY = parseAttribute<number>(tnode.attributes.y) ?? 0;
+
+    const rawText = parseAttribute<string | string[]>(tnode.attributes.text);
+    const rawStyle = parseAttribute<RawLabelStyle | RawLabelStyle[]>(tnode.attributes.style);
+    const rawLineHeight = parseAttribute<number | number[]>(tnode.attributes.lineheight);
+
+    const texts = Array.isArray(rawText) ? rawText.map(String) : [String(rawText ?? '')];
+    const styles = Array.isArray(rawStyle) ? rawStyle : [rawStyle];
+    let lineHeights: number[];
+    if (Array.isArray(rawLineHeight)) {
+        lineHeights = rawLineHeight;
+    } else if (typeof rawLineHeight === 'number') {
+        lineHeights = [rawLineHeight];
+    } else {
+        lineHeights = [];
+    }
+
+    const labelItems: LabelItem[] = [];
+    let currentY = baseY;
+
+    for (let i = 0; i < texts.length; i++) {
+        const style = styles.at(i) ?? styles.at(0);
+        const props = extractLabelProps(style);
+        labelItems.push({x, y: currentY, text: texts.at(i) ?? '', ...props});
+
+        if (i < texts.length - 1) {
+            const lh = lineHeights.at(i) ?? 1.2;
+            const fs = props.fontSize ?? 13;
+            currentY += fs * lh;
+        }
+    }
+
+    return {labelItems};
 }
 
 export default parseVictoryLabelNode;

From 25f7ff57a72171d4ccf5d74e631c276644f975b7 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Sun, 24 May 2026 09:50:52 -0400
Subject: [PATCH 4/5] rm comment

---
 .../VictoryChartRenderer/parsers/victoryLabelParser.ts       | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
index 0ce0e5fd3a3e..165bf23f5705 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
@@ -12,11 +12,6 @@ function extractLabelProps(style: RawLabelStyle | undefined): Pick<LabelItem, 'c
 
 /**
  * Parse label config from a `<victorylabel>` node.
- *
- * Supports both single-line labels (string text + object style) and multi-line
- * labels (array text + array style), expanding each line into its own LabelItem.
- * Y positions for lines after the first are offset by fontSize × lineHeight derived
- * from the optional `lineheight` attribute (number or array of per-line multipliers).
  */
 function parseVictoryLabelNode(tnode: TNode): PartialProcessNodeResult {
     const x = parseAttribute<number>(tnode.attributes.x) ?? 0;

From 002a7e7f06ef86d5c373834b4590f30be38cc4d0 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Sun, 24 May 2026 10:11:49 -0400
Subject: [PATCH 5/5] parse labels

---
 .../components/VictoryChartLabels.tsx                 | 11 ++++++++---
 .../components/VictoryChartPolar.tsx                  |  1 +
 .../parsers/victoryLabelParser.ts                     | 10 +++++++++-
 .../VictoryChartRenderer/parsers/victoryPieParser.ts  |  2 ++
 .../HTMLRenderers/VictoryChartRenderer/types.ts       |  4 ++++
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLabels.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLabels.tsx
index 6e4aaf831c0a..dd038ca8e1c0 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLabels.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLabels.tsx
@@ -15,13 +15,18 @@ function VictoryChartLabels({labelItems}: VictoryChartLabelsProps) {
     const {regular: regularTypeface, bold: boldTypeface} = useChartDefaultTypeface();
     return (
         <>
-            {labelItems.map(({x, y, text, color, fontSize, fontWeight}) => {
+            {labelItems.map(({x, y, text, color, fontSize, fontWeight, textAnchor}, i) => {
                 const typeface = fontWeight === 'bold' ? boldTypeface : regularTypeface;
                 const font = typeface ? Skia.Font(typeface, fontSize) : null;
+                let drawX = x;
+                if (font && textAnchor !== 'start') {
+                    const textWidth = font.getTextWidth(text);
+                    drawX = textAnchor === 'middle' ? x - textWidth / 2 : x - textWidth;
+                }
                 return (
                     <SkText
-                        key={`text-${x}-${y}`}
-                        x={x}
+                        key={`text-${x}-${y}-${i}`}
+                        x={drawX}
                         y={y}
                         text={text}
                         font={font}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
index 056a45f5b82a..2899e5311fde 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx
@@ -24,6 +24,7 @@ function VictoryChartPolar() {
         >
             <Pie.Chart
                 innerRadius={polarConfig.innerRadius}
+                size={polarConfig.outerRadius !== undefined ? polarConfig.outerRadius * 2 : undefined}
                 startAngle={polarConfig.startAngle}
                 circleSweepDegrees={polarConfig.circleSweepDegrees}
             >
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
index 165bf23f5705..7de9445dc796 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts
@@ -10,12 +10,20 @@ function extractLabelProps(style: RawLabelStyle | undefined): Pick<LabelItem, 'c
     };
 }
 
+function parseTextAnchor(raw: string | undefined): LabelItem['textAnchor'] {
+    if (raw === 'middle' || raw === 'end') {
+        return raw;
+    }
+    return 'start';
+}
+
 /**
  * Parse label config from a `<victorylabel>` node.
  */
 function parseVictoryLabelNode(tnode: TNode): PartialProcessNodeResult {
     const x = parseAttribute<number>(tnode.attributes.x) ?? 0;
     const baseY = parseAttribute<number>(tnode.attributes.y) ?? 0;
+    const textAnchor = parseTextAnchor(tnode.attributes.textanchor);
 
     const rawText = parseAttribute<string | string[]>(tnode.attributes.text);
     const rawStyle = parseAttribute<RawLabelStyle | RawLabelStyle[]>(tnode.attributes.style);
@@ -38,7 +46,7 @@ function parseVictoryLabelNode(tnode: TNode): PartialProcessNodeResult {
     for (let i = 0; i < texts.length; i++) {
         const style = styles.at(i) ?? styles.at(0);
         const props = extractLabelProps(style);
-        labelItems.push({x, y: currentY, text: texts.at(i) ?? '', ...props});
+        labelItems.push({x, y: currentY, text: texts.at(i) ?? '', textAnchor, ...props});
 
         if (i < texts.length - 1) {
             const lh = lineHeights.at(i) ?? 1.2;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
index 50071e07e854..d52af97b3d2d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryPieParser.ts
@@ -12,6 +12,7 @@ function parseVictoryPieNode(tnode: TNode): PartialProcessNodeResult {
     const points = parseAttribute<RawChartData[]>(tnode.attributes.data) ?? [];
     const colorScale = parseAttribute<string[]>(tnode.attributes.colorscale) ?? [];
     const innerRadius = parseAttribute<number>(tnode.attributes.innerradius);
+    const outerRadius = parseAttribute<number>(tnode.attributes.radius);
     const startAngle = parseAttribute<number>(tnode.attributes.startangle);
     const endAngle = parseAttribute<number>(tnode.attributes.endangle);
 
@@ -27,6 +28,7 @@ function parseVictoryPieNode(tnode: TNode): PartialProcessNodeResult {
         polarConfig: {
             data,
             innerRadius,
+            outerRadius,
             startAngle,
             circleSweepDegrees,
         },
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
index abbe120c7b84..20f85c2a45b6 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types.ts
@@ -62,6 +62,7 @@ type PolarChartData = {
 type PolarConfig = {
     data: PolarChartData[];
     innerRadius?: number;
+    outerRadius?: number;
     startAngle?: number;
     circleSweepDegrees?: number;
 };
@@ -89,6 +90,9 @@ type LabelItem = {
 
     /** Font weight */
     fontWeight?: 'normal' | 'bold';
+
+    /** Horizontal text alignment relative to x. 'middle' centers the text at x, 'end' right-aligns. Defaults to 'start'. */
+    textAnchor?: 'start' | 'middle' | 'end';
 };
 
 type LegendItemEntry = {