🥧

[Recharts] PieChartのアニメーションを時計回りに反転させる

2025/01/11に公開

デフォルトのアニメーションだと3時位置から反時計回りに一周する。

PieのstartAngleとendAngleを調整することで、アニメーションの向き・幅を変更できる。

デフォルトはstart: 0end: 360なので、たとえばstart: 360end: 0とすると時計回りになる。
さらに、3時位置以外(startが1以上)から始めて1周させたい場合は、endAngleに負数を設定する

<Pie
  startAngle={90}
  endAngle={-270}
// ---
/>

負数を設定できるということに気づくまで時間がかかってしまった

公式Doc

https://recharts.org/en-US/api/Pie#startAngle

Discussion