Persian language(rtl) does not work in label props

[ealimardaniii]

Bugs and Questions

Checklist

• This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• I have read through the FAQ and Guides before asking a question

• I am using the latest version of Victory

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I try to customize the label of VictoryBar to Show rtl language like Persian but does not work properly, and reverse the text that character could not connect together , what's the solution
I want to customize y Axis numbers and label of the chart to my local language(Persian)

Reproduction

<VictoryChart height={250} width={350}
                domainPadding={{ x: 50, y: [0, 20] }}
              >
               <VictoryBar
                  style={this.state.styleSummer}
                  data={[
                    { x: 'b', y: 20000, label: "bb" },
                  ]}
                  labelComponent={
                    <VictoryLabel labelPlacement="vertical" verticalAnchor="middle" text={"سلام"} />
                  }
                />
 </VictoryChart>

[boygirl]

@ealimardaniii I apologize for this oversight. I will add a direction prop to VictoryLabel with options "rtl" and "ltr" which will be passed down and applied to the rendered svg <text/> tag.

As an immediate solution, you can try adding direction: "rtl" to your label styles, but I'm not sure whether this svg attribute will work as a style.

[boygirl]

@ealimardaniii does this output look correct?

<VictoryLabel direction="rtl" verticalAnchor="start"
  style={[{ fill: "red", fontSize: 20 }]}
  text={"سلام world"}
/>

[FatemeMirzaeii]

@ealimardaniii does this output look correct?

<VictoryLabel direction="rtl" verticalAnchor="start"
  style={[{ fill: "red", fontSize: 20 }]}
  text={"سلام world"}
/>

this really didn't solve the problem.
any update on this issue?

[sfalihi]

for anyone who has this problem yet:
just use this library for conversion:
https://www.npmjs.com/package/arabic-persian-reshaper

example for usage =>

data={[
    {
      label: reshaper.PersianShaper.convertArabic("سلام"),
      y: 1,
    },
]}