Problem
In an RTL locale (Arabic, Hebrew, Farsi) the value axis belongs on the right, the reading-side edge. @tanstack/charts@0.11.0 appears to have no option for it: the axis always renders on the left.
Searching the published types, there is no side, orientation, or position on ChartAxisOptions, and the only placement type in the package is ChartLegendPlacement = 'top' | 'bottom'.
The X axis is fine: x: { reverse: true } flips the category order correctly, so time already reads right-to-left. It is only the Y axis placement that has no lever.
Why a CSS workaround is not one
transform: scaleX(-1) on the container mirrors the marks and the tick text, and breaks pointer hit-testing and gradient direction. direction: rtl on the host does not move the axis, since the placement is computed in the layout, not laid out by the browser.
What we did
We migrated a production app off recharts to @tanstack/charts and shipped the Arabic locale with the Y axis on the wrong side, as a deliberate, documented regression, because everything else about the migration was an improvement. recharts covers this with <YAxis orientation="right" />.
Ask
An axis-side option, e.g.
y: { axis: { side: 'end' } } // or 'right' | 'left', or an rtl flag on the chart'start' | 'end' would be the nicer spelling: it composes with x.reverse and means the chart can be made RTL-correct with one flag rather than per-axis literals.
Happy to send a PR if you can point at where axis placement is resolved in the layout.
Environment
@tanstack/charts 0.11.0- React 19, SVG renderer
Problem
In an RTL locale (Arabic, Hebrew, Farsi) the value axis belongs on the right, the reading-side edge.
@tanstack/charts@0.11.0appears to have no option for it: the axis always renders on the left.Searching the published types, there is no
side,orientation, orpositiononChartAxisOptions, and the only placement type in the package isChartLegendPlacement = 'top' | 'bottom'.The X axis is fine:
x: { reverse: true }flips the category order correctly, so time already reads right-to-left. It is only the Y axis placement that has no lever.Why a CSS workaround is not one
transform: scaleX(-1)on the container mirrors the marks and the tick text, and breaks pointer hit-testing and gradient direction.direction: rtlon the host does not move the axis, since the placement is computed in the layout, not laid out by the browser.What we did
We migrated a production app off recharts to
@tanstack/chartsand shipped the Arabic locale with the Y axis on the wrong side, as a deliberate, documented regression, because everything else about the migration was an improvement. recharts covers this with<YAxis orientation="right" />.Ask
An axis-side option, e.g.
'start' | 'end'would be the nicer spelling: it composes withx.reverseand means the chart can be made RTL-correct with one flag rather than per-axis literals.Happy to send a PR if you can point at where axis placement is resolved in the layout.
Environment
@tanstack/charts0.11.0