Add client-side support for `<VictoryChart>` element by s77rt · Pull Request #90253 · Expensify/App

s77rt · 2026-05-11T20:43:31Z

Explanation of Change

Fixed Issues

$ #90546
PROPOSAL:

Tests

Open report
Add comment
Note reportID and reportActionID
Run code:

const html = `<victorychart domain="{x: [0.5, 12.5], y: [0, 2000]}" domainpadding="{x: 18, y: 0}" height="430" width="680" padding="{top: 126, bottom: 108, left: 96, right: 32}" style="{parent: { backgroundColor: '#F7F2EF', borderRadius: 16, width: '100%', maxWidth: 680}}"><victorylabel x="32" y="40" text='Monthly spend' style="{ fill: '#002E22', fontSize: 17, fontWeight: 700, fontFamily: 'Expensify Neue', }"/><victorylabel x="32" y="62" text='As of: May 6, 12:49 PM PT' style="{ fill: '#73857E', fontSize: 11, fontWeight: 400, fontFamily: 'Expensify Neue', }"/><victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#1E90F2'}}" data="[ {x: 1.13, y: 1080}, {x: 2.13, y: 1225}, {x: 3.13, y: 1375}, {x: 4.13, y: 1600}, {x: 5.13, y: 1630}, {x: 6.13, y: 1725}, {x: 7.13, y: 1400}, {x: 8.13, y: 1685}, {x: 9.13, y: 1725}, {x: 10.13, y: 1800}, {x: 11.13, y: 1800}, {x: 12.13, y: 1800}, ]" labels="[ 'Jan 2025: $1,080', 'Feb 2025: $1,225', 'Mar 2025: $1,375', 'Apr 2025: $1,600', 'May 2025: $1,630', 'Jun 2025: $1,725', 'Jul 2025: $1,400', 'Aug 2025: $1,685', 'Sep 2025: $1,725', 'Oct 2025: $1,800', 'Nov 2025: $1,800', 'Dec 2025: $1,800', ]"/><victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#13C96B'}}" data="[ {x: 0.87, y: 1200}, {x: 1.87, y: 1320}, {x: 2.87, y: 1570}, ]" labels="['Jan 2026: $1,200', 'Feb 2026: $1,320', 'Mar 2026: $1,570']"/><victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#FF6A00'}}" data="[{x: 3.87, y: 1820}]" labels="['Apr 2026: $1,820']"/><victoryaxis tickvalues="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" tickformat="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" style="{ axis: {stroke: '#E6E1DA', strokeWidth: 1}, ticks: {stroke: 'transparent'}, tickLabels: { fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 16, }, }"/><victoryaxis dependentaxis tickvalues="[0, 500, 1000, 1500, 2000]" tickformat="['$0', '$500', '$1,000', '$1,500', '$2,000']" style="{ axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: '#E6E1DA', strokeWidth: 1}, tickLabels: { fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 28, }, }"/><victorylegend x="150" y="378" orientation="horizontal" gutter="34" symbolspacer="10" style="{ labels: { fill: '#002E22', fontSize: 13, fontWeight: 500, fontFamily: 'Expensify Neue', }, }" data="[ {name: '2026 spend', symbol: {type: 'circle', fill: '#13C96B', size: 6}}, {name: '2025 spend', symbol: {type: 'circle', fill: '#1E90F2', size: 6}}, {name: 'Last month', symbol: {type: 'circle', fill: '#FF6A00', size: 6}}, ]"/></victorychart>`;

Onyx.merge("reportActions_[report ID]", {
    "[report action ID]": { message: [{ html, type: "COMMENT" }] },
});

Verify the chart looks same as in https://virtual-cfo-charts.netlify.app/
Modify the Victory Chart and make sure it works on other cases too (only cartesian vertical charts)

Verify that no errors appear in the JS console

Offline tests

n/a

QA Steps

n/a

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

