Vertical numbers displace when set direction to "rtl"

[successbyte]

Description

When using Apexchart in "rtl" mode for languages like Persian the vertical numbers and also the series names at the bottom displace
Example: I changed my app language to Persian/Arabic, by changing it the direction of app also changes: direction = "rtl" and the chart styles miss up the vertical numbers overflows from its place and comes on the graph and the bottom series names and it's colors stick to each other.

Steps to Reproduce

1. Go to the html file where the <div id="chart"></div> is located (file that the chart is used in)
2. give the above div or to the body tag a dir="rtl" atribute, or style="direction: rtl" style
3. and also give the chart large numbers to see the behavior

Expected Behavior

Actual Behavior

Screenshots

Reproduction Link

https://codepen.io/ehsanullah_haidary/pen/gONzjyK

[successbyte]

I also love to contribute to the apexchart.js repo it would be great if you assign me this issue please

[raziq-quraishi]

Hello I also have the same issue in one of the apps that I am working on. and the app is in rtl direction

[junedchhipa]

@ehsanullahhaidary I have assigned it to you. You may create a PR.

[successbyte]

@junedchhipa thank you
and I will create a PR

[successbyte]

Do you have any discord channel or any place for the contributors?
if yes please send me the link
thanks

[successbyte]

@junedchhipa Hello
As I checked graphs in Persian and Arabic (direction = rtl) all the graphs were the same as ours (apexchart)
then I have to set the correct styles as bellow and do not change graph direction.
Persian (rtl) standard graphs:

[successbyte]

thanks @junedchhipa