Arabic (RTL) text renders character-by-character instead of connected glyphs

[zaidmuachrat]

Description

When rendering charts with Arabic text (RTL language), all text rendered by the SVG renderer — including axis labels, tooltip content, and legend items — displays Arabic characters as isolated glyphs instead of properly connected cursive forms.

Arabic is a cursive script where characters change shape depending on their position (initial, medial, final, isolated). The SVG <text> elements produced by the renderer appear to break Arabic shaping/ligatures, causing each character to render in its isolated form.

Environment

• @wuba/react-native-echarts: ^2.0.2
• echarts: 5.x
• Renderer: SVG (SvgChart)
• Platform: iOS & Android (React Native)
• React Native: 0.81+

Steps to Reproduce

1. Set device/app language to Arabic (RTL via I18nManager.isRTL = true)
2. Render any chart with Arabic text in axis labels, tooltip, or legend
3. Set fontFamily to an Arabic-supporting font (e.g., Al-Jazeera-Arabic-Regular)

xAxis: {
  type: 'category',
  data: ['قبل 9 أشهر', 'قبل 6 أشهر', 'قبل 3 أشهر', 'الحالي'],
  axisLabel: {
    fontFamily: 'Al-Jazeera-Arabic-Regular',
    fontSize: 12,
  },
},
tooltip: {
  show: true,
  textStyle: {
    fontFamily: 'Al-Jazeera-Arabic-Regular',
  },
},

Expected Behavior

Arabic characters should render as connected cursive text with proper ligatures, just like how they appear in React Native <Text> components.

Example: الحالي (connected)

Actual Behavior

Arabic characters render as isolated disconnected glyphs, appearing broken/cut character by character.

Example: ا ل ح ا ل ي (each character separated and in isolated form)

Workaround

Currently there is no reliable workaround within the SVG renderer. We've tried:

• Setting fontFamily to Arabic fonts — partially helps but doesn't fully fix ligatures
• Using confine: true on tooltips — no effect on text shaping

The only full workaround is to use a WebView with an HTML-based ECharts renderer, which handles Arabic text correctly via the browser's text engine.

Notes

This likely affects all RTL/cursive scripts (Arabic, Persian, Urdu) and may be related to how SVG <text> elements are constructed in react-native-svg. If individual <tspan> elements are created per character, Arabic shaping will break.