Is RTL layout supported for Victory charts? about victory

[BhargaviAnnadevara]

Related issues:

1. #2033
2. #2174
3. #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.