[Help] xAxis values not aligned with BarChart

What is the problem?

xAxis doesn’t render the values inline with BarChart

When does it happen?

just trying to render it onLoad using the following code

xAxis

<XAxis
   scale={scale.scaleBand}
   data={data}
   xAccessor={({ item }) => item.title}
   formatLabel={value => value}
   svg={{
     fill: 'grey',
     fontSize: 10,
   }}
/>

What platform?

• [x ] iOS 11

React Native version: 0.55.4

Code to reproduce

<View style={{ padding: 10 }}>
    <View style={{ flexDirection: 'row', height: 150 }}>
      <YAxis
        data={data}
        yAccessor={({ item }) => item.value}
        formatLabel={value => value}
        numberOfTicks={5}
        min={0}
        svg={{
          fill: 'grey',
          fontSize: 10,
        }}
      />
      <BarChart
        style={{ flex: 1, marginLeft: 5 }}
        data={data}
        scale={scale.scaleBand}
        yAccessor={({ item }) => item.value}
        gridMin={0}
        svg={{
          fill: '#A6B4F3',
        }}
      >
        <Grid />
      </BarChart>
    </View>
    <XAxis
      scale={scale.scaleBand}
      data={data}
      xAccessor={({ item }) => item.title}
      formatLabel={value => value}
      svg={{
        fill: 'grey',
        fontSize: 10,
      }}
    />
  </View>

[marciogurka]

I had the same issue, then checked that the “correct” d3-scale lib is inside the react-native-svg-charts folder inside node_modules, like this: node_modules/react-native-svg-charts/node_modules/d3-scale, when I imported this lib with this path all worked fine! 😃

[alburdette619]

The solution is not installing d3-scale as a dependency as @JesperLekland says. It entirely fixed the issue for me.