Fix #6101 : add locale prop and Config.plotly_locale for i18n chart formatting

[pranavmanglik]

feat(plotly): add locale prop and Config.plotly_locale for i18n chart formatting

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

---

Summary

Adds a locale prop to rx.plotly (and all plotly subcomponents) so that charts automatically follow user language and regional formatting — number separators, date axis labels, month/weekday names, and modebar button tooltips. Also adds plotly_locale to rx.Config as an app-wide default.

Problem

rx.plotly had no way to configure the Plotly.js locale. All charts rendered with en-US defaults regardless of the user's language — decimal separators, date axis tick labels, month/weekday names, and modebar button tooltips were always in English with no first-class Reflex API to change this.

Developers targeting non-English audiences had to ship their own JS shims to work around this.

Usage

# per-chart locale
rx.plotly(data=fig, locale="de")      # German
rx.plotly(data=fig, locale="zh-CN")   # Simplified Chinese
rx.plotly(data=fig, locale="fr")      # French
rx.plotly(data=fig, locale="pt-BR")   # Brazilian Portuguese
app-wide default in rxconfig.py
config = rx.Config(

app_name="myapp",

plotly_locale="de",

)
also works via environment variable
REFLEX_PLOTLY_LOCALE=de reflex run
state-driven — switches locale without page reload
rx.plotly(data=fig, locale=AppState.locale)

Per-chart locale= takes precedence over Config.plotly_locale. If neither is set, Plotly's built-in "en" defaults apply — zero behaviour change for existing apps.

Test results

tests/components/plotly/test_plotly.py::test_plotly_locale_default PASSED
tests/components/plotly/test_plotly.py::test_plotly_locale_de     PASSED
tests/components/plotly/test_plotly.py::test_plotly_locale_zh     PASSED
tests/components/plotly/test_plotly.py::test_config_has_plotly_locale   PASSED
tests/components/plotly/test_plotly.py::test_config_plotly_locale_default PASSED
5 passed, 2 warnings in 0.34s

Manually verified with locale="de" and locale="zh-CN" using reflex run. Confirmed German modebar tooltips ("Hineinzoomen", "Graphen als PNG herunterladen") and Chinese tooltips rendering correctly. Default chart (no locale set) behaviour is unchanged.

Supported locales

~70 locales from plotly.js-locales (MIT licensed), including: af, ar, bg, cs, da, de, de-ch, el, es, es-ar, et, fa, fi, fr, fr-ch, he, hi-in, hr, hu, id, it, ja, ko, lt, lv, nl, no, pl, pt-br, pt-pt, ro, ru, sk, sl, sr, sv, th, tr, uk, vi, zh-cn, zh-hk, zh-tw and more.

# feat(plotly): add `locale` prop and `Config.plotly_locale` for i18n chart formatting

All Submissions:

• Have you followed the guidelines stated in [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) file?
• Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/reflex-dev/reflex/pulls) for the desired changed?

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

Fix #6101

[pranavmanglik]

Here, if you are using de locale, then "Zoom" is same as in English. I have checked that in /tmp/plotly_locale_test/.web/node_modules/plotly.js-locales.

[greptile-apps]

Greptile Summary

This PR adds i18n locale support to rx.plotly by injecting a _RxPlotLocale React wrapper that loads locale data asynchronously from the jsDelivr CDN and passes it inline to Plotly.js via config.locales. A plotly_locale field is also added to Config as an app-wide default. Prior review concerns (production 404s via /node_modules/ path, path-traversal in the locale key, cache race conditions, and subclass rendering) have all been addressed in follow-up commits.

Confidence Score: 5/5

Safe to merge; the only remaining finding is an edge-case spread-order issue that only surfaces if a caller simultaneously sets both locale prop and config.locale.

All P0/P1 concerns from prior review rounds (production 404s, path traversal, cache race conditions, subclass rendering) have been addressed. The one new P2 finding (mergedConfig spread order) only matters when a caller provides conflicting locale settings via two different props at once, which is not a realistic usage pattern.

reflex/components/plotly/plotly.py — specifically the mergedConfig construction inside _RxPlotLocale.

Important Files Changed

Filename	Overview
reflex/components/plotly/plotly.py	Adds locale Var prop, _rxLoadLocale/_RxPlotLocale JS helpers via add_custom_code, and a _render override that wraps all Plotly variants through _RxPlotLocale with _plotComponent forwarding; mergedConfig spread order can let a user's config.locale override the dedicated locale prop.
reflex/config.py	Adds plotly_locale: str = "" field to BaseConfig with a docstring comment; no issues found.
tests/components/plotly/test_plotly.py	New test file with 5 tests covering locale prop default/de/zh-CN values and BaseConfig.plotly_locale field existence and default; previously flagged unused imports have been removed.

Sequence Diagram

sequenceDiagram
    participant App as Reflex App
    participant RxPlot as _RxPlotLocale
    participant Cache as _rxLocaleCache
    participant CDN as jsDelivr CDN
    participant Plotly as Plotly.js

    App->>RxPlot: render(locale="de", config={...})
    RxPlot->>RxPlot: useState(localeData=null)
    RxPlot->>RxPlot: useEffect — locale changed

    alt locale is empty string
        RxPlot->>Plotly: createElement(PlotComponent, {config})
    else locale is set
        RxPlot->>Cache: _rxLocaleCache["de"]?
        alt already cached
            Cache-->>RxPlot: return existing Promise
        else not cached
            RxPlot->>CDN: fetch(.../plotly.js-locales/de.js)
            CDN-->>RxPlot: CJS locale script text
            RxPlot->>RxPlot: new Function sandbox eval
            RxPlot->>Cache: store Promise
        end
        RxPlot->>RxPlot: setLocaleData(localeObj)
        RxPlot->>Plotly: createElement(PlotComponent, {config: merged})
    end

    Plotly-->>App: chart rendered with i18n locale

Loading

_{Reviews (4): Last reviewed commit: "fix(plotly): revert is_default=False reg..." | Re-trigger Greptile}

[pranavmanglik]

Done that