Add Support for Right-to-Left (RTL) Chart Animation

[zaidqureshi95]

What problem does this feature solve?

Hi,

I would like to request a new feature for the library to support right-to-left (RTL) chart animation.

Current Behavior:

• The chart animation currently starts from left to right, which works well for languages with left-to-right (LTR) text direction.

Requested Feature:

• Introduce an option to enable right-to-left (RTL) chart animation. When enabled, the chart animation should start from the right side and move towards the left, which is suitable for languages with RTL text direction (such as Arabic).

Use Case:

• This feature will enhance the user experience for RTL language users by aligning the chart animation with the natural reading direction.
• It will improve usability and accessibility, making the library more versatile for global audiences.

Implementation Suggestion:

• Provide a configurable property or flag (e.g., isRTL) that developers can set based on the app's language settings. When this property is set to true, the chart animation should start from right to left.

Thank you for considering this feature request! I believe it would greatly benefit apps that cater to RTL language users.

Best regards,
zaid

What does the proposed API look like?

Proposed API Changes

To implement the right-to-left (RTL) chart animation, I propose adding a new optional property to the chart component, such as isRTL. This property will allow developers to specify whether the chart should animate from right to left, depending on the app's language settings.

API Design:

New Property:

• isRTL (Boolean) [mandatory]: This property will determine the direction of the chart animation.
  • If isRTL is set to true, the animation should start from the right and move to the left.
  • If isRTL is set to false or not specified, the default behavior (left-to-right animation) should be used.

Usage Example:

// Import the chart component from the library
import { ChartComponent } from 'chart-library';

const MyChart = () => {
  // Check if the current language is Arabic or any other RTL language
  const isRTL = (currentLanguage === 'ar' || currentLanguage === 'he');

  return (
    <ChartComponent
      data={chartData}
      isRTL={isRTL} // Set the isRTL property based on the app's language setting
      // Other chart properties...
    />
  );
};

How This Solves the Problem:

By introducing the isRTL property:

• The library will provide a flexible and customizable option for developers to control the chart animation direction based on the app's language settings.
• This ensures that users of RTL languages such as Arabic and Hebrew have a natural and intuitive experience while interacting with charts.

Proposed Changes in the Library:

1. Add the isRTL property to the chart component's props.
2. Modify the chart animation logic to check the value of isRTL:
   • If isRTL is true, adjust the starting point of the animation to the right side.
   • If isRTL is false or not provided, maintain the default left-to-right animation behavior.

Code Sample for Library Implementation:

// Inside the chart component
const ChartComponent = ({ data, isRTL = false, ...props }) => {
  // Determine animation direction
  const animationDirection = isRTL ? 'right-to-left' : 'left-to-right';

  // Apply animation based on the direction
  const animateChart = () => {
    if (animationDirection === 'right-to-left') {
      // Logic to animate from right to left
    } else {
      // Default logic to animate from left to right
    }
  };

  // Rest of the chart rendering logic...
  
  return (
    <div>
      {/* Render the chart with animation */}
    </div>
  );
};

Conclusion:

This proposed API change will provide a simple, effective solution to support RTL chart animation, enhancing the library's functionality for global usage.

[Ovilia]

Thanks for this. I think it would be a valuable feature for ECharts's i18n ability. We will do some research to see how much work is required for this feature.

[jad97]

@Ovilia I would also like to request that animation could occur in "data" order rather than LTR or RTL. For example, If I have a line series which resembles a circle, animation will always draw the bottom and top halves of the circle from left-to-right. In my particular case i have supplied the data so that it is in the correct order which should animate the circle as if drawing the circle.

Alternatively, this could be accomplished by splitting the circle into two line series (top and bottom of circle) and adding an AnimationDelay to the second series provided that the second series can be RTL while the first is LTR. So this feature would need to have the RTL feature on each series.

Note that i have used a circle to illustrate the feature request. I do not actually have a circle or would just draw a circle rather than a line series.