Expense - In view:bar, rupee symbol is not displayed correctly.

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: V9.3.11-17
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #80658
Email or phone of affected tester (no customers): dreamnitethedragon@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Redminote 10S Android 13
App Component: Money Requests

Action Performed:

Pre-condition: set payment currency & workspace currency is INR - ₹

1. Launch app
2. Open workspace chat
3. Create a manual expense with advertising category
4. Go to reports
5. Enter type:expense category:Advertising view:bar

Expected Result:

In view:bar, rupee symbol must be displayed correctly.

Actual Result:

In view:bar, rupee symbol is not displayed correctly.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

@neil-marcellini recently merged #80658, but they are OOO right now, so I'll auto-assign someone else.

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @danieldoglas (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #80658 - "feat: implement SearchBarChart component" by @mateuuszzzzz (High confidence)
Related Issues: None

Recommendation: REVERT

PR #80658 introduced the new SearchBarChart component for the Insights feature. The PR uses @shopify/react-native-skia and victory-native for rendering bar charts. The rupee symbol (₹) rendering issue is specific to this new chart component and did not exist before this feature was added.

Since this is a new feature that does not exist in production and it has rendering issues with currency symbols (particularly non-ASCII Unicode characters like ₹), the safest approach is to revert the PR and fix the Unicode rendering issue before re-merging.

Labels: DeployBlockerCash label will be kept (this is a frontend/App bug)

📋 Detailed Analysis

Evidence

• The issue description explicitly links to PR feat: implement SearchBarChart component #80658 as the source
• The bug is reproducible on staging (v9.3.11-17) but not in production (feature does not exist in prod)
• The issue occurs when using type:expense category:Advertising view:bar query, which triggers the new SearchBarChart component
• The rupee symbol (₹) is not displayed correctly in the bar chart view

Verification

PR #80658 added:

• New SearchBarChart component (src/components/Search/SearchBarChart.tsx)
• New BarChart infrastructure using @shopify/react-native-skia and victory-native
• Currency formatting utilities in CurrencyUtils.getCurrencyDisplayInfoForCharts()
• Chart rendering hooks and components

Files affected:

• src/components/Charts/BarChart/BarChartContent.tsx - Main chart rendering component
• src/components/Charts/hooks/useChartLabelFormats.ts - Y-axis label formatting
• src/components/Search/SearchChartView.tsx - Chart view integration
• src/libs/CurrencyUtils.ts - Added getCurrencyDisplayInfoForCharts() function

Root Cause

The issue is in how currency symbols are rendered in the Skia-based chart component. The getCurrencyDisplayInfoForCharts function correctly extracts the rupee symbol "₹" using Intl.NumberFormat.formatToParts(), but when this Unicode character is passed to the @shopify/react-native-skia rendering layer for chart axis labels, it does not display correctly.

The problem is specifically in the chart rendering pipeline:

1. SearchChartView calls getCurrencyDisplayInfoForCharts(currency) which returns {symbol: "₹", position: "left"}
2. This symbol is passed to BarChart as yAxisUnit
3. useChartLabelFormats hook formats Y-axis labels like "₹100" or "₹1,000"
4. The Skia canvas renderer fails to properly display the ₹ symbol

This is likely a font rendering issue where the Skia canvas does not have the proper font/glyph support for the rupee symbol Unicode character (U+20B9).