Missing Data in Horizontal Bar Chart

masihniaz commented 4 years ago

What is the problem?

One or more data points are missing in the "Horizontal Bar Chart".

When does it happen?

The data is displayed correctly in the vertical bar chart as you can see in the image below:

However, when I change the bar chart from vertical to horizontal, one ore more data points are missing as you can see in the image below:

What platform?

iPad

[ 12.3] iOS

react-native version: 0.60.5 react-native-svg-charts version: ^5.3.0 react-native-svg version: 6.2.1

Code to reproduce

  const data1 = [14, 20, 15]
    .map(value => ({ value }))
  const data2 = [14, 5, 18]
    .map(value => ({ value }))
  const data3 = [14, 12, 8]
    .map(value => ({ value }))

  const barData = [
    {
      label: 'label 1',
      data: data1,
      svg: {
        fill: '#FFBF00',
      },
    },
    {
      label: 'label 2',
      data: data2,
      svg: {
        fill: '#0DA193'
      }
    },
    {
      label: 'label 3',
      data: data3,
      svg: {
        fill: '#007396'
      }
    }
  ]
<BarChart 
    style={ { height: 200 } }
    data={ barData }
    yAccessor={({ item }) => item.value}
    contentInset={ { top: 30, bottom: 30 } }
    spacingInner={0.2}
    horizontal={true}
>
    <Grid/>
</BarChart>

ajacquierbret commented 4 years ago

Hi @masihniaz ! Is this issue still occuring ? Could you provide a JSFiddle reproducible exemple of this problem as I can't figure out how to use your code without errors.

Also, you're using arrays in data nested objects, I assume you know what you're doing but be shure that none of the working exemples are doing it this way. Maybe you could try to replace your data arrays by something like this :

const data1 = [
  {
    value: 14,
  },
  {
    value: 20,
  },
  {
   value: 15,
  }
]

See this exemple : https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/bar-chart/horizontal-with-axis.js

mohity777 commented 3 years ago

this issue is happening. @masihniaz did u resolve?

mohity777 commented 3 years ago

@ajacquierbret can u please tell how to give yaxis to this vertical bar chart not horizontal?? Please

JesperLekland / react-native-svg-charts