AmineYagoub commented on issue #19609:
URL: https://github.com/apache/echarts/issues/19609#issuecomment-2708287016
You can achieve RTL support by customizing the chart options and using CSS
to adjust the layout.
1. **Reverse the X-Axis**: You can reverse the X-axis to make the chart
appear in RTL mode.
2. **Adjust Text Alignment**: Use CSS to align text and labels to the right.
### Example
Here is an example of how you can configure an ECharts chart to support RTL
mode:
```javascript
import React from 'react';
import ReactECharts from 'echarts-for-react';
const RtlChart = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
inverse: true, // Reverse the X-axis
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
};
return (
<div style={{ direction: 'rtl' }}> {/* Set the direction to RTL */}
<ReactECharts option={option} />
</div>
);
};
export default RtlChart;
```
In this example:
- The `inverse: true` property is used to reverse the X-axis.
- The `direction: 'rtl'` CSS property is used to set the direction of the
container to RTL.
You can further customize the chart options and CSS to achieve the desired
RTL layout for your specific use case.
```ts
import React from 'react';
import ReactECharts from 'echarts-for-react';
const RtlChart = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
inverse: true, // Reverse the X-axis
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
};
return (
<div style={{ direction: 'rtl' }}> {/* Set the direction to RTL */}
<ReactECharts option={option} />
</div>
);
};
export default RtlChart;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
