react-nativereact-native-svgreact-native-svg-charts

How to decrease the width of the PieChart in the module react-native-svg-charts

Since already thank you wanted to know if anyone knows how to decrease the width of Graph Pie, for it to get thinner I tried some properties in svg, but nothing works anyone could help

today I have this result I wanted to reach this result

CURRENT

enter image description here

EXPECT

enter image description here

current component


    <View style={styles.areaGraphic}>

      <PieChart style={{ height: '100%', top: 20 }} data={pieData} strokeWidth={0.2} />
      <Text style={{
        top: -50, left: 38, fontSize: 14, fontWeight: 'bold',
      }}
      >
        {data.label.name}
      </Text>
      <Text style={{
        top: -50, fontSize: 12, textAlign: 'center',
      }}
      >
        {data.label.description}
      </Text>
    </View>
Solution

  • There are to props for the PieChart component you can use:

    innerRadius: The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels)

    outerRadius: The outer radius, use this to tweak how close your pie is to the edge of it's container. Takes either percentages or absolute numbers (pixels)

    I would play around with the two props to achieve the result like in the screenshot above.

    Good luck!