You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "LehtoJ29480-pki (via GitHub)" <gi...@apache.org> on 2024/02/12 08:55:47 UTC
[I] [Feature] Right-to-left (RTL) script/language support [echarts]
LehtoJ29480-pki opened a new issue, #19609:
URL: https://github.com/apache/echarts/issues/19609
### What problem does this feature solve?
I've researched docs but I didn't find any information related to Right-to-left (RTL) "mode" or similar. This is so that languages with RTL scripts (Arabic, Hebrew etc.) are shown correctly. Is there a way to display ECharts in RTL format (usually it looks like the chart is flipped horizontally)?
I noticed that Arabic language support is added in 5.5.0 but if there is no RTL mode then isn't it essentially useless then at this point?
### What does the proposed API look like?
-
--
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: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] Right-to-left (RTL) script/language support [echarts]
Posted by "AmineYagoub (via GitHub)" <gi...@apache.org>.
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] Right-to-left (RTL) script/language support [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #19609:
URL: https://github.com/apache/echarts/issues/19609#issuecomment-1939841609
duplicate of #16419. RTL support, if any, needs to be documented.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org