codecov · 2026-05-11T20:53:04Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/Charts/BarChart/BarChartContent.tsx	`2.35% <ø> (ø)`
...ents/HTMLEngineProvider/BaseHTMLEngineProvider.tsx	`83.11% <100.00%> (+1.42%)`	⬆️
...er/HTMLRenderers/VictoryChartRenderer/constants.ts	`100.00% <100.00%> (ø)`
...ers/VictoryChartRenderer/parsers/parserRegistry.ts	`100.00% <100.00%> (ø)`
...mponents/HTMLEngineProvider/HTMLRenderers/index.ts	`100.00% <ø> (ø)`
...TMLRenderers/VictoryChartRenderer/index.native.tsx	`50.00% <50.00%> (ø)`
...toryChartRenderer/components/VictoryChartPolar.tsx	`33.33% <33.33%> (ø)`
...TMLRenderers/VictoryChartRenderer/utils/getYKey.ts	`0.00% <0.00%> (ø)`
.../useChartFontManager/useChartFontManager.native.ts	`0.00% <0.00%> (ø)`
...s/hooks/useChartFontManager/useChartFontManager.ts	`0.00% <0.00%> (ø)`
... and 22 more
... and 17 files with indirect coverage changes

roryabraham · 2026-05-20T01:23:00Z

 }

