react-native-gifted-charts icon indicating copy to clipboard operation
react-native-gifted-charts copied to clipboard

PieChart & PieChartPro prop mismatch

Open CalvinNFT opened this issue 6 months ago • 0 comments

<PieChart> and <PieChartPro> component are said to have same props

Animation and curved paths are supported in <PieChartPro> component. It receives all the above props (same as the <PieChart> component)

yet in fact they do not. See below:

Case Pie Chart default component

Pie chart component

  <PieChart
    donut
    initialAngle={-Math.PI * 2}
    centerLabelComponent={innerLabel}
    innerRadius={80}
    innerCircleColor={Colors.BACKGROUND_PRIMARY}
    radius={wp(25)}
    data={pieData}
  />

Case Pie Chart PRO component

image

// same props, different component
  <PieChartPro
    donut
    initialAngle={-Math.PI * 2}
    centerLabelComponent={innerLabel}
    innerRadius={80}
    innerCircleColor={Colors.BACKGROUND_PRIMARY}
    radius={wp(25)}
    data={pieData}
  />

Note the differences:

  1. Initial angle does not work on Pro component
  2. Pie data is reversed in Pro (Pie values grow counter clock-wise)

I have solved these issues in use with the below solutions:

  1. Not using the Pro component - it has issues with animated input values for in pieData => Smoother to rerender pie
  2. Using Array.reverse()

CalvinNFT avatar Aug 14 '24 12:08 CalvinNFT