Strokewidth is not working properly for donut chart Resolve

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

donut chart stroke width not working,about abhinandan-kushwaha/react-native-gifted-charts

Comments (3)

Abhinandan-Kushwaha commented on May 23, 2024

Hi @ShivaSunny9
Thanks for pointing out the issue. This has been now fixed in version 0.1.15
Closing the issue.
Cheers! 🎉

from react-native-gifted-charts.

Abhinandan-Kushwaha commented on May 23, 2024

Hi @ShivaSunny9
I guess you were trying to achieve something like this-

For this, you need to upgrade the react-native-gifted-charts package to 0.1.15.
In addition to this, you need to add the innerCircleBorderWidth and innerCircleBorderColor props.

So your code should look like this-

const pieData = [
    {
      value: 25,
      color: '#FFC107',
      textBackgroundColor: '#FFC107',
      textColor: '#343A40',
      textSize: 12,
    },
    {
      value: 25,
      color: '#FAD76F',
      textBackgroundColor: '#FAD76F',
      textColor: '#343A40',
      textSize: 12,
    },
    {
      value: 25,
      color: '#F7E3A7',
      textBackgroundColor: '#F7E3A7',
      textColor: '#343A40',
      textSize: 12,
    },
    {
      value: 25,
      color: '#F5EBCD',
      textBackgroundColor: '#F5EBCD',
      textColor: '#343A40',
      textSize: 12,
    },
  ];
  <PieChart
        data={pieData}
        donut
        innerRadius={55}
        radius={110}
        showText={true}
        showValuesAsLabels={true}
        strokeWidth={20}
        innerCircleBorderWidth={20}
        innerCircleBorderColor={'green'}
        strokeColor={'green'}
      />

from react-native-gifted-charts.