react-native-svg-charts / bar chart with variable bar width?

Question

Using react-native-svg-chart, I’d like adjust bar widths according to a variable parameter but unfortunately I can’t find any example nor make my head around it.

Expected result to be like:

Should I use the bandwidth argument? If correct, in which way? I can’t find any documentation where that is illustrated :( Should I your edit code? Unfortunately I’m not fluent in d3 and couldn’t find the proper way to..

Have you found out any walkaround yet? – Rishav Kumar Mar 06 '19 at 11:01 — Rishav Kumar, Mar 06 '19 at 11:01

score 1 · Answer 1 · answered Oct 14 '20 at 14:43

You can use spacingInner between 0 to 1.

<BarChart
              style={{
                height: height * 0.5,
                width: width * 0.9,
                paddingVertical: 16,
              }}
              animate={true}
              data={data}
              spacingInner={0.8}
              yAccessor={({item}) => item.value}
              xAccessor={({item}) => item.date}
              bandwidth={10}
              scale={scale.scaleTime}
              cornerRadius={45}
              svg={{
                fill: 'url(#gradient)',
              }}>
              <Grid direction={Grid.Direction.HORIZONTAL} />
              <Gradient />
            </BarChart>

react-native-svg-charts / bar chart with variable bar width?

1 Answers1