I am using react-native-chart-kit and I am trying to have a cbar chart with any color filling up the bars, as of now it is gray but I am trying to change it but i have tried adding color: {} within the datasets part, as well as svg. But to no success. Any suggestions will be greatly appreciated.
render() {
return (
<View>
<BarChart
data={{
labels: [
'1',
'2',
'3',
'4',
'5',
'6',
'7'
],
datasets: [
{
data: this.props.data,
},
],
}}
svg={{ fill: 'green' }}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: "0",
strokeWidth: "2",
stroke: "#fff"
},
propsForBackgroundLines: {
strokeWidth: 0
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
}
You can set fillShadowGradient and fillShadowGradientOpacity in your chartConfig.
More info here: https://github.com/indiespirit/react-native-chart-kit#chart-style-object