How to add an image inside the pie

[tal987]

Hey Im trying to add an image inside the pie but with no success:

    <View style={styles.statContainer}>
    {
      <Pie radius={43} innerRadius={33} series={series} colors={['#FFF', color, '#FFF']} backgroundColor='#DCDCE0' />
    }

    <View style={styles.gauge}>

        <ResponsiveImage
        style={{ backgroundColor: 'transparent' }}
        source={require('../assets/calories_gauge.png')}
        initWidth="1"
        initHeight="1" />

    </View>

How can I do that? thanks!

[zgordon01]

You should be able to use absolute positioning on the image to accomplish this. See in our examples how we put the 60 inside of the pie. I will put the snippet below. If you can't figure it out let me know and I can help out with a more specific code snippet.

<View style={{ width: 175, alignItems: 'center' }}>
              <Pie
                radius={80}
                innerRadius={75}
                sections={[
                  {
                    percentage: 60,
                    color: '#f00',
                  },
                ]}
                backgroundColor="#ddd"
              />
              <View
                style={styles.gauge}
              >
                <Text
                  style={styles.gaugeText}
                >
                  60%
                </Text>
              </View>
            </View>

const styles = StyleSheet.create({
  container: { alignItems: 'center', justifyContent: 'center', height: 1050 },
  gauge: {
    position: 'absolute',
    width: 100,
    height: 160,
    alignItems: 'center',
    justifyContent: 'center',
  },
  gaugeText: {
    backgroundColor: 'transparent',
    color: '#000',
    fontSize: 24,
  },
})