+function useChartDefaultTypeface() {
+    const regular = useTypeface(require('@assets/fonts/native/ExpensifyNeue-Regular.otf') as DataModule);


NAB - maybe we can use useLazyAsset for this?

This reverts commit dd28402.

s77rt · 2026-05-22T21:26:38Z

@situchan I fixed the styles on mWeb not to overflow. The native still needs to be fixed but will handle in a follow up. Also the legend is not re-positioned correctly, also for a follow up. There are kinda 3 issues:

Native and mWeb are not the asme, mWeb rescales but native does not (ignores the maxWidth)
Scaling keeps a fixed height which makes the chart look taller in narrow screens
Scaling does not re-draw the labels / legends, keeping them shifted

Would you have bandwidth to look at the first issue?

situchan · 2026-05-22T21:54:41Z

Native and mWeb are not the asme, mWeb rescales but native does not (ignores the maxWidth)

What's the expected design? mWeb even doesn't look good. Labels are overlapped, they should be vertical?

And 🔵 2025 spend, 🔴 Last month are cut off too

situchan · 2026-05-22T22:07:14Z

    },
    "words": [
        "--longpress",
+        "ADDCOMMENT",


oh I didn't mean to rewrite entire word list. The sorting should be case-insensitive

I don't think that matters

This should have been out of scope. I was expecting only new words added in this PR sorted.

s77rt · 2026-05-22T22:18:22Z

What's the expected design? mWeb even doesn't look good. Labels are overlapped, they should be vertical?

That's second issue. I think it should scale same as it does in https://virtual-cfo-charts.netlify.app/

And 🔵 2025 spend, 🔴 Last month are cut off too

Yeah, that's the third issue. The position is not correct, in theory to fix this I just need to multiply the x and y coordinates by the scale factors, the thing is I don't know how to get those yet, the xScale and yScale provided in VN do not seem what I'm looking for, I guess I could calculate that using the canvasSize (returned in renderArgs) but I would also need to have the original width and height. Hmm yeah that's already provided so I guess I can fix this 😅

s77rt · 2026-05-22T23:11:57Z

I'm making some progress locally, probably same fix will fix all the issues. Currently I think the domain padding is not scaling properly which makes the chart get smaller fast. I don't think I will be able to fix this today, so let's merge

Screen.Recording.2026-05-23.at.12.07.43.AM.mov

roryabraham

Merging since the style issues will be smaller follow-up PRs, and no users should actually see this until concierge starts sending charts, which he shouldn't yet.

github-actions · 2026-05-22T23:30:32Z

🚧 @roryabraham has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-05-22T23:35:58Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #90253.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-a8c12d7-b98ecfe-43b3a943c8d7de5e5c41559a7e605c66554eaf0c/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-a8c12d7-b98ecfe-320e8c3451b43c1a89d58d03568774bfe4d981f1/index.html

Web 🕸️
https://90253.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-05-22T23:39:24Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

luacmartins

Thanks for working on this! Let's compile a list of all the follow ups needed here. I'd prioritize adding polar charts and VictoryGroup first though, since those are blockers for the BE work. We can then tackle the styles next. Maybe we could get another contributor to work on the follow up style fixes.

OSBotify · 2026-05-25T11:22:47Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.81-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	cancelled 🔪
🍎 iOS 🍎	cancelled 🔪

MelvinBot · 2026-05-25T11:25:02Z

No help site changes are required for this PR.

This PR adds internal client-side rendering support for <VictoryChart> HTML elements in chat messages. This is a technical rendering capability — charts are system-generated (e.g., Virtual CFO spend charts) and displayed automatically within messages. Users don't create, configure, or interact with these charts through any UI setting or user-facing action, so no help site documentation updates are needed.

OSBotify · 2026-05-25T22:35:55Z

🚀 Deployed to production by https://github.com/luacmartins in version: 9.3.81-2 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

s77rt added 2 commits May 11, 2026 21:25

wip

48b27a6

Merge branch 'main' into support-VictoryChart-messages

949f0e2

melvin-bot Bot assigned s77rt May 11, 2026

s77rt added 10 commits May 12, 2026 02:47

temp setup

a09a744

keep only one victorychart renderer

e1ad4c9

wip still

1b030cb

use JSON5 to parse data

4561344

Merge branch 'main' into support-VictoryChart-messages

9044d57

extract and process data - wip

8148ba5

add getHierarchyID

5a3e343

got data extracted correctly

3262940

Merge branch 'main' into support-VictoryChart-messages

de5d031

some cleanup

2946877

roryabraham self-requested a review May 14, 2026 16:47

s77rt added 13 commits May 14, 2026 18:20

add some Bar props

da0a9dc

add props for victorybar and victoryline

3343cad

parse styles

f2090ce

remove unused labels prop

1dc1a3f

handle xaxis/yaxis - still missing font

e26d318

use default font

54758aa

parse domain padding correctly

4ac420e

Merge branch 'main' into support-VictoryChart-messages

09b2e04

Merge branch 'main' into support-VictoryChart-messages

76f2c75

support VictoryLabel

14d2e6a

support bold font weight

f87cdd7

support VictoryLegend

1fed4ef

Merge branch 'main' into support-VictoryChart-messages

a98dea9

roryabraham reviewed May 20, 2026

View reviewed changes

Comment thread ...omponents/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/BaseVictoryChartRenderer.tsx Outdated

roryabraham requested changes May 20, 2026

View reviewed changes

s77rt added 6 commits May 22, 2026 21:36

sort words in cspall

ab3bd7a

Revert "Use single VictoryChart import"

2067d14

This reverts commit dd28402.

better imports

3183d12

remove VictoryChart.ts

05b58b7

merge main

cae7b95

lint

5de25c2

s77rt requested review from luacmartins and roryabraham May 22, 2026 21:27

roryabraham previously approved these changes May 22, 2026

View reviewed changes

Comment thread ...nts/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContent.tsx

Comment thread ...nents/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx Outdated

situchan reviewed May 22, 2026

View reviewed changes

log once

c92d914

s77rt dismissed roryabraham’s stale review via c92d914 May 22, 2026 22:09

situchan approved these changes May 22, 2026

View reviewed changes

roryabraham approved these changes May 22, 2026

View reviewed changes

roryabraham merged commit a8c12d7 into Expensify:main May 22, 2026
65 checks passed

luacmartins reviewed May 23, 2026

View reviewed changes

luacmartins mentioned this pull request May 23, 2026

[Due for payment 2026-06-17] [Due for payment 2026-06-10] Victory Chart: Fix scaling behavior for aspect ratio, labels, and legends #91515

Closed

OSBotify mentioned this pull request May 25, 2026

Deploy Checklist: New Expensify 2026-05-25 #91591

Closed

36 tasks

s77rt mentioned this pull request May 27, 2026

Fix scaling behavior for aspect ratio, labels, and legends #91540

Merged

51 tasks

MelvinBot mentioned this pull request May 30, 2026

[$250] Chart should maintain aspect ratio when window/screen size changes #92147

Closed

2 tasks

Uh oh!

Conversation

s77rt commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented May 11, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

roryabraham May 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

s77rt commented May 22, 2026

Uh oh!

Uh oh!

Uh oh!

situchan commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

situchan May 22, 2026

Choose a reason for hiding this comment

Uh oh!

s77rt May 22, 2026

Choose a reason for hiding this comment

Uh oh!

situchan May 22, 2026

Choose a reason for hiding this comment

Uh oh!

s77rt commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

s77rt commented May 22, 2026

Uh oh!

roryabraham left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 22, 2026

Uh oh!

github-actions Bot commented May 22, 2026

Uh oh!

OSBotify commented May 22, 2026

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented May 25, 2026

Uh oh!

MelvinBot commented May 25, 2026

Uh oh!

OSBotify commented May 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

s77rt commented May 11, 2026 •

edited

Loading

codecov Bot commented May 11, 2026 •

edited by github-actions Bot

Loading

situchan commented May 22, 2026 •

edited

Loading

s77rt commented May 22, 2026 •

edited

Loading