React-native-svg-charts: y.ticks is not a function

[shamanking]

I use YAxis as code:

 <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
                <YAxis
                    data={data}
                    yAccessor={({ index }) => index}
                    scale={scale.scaleBand}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    formatLabel={(_, index) => data[ index ].label}
                />
                <BarChart
                    style={{ flex: 1, marginLeft: 8 }}
                    data={data}
                    horizontal={true}
                    yAccessor={({ item }) => item.value}
                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.VERTICAL}/>
                </BarChart>
            </View>

But, it had error: y.ticks is not a function(In 'y.ticks(numberOfTicks)', 'y.ticks' is undefined

[shamanking]

It's ok with replace scale.scaleBand by scale.ScaleBand
But what is index in formatLabel={(_, index) => data[ index ].label}
My data:

const datachart = [
      {
        value: 10,
        label: 'One',
      },
      {
        value: 10,
        label: 'Two',
      },
      {
        value: 10,
        label: 'Three',
      },
     {
        value: 10,
        label: 'Four',
      },

]

And index is 0, 1, 2, 3, 4, ..., 15 ?

When I remove one element, index is 0, 1, 2, 3, 4 ?
What is logic for it ?

[gxfan]

I have the same problem, i use version 5.1.1 to solve it finally.

[ankushdec1993]

is there a solution this only happens in android

[oscar-gallog]

Same problem here, this is not working at all. It happens on iOS too.

[smubarak-ali]

I am facing the same exact problem :(

[jbernhardt23]

I'm having the same issue and it seems that the problem is in the way that YAxis is doing comparisons between the scale prop being passed to the component and the scale.scaleBrand used from the d3-scale dependency used in the library.

This particular ternary operation const ticks = scale === d3Scale.scaleBand ? values : y.ticks(numberOfTicks); is returning false if you passed a scale.scaleBran from another d3-scale version.

To fix this, use the same d3-scale version from the library which is 1.0.6.

[usrbowe]

I feel this might be related: https://github.com/JesperLekland/react-native-svg-charts/issues/392#issuecomment-550995454

@jbernhardt23 I'll try to raise PR to fix that. So we can use the scaleBand

[usrbowe]

closing this duplicate issue, and keeping this for reference: #392