RTL not working?

[ashikns]

I wrapped a HorizontalBarChart in a ThemeProvider and set dir='rtl' on it.

<ThemeProvider dir='rtl'>
    <HorizontalBarChart data={data}
      variant={HorizontalBarChartVariant.AbsoluteScale} />
</ThemeProvider>

However it doesn't seem to have any effect? When I step through HorizontalChart.base.tsx, the call to getRTL() does not receive the theme (theme is undefined inside the function), so it always returns false for rtl.

I'm almost certain I'm using ThemeProvider wrong, but from the docs it looks like this should just work? Please tell me what I'm missing here.

[khmakoto]

@ashikns you should provide rtl as part of the theme and not as the html dir attribute:

<ThemeProvider theme={{ rtl: true }}>
    <HorizontalBarChart data={data}
      variant={HorizontalBarChartVariant.AbsoluteScale} />
</ThemeProvider>

Let me know if that makes it work for you.

[ashikns]

@khmakoto Thank you for the quick response. I tried this and it seems to have did something.

Without rtl:

With theme={{ rtl: true }}:

So it looks like chartTitle has been affected, but not the bars or barLabels. Specifically I'm setting the breakpoint in HorizontalChart.base.tsx and it still seems like _isRTL is false inside it. At least from the code it looks like if it is true barLabel should appear on the opposite side as well.

To provide some context I'm trying to horizontally flip the bar chart. I can set styles={{ chartWrapper: { transform: 'scaleX(-1)' } }} and that works (with or without rtl):

but as you can see it flips the text rendering as well. If there's any other way to do this that'll work for me as well.

[khmakoto]

Seems like RTL support is not properly implemented yet in those charts.

CCing @AtishayMsft who might be able to provide more information here.

[ashikns]

I manually copied over HorizontalChart.base.tsx (and the bare minimum files to make it work, so excuse the broken titles and such, but it demonstrates the point) and manually flipped the x position. That works as I expect it to, the barLabels are exactly flipped:

Sorry, one more edit, in case this helps accelerate the bug fix. If I pass this.props.theme to the getRTL call in line 43 on HorizontalBarChart.base.tsx, it works beautifully as I expect:

[AtishayMsft]

@ashikns, There was a change in the past to allow rtl to be set via themes dc551ba.

Charting package did not adopt this change. We will add it to our backlog. Thanks for letting us know.

Meanwhile you can set rtl using below methods that charting honors.

1. Set dir='rtl' to root element or body element of your html page.
2. Set the rtl state of the page to true using @fluentui/react/lib/Utilities setRTL function.
3. Set isRTL=1 in your browser local storage.

[ashikns]

Unfortunately that doesn't work for me. I need to set rtl on a per component basis.

[AtishayMsft]

In that case you are welcome to fix the issue as you suggested above in charting code and raise a PR. We will be happy to guide and merge your fix.