Is RTL layout supported for Victory charts?

[BhargaviAnnadevara]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Question

I've seen some issues opened and closed in this GitHub repo discussing RTL features for different victory charts and components, but without any concrete conclusion. I want to know whether victory/victory-native libraries support rendering charts in right-to-left layout out of the box, without having to perform any customizations to handle them on the implementation front. Please clarify.

[BhargaviAnnadevara]

Related issues:

1. React Native: Victory charts are not supported for rtl. #2033
2. Change Victory Chart to rtl #2174
3. Fix label spacing and text size approximation to support non-latin characters and RTL #2108

@boygirl @becca-bailey Please clarify, as we are looking to support it in one of our apps!

[carbonrobot]

Hi @bhargaviannadevara-msft there is currently no official RTL support in either library. We would be happy for any community contributions to make that work.

[BhargaviAnnadevara]

@carbonrobot Until the required support is added, can you please suggest workarounds that may help?

For example, I found that using the orientation and invertAxis props help with customizing the layout when rendering in RTL mode, but flipping legend has been tricky, and I haven't had much luck with altering any of its default props or applying CSS styles (flexDirection/transform). Even if it worked, I might be able to only reverse the order of the legend labels, but not its symbols. Any thoughts?

Also, noticed that switching to Arabic changes the axis tick values accordingly, but not the legend text. Why is that?

[carbonrobot]

There is no current workaround for RTL. In order to correctly position text in an SVG element, we must first measure the size of the text. This is done by using character widths that are presized in a file since SVG does not offer a way to measure itself until after rendering. Since these widths must be predetermined, they need to be hardcoded into the source code, so the only fonts that are supported are the ones inside that file.

Ideally, now that canvas has more universal support, we could rewrite our code to render to a hidden canvas element and measure the text there before rendering. This could potentially alleviate the need to store precomputed fonts and allow us to support any font with LTR and RTL.

At this time, I don't have anyone on the core team with capacity to tackle this change, however.