RTL Charts in React native

Question

After spending many hours for looking Graphs in RTL for react native,I found nothing with respect to RTL. Is there any charts or Graphs available in RTL for react native?

Answer 1

Actually it's pretty simple. You can pick any chart library, for instance this one (used for the examples below) https://github.com/JesperLekland/react-native-svg-charts

In RTL all you need to do is to reverse order of the array you pass to your chart: For instance if you have:

const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]

Then in RTL you want to pass this data to your chart:

const dataRTL = [...data].reverse() 
/** [10, -5, 25, 0, -20, -10, 20, 30, 10, 50]  **/

If you have an X axis you also need to reverse the data of this axis
If you want to put Y axis on the right side, you can switch order of your component (see example below)

Example without RTL

 render() {
    const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]
    const xLabel = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

    return (
      <View>
        <View style={{ height: 300, flexDirection: 'row' }}>
          <YAxis
            data={data}
            contentInset={{ top: 20, bottom: 20 }}
            svg={{ fill: 'black', fontSize: 12 }}
            numberOfTicks={8}
            formatLabel={(value) => `${value}ºC`}
          />
          <LineChart
            style={{ flex: 1, marginRight: 10 }}
            data={data}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
            contentInset={{ top: 20, bottom: 20 }}
          >
            <Grid />
          </LineChart>

        </View>
        <View>
          <XAxis
            style={{ marginHorizontal: 10 }}
            data={data}
            formatLabel={(value, index) => xLabel[index]}
            contentInset={{ left: 22, right: 0 }}
            svg={{ fontSize: 12, fill: 'black' }}
          />
        </View>
      </View>
    )

Example with RTL

  render() {
    const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]
    const dataRTL = [...data].reverse()
    const xLabel = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
    const xLabelRTL = [...xLabel].reverse()

    return (
      <View>
        <View style={{ height: 300, flexDirection: 'row' }}>
          <LineChart
            style={{ flex: 1, marginLeft: 10 }}
            data={dataRTL}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
            contentInset={{ top: 20, bottom: 20 }}
          >
            <Grid />
          </LineChart>
          <YAxis
            data={dataRTL}
            contentInset={{ top: 20, bottom: 20 }}
            svg={{ fill: 'black', fontSize: 12 }}
            numberOfTicks={8}
            formatLabel={(value) => `${value}ºC`}
          />
        </View>
        <View>
          <XAxis
            style={{ marginHorizontal: 10 }}
            data={dataRTL}
            formatLabel={(value, index) => xLabelRTL[index]}
            contentInset={{ left: 0, right: 22 }}
            svg={{ fontSize: 12, fill: 'black' }}
          />
        </View>
      </View>
    )

( Note that I also put the YAxis below the LineChart component in order to put the Y axis on the right side )