Create gradient with Purechart

Question

I am using react-native-pure-chart for create my statistics graphics but I need create a gradient inside It. Can you help me because I don't know.

Result that I will hope

Answer 1

Well, it is a very general question, so my answer will be a little general: To make gradient effect the best package is this one:

https://github.com/react-native-community/react-native-linear-gradient

After installing this package, you can use it over your char component. For example:

    import LinearGradient from 'react-native-linear-gradient';

Then we can have:

render() {

        }
        return (
                    <View>
                            <LinearGradient colors={['transparent', 'transparent', '#000000']} locations={[0,0.6,0.9]} style={styles.imageSlideMask}>
                              <Your chart component will be here />
                            </LinearGradient>
                    </View>

        );
      }
    }
const styles = StyleSheet.create({

  imageSlideMask:{
    marginTop:5, 
    width: ((Dimensions.get('window').width)/1.7),
    height:((Dimensions.get('window').height)/2.1),
    flexDirection:'column', 
    justifyContent: 'flex-end', 
    alignItems: 'flex-start', 
    borderRadius:10,
    // shadowOffset:{  width: 0,  height: 2, blur:2, spread:0  },
    // shadowColor: '#000',
    // shadowOpacity: 0.4,
    opacity:0.7
  },



});

You can also add shadows to your layers by uncommenting the shadowOffset, shadowColorand shadowOpacity. For width and height you have to give constant size or suitable numbers for correct devision.

I hope I could help. :)